如何用正则实现JS数字输入框的特定小数位校验？

云原生阿岚

2026-8-13

数字输入框特定小数规则的客户端校验方案

正则表达式优化

直接使用以下正则即可同时满足0-99范围、最多两位小数、指定小数取值三个要求：

/^(?:0|[1-9]\d?)(?:\.(?:00|25|33|50?|67|75))?$/

正则规则拆解

^ 与 $：限定匹配整个输入内容，避免部分匹配
(?:0|[1-9]\d?)：整数部分规则
- 0：允许单独输入0
- [1-9]\d?：允许1-99的整数（第一位非0，1或2位数字）
(?:\.(?:00|25|33|50?|67|75))?：小数部分规则（可选，无小数也符合要求）
- \.：匹配小数点
- 00|25|33|67|75：直接匹配允许的两位小数后缀
- 50?：同时匹配.5（一位小数）和.50（两位小数）

客户端校验实现（JavaScript）

以blur事件触发校验为例，结合HTML5表单验证：

<input type="number" id="number-input" placeholder="请输入符合规则的数字">

const input = document.getElementById('number-input');

input.addEventListener('blur', () => {
  const val = input.value.trim();
  const regex = /^(?:0|[1-9]\d?)(?:\.(?:00|25|33|50?|67|75))?$/;
  
  if (!regex.test(val)) {
    input.setCustomValidity('请输入0-99之间的数字，小数部分仅支持.00、.25、.33、.5、.67、.75');
  } else {
    input.setCustomValidity('');
  }
});