如何使用Yup校验输入内容为邮箱或用户名？

直接使用 Yup 提供的.test()自定义校验方法即可实现「满足邮箱规则或用户名规则任意一种即可通过」的逻辑，完整代码如下：

// 用户名校验正则
const usernameReg = /^(?=[a-zA-Z0-9._]{5,25}$)[^_.].*[^_.]$/;

const schema = yup.object().shape({
  // 字段名可根据实际需求修改，这里沿用示例中的email字段名
  email: yup.string()
    // 如果该字段是必填项，可开启下面这行
    // .required('账号不能为空')
    .test('account-validate', '请输入正确的邮箱地址或用户名', function(value) {
      // 空值直接返回（非必填场景适用，必填的话上方加.required()会提前拦截）
      if (!value) return true;
      // 先判断是否符合邮箱格式
      const isEmail = yup.string().email().isValidSync(value);
      if (isEmail) return true;
      // 不符合邮箱的话，判断是否符合用户名规则
      return usernameReg.test(value);
    })
});

逻辑说明 #

• 校验会优先判断输入内容是否符合邮箱格式，符合则直接通过
• 邮箱校验不通过时，会自动走用户名正则校验，符合规则也可通过
• 如果需要调整两种校验的优先级，只需要调换邮箱校验和用户名校验的判断顺序即可
• 两者都不符合的话，会抛出第二个参数里的错误提示，可根据需求修改提示文本

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