如何用正则配置Yup邮箱校验规则实现自定义错误提示

原有正则失效原因 #

你之前写的两个正则存在核心逻辑错误，无法命中预期校验场景：

• \@*语义是匹配0个或多个连续的@字符，完全不是「匹配@字符之后的内容」的逻辑，无法实现「某字符后接指定字符」的判断
• 负向预查规则没有加全串扫描的通配符，仅能校验字符串开头的内容，无法覆盖整个邮箱字符串的场景

分场景校验实现 #

两个校验规则分开配置，可返回独立的自定义错误提示：

规则1：必须存在@后接.的结构 #

拦截无@、有@但@后无.的非法邮箱，覆盖无效示例：abc@gmailcom、def.com
对应Yup代码：

yup.string()
  // 先调用内置email做基础格式校验
  .email('请输入合法邮箱格式')
  // 校验@后必须存在.
  .matches(/@[^@]*\./, '邮箱无效：@符号后必须包含.字符')

正则逻辑说明：@匹配@字符本身，[^@]*匹配@之后所有非@字符（规避多@的异常场景），\.匹配.字符，只要字符串能匹配到该规则，就说明存在合法的@后接.结构。

规则2：禁止@后出现逗号 #

拦截@和域名段的.之间出现逗号的非法邮箱，覆盖无效示例：abc@gmail,com
在上述代码基础上追加校验规则即可：

yup.string()
  .email('请输入合法邮箱格式')
  .matches(/@[^@]*\./, '邮箱无效：@符号后必须包含.字符')
  // 校验@后到.之前不能出现逗号
  .matches(/@[^@,]+\./, '邮箱无效：@符号后不允许出现逗号')

正则逻辑说明：@[^@,]+\.匹配@之后、.之前的所有字符，要求这段内容里不能出现@和逗号，只要匹配到该规则，就说明@和.之间没有逗号。

合并简化写法（可选） #

如果不需要拆分错误提示，也可以把两个规则合并为一个正则，减少校验次数：

yup.string()
  .email('请输入合法邮箱格式')
  .matches(/^[^@]+@[^@,]+\.[^@]+$/, '邮箱格式错误')

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