ReactJS中number输入框validity.valid不识别浮点数，求替代验证方案

方案一：修正type="number"的默认配置 #

• 问题根源：默认情况下<input type="number">的step属性值为1，浏览器会默认只允许整数输入，这就导致输入浮点数时event.target.validity.valid返回false。
• 解决方法：给输入框添加step="any"属性，允许任意精度的浮点数：

  <input type="number" step="any" onBlur={handleBlur} />
  

• 验证逻辑无需修改：在onBlur事件中依然可以用event.target.validity.valid判断，此时浏览器会正确识别合法的浮点数（包括正负数、带小数点的数值）。

方案二：自定义正则验证（无光标跳转问题） #

如果不想依赖浏览器的默认验证逻辑，可以只在onBlur阶段做正则校验，完全避开onChange阶段的输入修改，自然不会出现光标跳转问题：

• 浮点数校验正则：基础版用/^-?\d+(\.\d+)?$/，支持正负整数、正负浮点数；如果需要限制小数位数（比如最多两位），可以改成/^-?\d+(\.\d{1,2})?$/。
• 实现逻辑：
  1. 提前存储该字段的原始有效值（存在组件状态或表格数据源中即可）。
  2. 失焦时获取输入框当前值，用正则校验：

     const handleBlur = (e, originalValue) => {
       const inputValue = e.target.value.trim();
       const floatRegex = /^-?\d+(\.\d+)?$/;
       if (floatRegex.test(inputValue)) {
         // 验证通过，更新表格视图数据
         updateTableData(inputValue);
       } else {
         // 验证不通过，恢复原始值
         e.target.value = originalValue;
       }
     };
     

  3. 因为是在失焦后处理修改，完全不会影响用户输入时的光标位置，符合你只在onBlur处理的需求。

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