ReactJS如何限制数字输入整数位最多2位、小数位最多7位？

问题根因 #

你当前的校验逻辑存在两个核心问题：

1. 两段校验用的正则都没有限制整数部分的长度，只要是数字格式就会通过，自然无法拦截100及以上的3位整数
2. 第二个正则允许了负号匹配（[+-]?），存在逻辑冲突，且两段校验规则重复冗余，反而容易引发逻辑错误

修正方案 #

直接替换原有save方法的校验逻辑即可，代码如下：

save = async () => {
  // 先处理必填校验
  if (!this.state.number) {
    this.setState({alert: true});
    return;
  }
  // 统一校验规则：非负、整数最多2位、小数最多7位
  const validReg = /^[+]?(?:[1-9]\d?|0)?(?:\.\d{1,7})?$/;
  if (!validReg.test(this.state.number)) {
    this.setState({alert: true});
    return;
  }
  // 校验通过后执行你的后续保存业务逻辑
  // ...
};

规则说明 #

上述正则的匹配逻辑完全对齐你的需求：

• ^[+]?：开头可选正号，兼容部分用户习惯输入+号的场景，不需要的话可以直接删掉这部分
• (?:[1-9]\d?|0)?：整数部分限制为0~99，同时支持省略整数的小数写法（如.123），如果不允许小数点开头的输入，删掉这部分末尾的?即可
• (?:\.\d{1,7})?$：小数部分最多保留7位，超出直接判定非法

✅ 合法输入示例：0、12、99.1234567、.456、+23.1
❌ 非法输入示例：100、-12、12.12345678、含非数字字符的内容

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