Yup验证允许输入以0开头的数值，未触发自定义验证提示问题

问题出在Yup的number()方法会自动把带前导零的字符串（比如"02"）解析成数字2，而2在你设置的2-20范围内，所以不会触发验证提示。要拦截这种输入，需要同时检查输入的字符串格式和数值范围，以下是两种可行方案：

方案一：先验证字符串格式，再转数字验证范围 #

通过string()类型先校验输入的格式，确保没有前导零，再转换为数字验证数值范围：

optionYear: Yup.string()
  // 正则匹配1-9开头的1或2位数字，排除前导零
  .matches(/^[1-9]\d?$/, 'Enter between 2 to 20 years')
  // 将字符串转换为数字
  .transform(val => val ? parseInt(val, 10) : null)
  // 验证数值范围
  .test('year-range', 'Enter between 2 to 20 years', val => {
    return val >= 2 && val <= 20;
  })

方案二：在number验证中添加自定义前导零检查 #

保留number()类型，通过test方法获取原始输入的字符串值，检查是否存在前导零：

optionYear: Yup.number()
  .min(2, 'Enter between 2 to 20 years')
  .max(20, 'Enter between 2 to 20 years')
  .test('no-leading-zero', 'Enter between 2 to 20 years', function(value) {
    // 获取表单中的原始输入值（未被Yup转换的字符串）
    const rawInput = this.parent.optionYear;
    // 如果原始输入是长度大于1的字符串且以0开头，返回验证失败
    if (typeof rawInput === 'string' && rawInput.length > 1 && rawInput.startsWith('0')) {
      return false;
    }
    return true;
  })

两种方案都能拦截"02"这类带前导零的输入，触发你设置的验证提示。

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