如何使用Javascript限制输入文本框的数字位数（整数2-3位，小数2-3位）

方案说明 #

下面提供实时输入限制和提交验证两种方案，确保输入内容符合「2-3位整数，可跟随2-3位小数」的要求（例如：12.56、12.567、412.34、412.344）。

1. 实时输入限制（边输入边规范格式） #

通过监听输入框的input事件，实时过滤无效字符、截断超出长度的内容：

HTML 结构

<input type="text" id="numberInput" placeholder="例：12.56 / 412.344">

JavaScript 代码

const input = document.getElementById('numberInput');

input.addEventListener('input', function(e) {
  let value = e.target.value;
  
  // 1. 移除所有非数字、非小数点的字符
  value = value.replace(/[^\d.]/g, '');
  
  // 2. 只保留第一个小数点
  const dotPos = value.indexOf('.');
  if (dotPos !== -1) {
    value = value.slice(0, dotPos + 1) + value.slice(dotPos + 1).replace(/\./g, '');
  }
  
  // 3. 拆分整数和小数部分
  const [integerPart, decimalPart = ''] = value.split('.');
  
  // 4. 规范整数部分：2-3位，移除前导0
  let processedInteger = integerPart.replace(/^0+/, '');
  if (processedInteger.length > 3) {
    processedInteger = processedInteger.slice(0, 3);
  }
  // 若移除前导0后为空，清空整数部分（避免出现00、01这类无效格式）
  processedInteger = processedInteger === '' ? '' : processedInteger;
  
  // 5. 规范小数部分：最多3位
  const processedDecimal = decimalPart.slice(0, 3);
  
  // 6. 重新拼接并更新输入框值
  let finalValue = processedInteger;
  if (processedDecimal.length > 0) {
    finalValue += '.' + processedDecimal;
  }
  
  e.target.value = finalValue;
});

2. 提交时验证（确保最终输入完全符合规则） #

使用正则表达式严格校验输入内容，适合表单提交前的最终验证：

验证函数

function isValidNumber(value) {
  // 正则规则：2-3位非前导0整数，可选2-3位小数
  const regex = /^[1-9]\d{1,2}(\.\d{2,3})?$/;
  return regex.test(value);
}

// 使用示例
// if (!isValidNumber(input.value)) {
//   alert('输入格式错误，请输入2-3位整数，可选2-3位小数');
// }

正则规则解释

• ^[1-9]：整数部分第一位不能为0
• \d{1,2}：整数部分后续跟1-2位数字，确保总长度为2-3位
• (\.\d{2,3})?：可选的小数部分，小数点后必须是2-3位数字
• $：匹配字符串结尾，避免多余字符

注意事项 #

• 实时限制仅做初步规范，提交前务必用正则验证（防止用户粘贴不符合规则的内容）
• 若允许整数部分以0开头（如01.23），可将正则改为^\d{2,3}(\.\d{2,3})?$，但通常这类格式不符合数字规范，不推荐使用

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