React中使用Joi 17.7.0验证邮箱遇Built-in TLD list disabled错误的解决办法

问题根源 #

Joi在浏览器环境（React）中默认禁用了内置TLD列表，目的是减小包体积，导致无法识别非法域名后缀，出现Error: Built-in TLD list disabled错误，同时像umavah@mailto.pls这类本应无效的邮箱会被误判为有效。

解决方案1：手动启用Joi的内置TLD列表 #

通过导入Joi内置的TLD列表并配置到邮箱验证规则中，恢复TLD校验能力：

1. 导入Joi和内置TLD列表

import Joi from 'joi';
import tlds from 'joi/lib/tlds';

2. 定义带TLD校验的邮箱Schema

const emailValidationSchema = Joi.string().email({
  tlds: {
    allow: tlds // 启用内置合法TLD列表校验
  }
});

// 验证示例
const result = emailValidationSchema.validate('umavah@mailto.pls');
console.log(result.error); // 会返回错误，判定该邮箱无效

解决方案2：使用替代验证库 #

如果不想配置Joi，可选择对前端更友好的验证库：

选项A：validator.js #

轻量专注的验证工具，默认支持TLD校验：

import validator from 'validator';

const isValid = validator.isEmail('umavah@mailto.pls', { require_tld: true });
console.log(isValid); // 返回false

选项B：yup #

Schema风格验证库，浏览器端默认启用TLD校验，语法和Joi接近：

import * as yup from 'yup';

const emailSchema = yup.string().email('请输入有效邮箱');
emailSchema.isValid('umavah@mailto.pls').then(isValid => {
  console.log(isValid); // 返回false
});

内容的提问来源于stack exchange，提问作者Atul