使用Yup验证非必填number字段时负数及字符串输入无校验报错问题

• 你写的when判断逻辑错误：number类型的值不存在length属性，value?.length > 0的判断结果永远为false，导致校验正数的then分支从未触发，自然不会返回对应错误提示
• 校验逻辑设计冗余，不需要用when监听字段自身来做可选判断，yup原生的非必填+条件校验逻辑就能实现需求

// 先定义你的提示文本变量
const numberMessage = '请输入合法数字';
const numberPositiveMessage = '请输入正数';

const schema = yup.object().shape({
  gpa: yup.number()
    .typeError(numberMessage) // 输入内容无法转成数字时抛出该错误，覆盖输入字符串的场景
    .positive(numberPositiveMessage) // 只要有值就必须为正数
    .notRequired() // 允许字段不存在
    .nullable(true) // 允许值为null
    .transform((value) => isNaN(value) ? undefined : value) // 处理空输入转成undefined，匹配非必填规则
});

• 当字段为空/值为null/值为undefined时，会直接匹配notRequired()+nullable()的规则，校验通过
• 当字段有值时，会先触发typeError校验是否为合法数字，再触发positive校验是否为正数，任一校验不通过就会返回对应错误提示
• 不需要额外加when判断，yup的校验链会自动处理非必填场景下的规则触发逻辑：非必填字段只有在有有效输入值的时候才会执行前面的类型、数值校验规则

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