react-hook-form结合yup时手机号空提交显示类型错误而非必填错误

问题根因 #

yup对number类型字段的校验优先级为先做类型校验，再执行必填规则校验：
你表单中的手机号输入框是type="text"，留空时提交的原始值是空字符串''，yup尝试将空字符串转为数字会得到NaN，直接触发typeError报错，根本不会走到后续required规则的校验逻辑。

解决方案 #

提供两种可行方案，按需选择：

方案1：转换空值为undefined，适配number类型校验 #

给phoneNumber规则添加transform钩子，空串输入时转成undefined，即可触发required校验：

const schema = yup.object().shape({
  name: yup.string().required("Field is required*"),
  email: yup.string().email().required("Field is required*"),
  phoneNumber: yup
    .number()
    // 新增transform逻辑
    .transform((value, originalValue) => originalValue === '' ? undefined : value)
    .required("Field is required*")
    .typeError("Value must be a number*"),
  message: yup.string().required("Please provide your message*")
});

方案2：改用string类型校验手机号（更推荐） #

手机号本质是字符串序列（可能存在前导零、国家码前缀等场景，存为number会丢失信息或出现精度问题），直接用string类型加正则校验更合理：

const schema = yup.object().shape({
  name: yup.string().required("Field is required*"),
  email: yup.string().email().required("Field is required*"),
  phoneNumber: yup
    .string()
    .required("Field is required*")
    .matches(/^[0-9]+$/, "Value must be a number*"),
  message: yup.string().required("Please provide your message*")
});

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