如何让Yup在邮箱为空时仅返回必填错误而非格式错误

云原生阿岚

2026-8-15

解决Yup邮箱字段空值时多错误提示的问题

你的问题出在验证顺序和触发条件上：当前先执行格式匹配验证，再执行必填验证，且abortEarly: false会让所有验证规则跑完，导致空邮箱同时触发格式错误和必填错误。要实现“空值只提示必填，非空才检查格式”，可以通过条件验证让格式规则仅在邮箱非空时生效。

修改后的代码如下：

let obj = { tradingName: "", phone: "", email: "", address: "" };

let schema = Yup.object({
  tradingName: Yup.string().required("Trading Name is required"),
  phone: Yup.string().required("phone is required"),
  email: Yup.string()
    .required("Email is Required")
    // 仅当邮箱非空时，才执行格式验证
    .when('email', {
      is: val => val.trim() !== '', // 排除空字符串和纯空格的情况
      then: schema => schema.matches(
        /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
        "Invalid email address"
      )
    }),
  address: Yup.string().required("address is required")
});

schema
  .validate(obj, { abortEarly: false })
  .catch((err) => console.log(err.errors));

或者也可以用test方法自定义验证逻辑，效果一致：

email: Yup.string()
  .required("Email is Required")
  .test(
    'valid-email',
    'Invalid email address',
    function(value) {
      // 空值直接通过，交给required规则处理
      if (!value || value.trim() === '') return true;
      const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
      return regex.test(value);
    }
  )

调整后效果：