如何用Yup.number()限制仅输入0-9数字，禁止e/E/+/-字符？

要实现仅允许用户输入0-9数字、禁止e/E/+/-字符，同时保留Yup.number()的类型验证，可通过自定义transform规则结合基础数字验证来实现，具体方案如下：

代码实现 #

Yup.number()
  .transform(function(value, originalValue) {
    // 处理用户输入的原始字符串
    if (typeof originalValue === 'string') {
      // 检查原始输入是否仅包含0-9数字
      const isOnlyDigits = /^[0-9]*$/.test(originalValue);
      if (!isOnlyDigits) {
        // 若包含非法字符，返回错误触发验证提示
        return this.createError({ message: "请仅输入0-9的数字" });
      }
      // 将合法字符串转为数字，空值返回null
      return originalValue ? Number(originalValue) : null;
    }
    return value;
  })
  .typeError("请输入有效的数字")
  .nullable()
  .notRequired()
  .min(0, "数值不能小于0")
  .max(100, "数值不能大于100")

方案说明 #

1. transform拦截原始输入：通过transform方法获取用户输入的原始字符串（originalValue），直接检查是否仅包含0-9字符，避免JavaScript自动将带e/E/+/-的字符串转为合法数字的问题。
2. 保留number类型验证：在确保输入为纯数字字符串后，转为number类型，继续使用min/max等原生数字验证规则，避免使用string().matches()后无法直接验证数值范围的问题。
3. 错误提示精准：非法字符输入时直接返回自定义错误，同时保留typeError处理其他非数字输入场景。

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