使用Yup为input type=number添加两类验证错误遇异常求助

问题出在<input type="number">的特性上：当输入框为空时，它的取值是空字符串''，而非undefined或null。Yup的number()校验器会把空字符串判定为非数字类型，因此会优先触发typeError，完全不会走到required校验逻辑。

两种修复方案 #

方案一：用transform转换空字符串 #

在number()校验后添加transform方法，把空字符串转为undefined，让required规则能识别到“未输入”状态：

yup.object().shape({
  fieldName: yup.number()
    .transform((value) => (value === '' ? undefined : value))
    .typeError("only numbers allowed")
    .required("value is required")
    .min(0)
})

方案二：先校验字符串格式再转数字 #

先通过string()层面校验必填项，再验证是否可转为数字，最后转成数字类型做最小值校验，逻辑更直观：

yup.object().shape({
  fieldName: yup.string()
    .required("value is required")
    .trim()
    .test('is-number', 'only numbers allowed', (value) => !isNaN(Number(value)))
    .transform((value) => Number(value))
    .min(0, "value must be at least 0")
})

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