React使用Yup校验表单时如何配置显示条件不满足的错误提示

• 清空输入后不显示no input提示的核心原因有两个：
  1. 校验链顺序错误：你把.default(5)放在了.required()之前，当输入为空时yup会先填充默认值5，后续required校验拿到的是有效值，自然不会触发空值报错。
  2. 输入框清空后返回的是空字符串''，yup的number()类型默认会把空字符串转为NaN，不会识别为空值，导致required规则无法命中。
• 区间不匹配的错误提示，直接作为.min()、.max()方法的第二个参数传入即可，对应规则校验失败时就会展示你配置的文案。

const schema = yup.object({
  myInput: yup
    .number()
    // 处理空字符串转换，让required能正确识别空输入
    .transform((value, originalValue) => {
      if (originalValue === '' || originalValue === null) return undefined;
      return value;
    })
    // 空值校验放在最前面，优先拦截无输入场景
    .required('no input')
    // 可选：输入非数字内容时的提示
    .typeError('请输入有效数字')
    // 范围校验直接传第二个参数作为错误提示
    .min(1, '输入值不能小于1')
    .max(10, '输入值不能大于10')
    // 默认值放在所有校验规则之后，仅在初始化/无手动输入时生效
    .default(5),
  // 其余字段配置...
});

• yup的校验规则严格按照链式调用的顺序执行，空值拦截、格式合法性校验要放在范围校验、默认值配置之前，避免逻辑被提前覆盖。
• 如果你搭配react-hook-form、formik等表单库使用，部分库会内置空字符串转undefined的逻辑，但手动添加transform可以保证所有场景下校验逻辑符合预期。

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