React中如何正确配置Yup/Formik数字验证？禁止输入字母e

问题原因 #

JavaScript的Number类型原生支持科学计数法（例如12e3会被解析为12000），所以Yup的number()验证器默认会将包含"e"或"E"的字符串判定为合法数字，这就是你能输入"e"的原因。

解决方案 #

1. 自定义Yup验证规则

放弃直接用number()的默认逻辑，先通过字符串验证确保输入是纯数字，再转换为数字做范围校验：

number: Yup.string()
  .required("Required")
  .matches(/^\d+$/, "只能输入纯数字")
  .transform((val) => val ? Number(val) : null)
  .test("range-validation", "数字需在0到100000000之间", (value) => {
    return value !== null && value >= 0 && value <= 100000000;
  })

• matches(/^\d+$/)确保输入只能是0-9的数字字符
• transform将合法的字符串转为数字
• 最后用test验证数字范围

如果想保留number()的基础验证，也可以追加自定义test来排除科学计数法：

number: Yup.number()
  .required("Required")
  .max(100000000, "To big")
  .min(0, "Not negative number")
  .test("no-scientific", "只能输入纯数字", function(value) {
    // 获取输入框的原始值（需根据你的表单字段名调整）
    const rawInput = this.parent.number;
    return !/[eE]/.test(rawInput);
  })

2. 输入框层面拦截非法输入

从源头阻止用户输入非数字字符，给输入框添加onInput事件：

<input 
  type="text" 
  onInput="this.value = this.value.replace(/[^0-9]/g, '')"
/>

这样用户输入"e"、字母或其他非数字字符时，会被直接过滤掉，提升用户体验。

最佳实践 #

建议同时使用以上两种方法：输入框拦截做前端即时反馈，Yup验证做提交前的兜底校验，确保数据完全符合要求。

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