如何使用Yup包实现邮箱字段的品牌名黑名单验证？

解决方案思路 #

要实现需求，核心是通过Yup的test()方法自定义验证逻辑：先提取邮箱中@之后、第一个.之前的域名主体部分，再与黑名单数组比对。

完整代码示例 #

// 黑名单数组
const blackListedDomains = [
  'facebook',
  'google',
  'amazon',
  'netflix',
  'hotmail',
  'microsoft',
  'gmail',
  'yahoo',
];

// 构建验证Schema
const EmailSchema = Yup.object().shape({
  email: Yup.string()
    .required('邮箱不能为空')
    .email('请输入有效的邮箱地址')
    .lowercase()
    .test(
      'domain-not-blacklisted',
      '不能使用受保护的品牌域名',
      function(value) {
        // 跳过空值（required规则已做非空验证）
        if (!value) return true;
        
        // 提取@后的完整域名部分
        const domainPart = value.split('@')[1];
        if (!domainPart) return false; // 兜底处理异常格式（email规则已拦截，仅作兼容）
        
        // 提取域名主体（第一个.之前的核心部分）
        const domainMain = domainPart.split('.')[0];
        
        // 检查是否命中黑名单，返回false则触发错误提示
        return !blackListedDomains.includes(domainMain);
      }
    ),
});

代码说明 #

• .email()：先确保输入为合法邮箱格式，避免后续处理无效字符串
• .lowercase()：统一转为小写，避免大小写差异导致的匹配遗漏（比如Google和google都会被检测到）
• 自定义test函数：
  1. 跳过空值，非空验证已由required规则完成
  2. 通过split('@')分割邮箱字符串，提取@后的域名部分
  3. 用split('.')分割域名，取第一个片段作为域名主体
  4. 用includes()检查主体是否在黑名单中，返回false时触发预设的错误提示

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