JavaScript实现1-99范围数字输入验证 禁止前导0

现有代码的核心问题 #

• 原生type="number"输入框的min/max属性仅在表单提交时触发校验，输入过程中不会拦截违规内容
• 原生number输入框无法阻止用户输入开头为0的内容，同时还会允许输入e、+、-、小数点这类非预期字符，覆盖不了需求的校验规则

可直接落地的修改逻辑 #

在onChange回调中加源头拦截，用户输入的瞬间就过滤掉不合规内容，不需要等输入完成再做弹窗提醒：

• 剔除输入内容里所有非数字字符，从根源拦截杂项输入
• 自动移除内容开头的所有0，满足“禁止0作为起始字符”的要求
• 截断内容最多保留2位，保证输入值最大不超过99，覆盖1-99的范围要求

修改后的完整代码 #

<input
  max='99'
  min='1'
  type='text'
  inputMode="numeric"
  placeholder='Enter Approved Discount'
  className='textInput'
  onChange={(e) => {
    let inputVal = e.target.value;
    // 过滤所有非数字字符
    inputVal = inputVal.replace(/\D/g, '');
    // 删除开头所有的0
    inputVal = inputVal.replace(/^0+/, '');
    // 最多保留2位内容，实现99封顶
    inputVal = inputVal.slice(0, 2);
    // 将校验后的有效值传入业务逻辑
    finalPriceFunc(inputVal, paymentPlan);
    setCondition({ ...checkCondition, showFinalPrice: true });
  }}
/>

说明：将原生type="number"替换为type="text"搭配inputMode="numeric"属性，既可以避开number输入框的各类异常特性，移动端唤起的依然是纯数字键盘，交互体验和原生number输入框没有区别。

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