使用Yup进行数字校验时输入以0开头的值无法触发错误如何解决

问题原因 #

你当前使用Yup.number()做校验时，JS会自动将输入的01这类带前导零的字符串隐式转换为数字1，刚好满足min(1)的校验规则，所以不会触发错误提示。

解决方案 #

调整校验逻辑，先将字段作为字符串校验格式，排除前导零的情况后再做数值范围校验：

支持小数的校验规则（英文提示）

export const validationSchemaWithdraw = Yup.object().shape({
  amount: Yup.string()
    .required('The amount is required')
    // 正则校验：排除前导零，仅允许合法的数字格式
    .matches(/^(0|[1-9]\d*)(\.\d+)?$/, 'Amount cannot start with 0')
    // 校验数值最小为1
    .test('min-amount', 'The minimum amount is one', (value) => {
      const num = parseFloat(value);
      return !isNaN(num) && num >= 1;
    })
    // 校验格式为合法数字
    .test('valid-number', 'The amount invalid', (value) => {
      return !isNaN(parseFloat(value)) && isFinite(value);
    })
});

仅支持整数的简化规则（中文提示）

如果你的金额字段只允许整数，且需要中文报错，可以直接用正则同时覆盖前导零和数值范围校验：

export const validationSchemaWithdraw = Yup.object().shape({
  amount: Yup.string()
    .required('金额不能为空')
    .matches(/^[1-9]\d*$/, '金额必须为正整数，且不能以0开头')
});

内容的提问来源于stack exchange，提问作者Huy Hoang Nguyen