如何在Yup Schema中实现邮箱禁用域名校验？

完全没问题！你可以利用Yup的.test()方法来添加自定义校验规则，把域名禁用检查直接整合到你的Schema里，这样所有校验逻辑都能统一管理，不用在提交时单独写判断啦。

具体实现步骤 #

1. 先准备好你的禁用域名列表
2. 在email字段的校验链中添加.test()方法，实现自定义校验逻辑

完整代码示例 #

// 替换成你的禁用域名列表
const forbidDomains = ["baddomain.com", "anotherbaddomain.net"];

const Schema = Yup.object().shape({
  email: Yup.string()
    .email("non valid email format")
    .required("Email required")
    .test(
      // 自定义校验的唯一标识（可选，但便于调试和引用）
      "forbid-restricted-domains",
      // 动态生成错误提示，这里会显示被禁用的域名
      (value) => `Domain ${value.split("@")[1]} is not allowed`,
      // 核心校验逻辑
      (value) => {
        // 如果邮箱为空，前面的required校验已经会拦截，这里直接返回true跳过该校验
        if (!value) return true;
        
        // 提取邮箱域名
        const [, domain] = value.split("@");
        // 校验域名是否不在禁用列表中
        return !forbidDomains.includes(domain);
      }
    ),
  // 其他表单字段的校验规则...
});

关键细节说明 #

• .test()方法接受三个参数：
  1. 第一个是校验的唯一名称，方便后续排查问题
  2. 第二个是错误提示，可以是字符串或者返回字符串的函数，支持动态插入当前校验值的信息
  3. 第三个是校验逻辑函数，返回true代表校验通过，false代表校验失败
• 因为前面已经有.email()校验，所以可以确保邮箱格式正确，split("@")一定会得到两个元素，不过如果想更严谨，也可以加个判断：return domain && !forbidDomains.includes(domain);

整合后的优势 #

这样修改后，你不用再在提交时单独写域名判断逻辑了——当你调用Schema.validate(data)或者使用Formik等表单库时，Yup会自动执行所有校验规则，包括这个自定义的域名禁用检查，错误信息也会和其他校验错误统一返回，方便你统一处理错误提示（不管是显示在输入框下方还是弹出弹窗）。

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