输入框数值限制问题：已实现3位小数限制，整数部分未锁定100

我懂你现在的困扰——已经搞定了小数点后保留3位，但整数部分还能随便敲出像1111111111这种超大数字，确实闹心。下面我给你几种实用的实现方案，你可以根据自己的代码场景来选：

方案1：实时输入校验（体验最优） #

这种方式能在用户输入过程中就实时修正内容，不让非法值出现，体验最好。核心思路是每次输入后过滤、处理数值，确保它在0-100.000范围内。

const input = document.getElementById('your-input-id');

input.addEventListener('input', function(e) {
  // 先过滤掉非数字和非小数点的字符
  let value = e.target.value.replace(/[^0-9.]/g, '');
  
  // 处理多个小数点：只保留第一个
  const dotPos = value.indexOf('.');
  if (dotPos !== -1) {
    value = value.slice(0, dotPos + 1) + value.slice(dotPos + 1).replace(/\./g, '');
  }
  
  // 限制小数部分最多3位
  if (dotPos !== -1) {
    value = value.slice(0, dotPos + 4);
  }
  
  // 拆分整数和小数部分，限制整数不超过100
  const [integerPart, decimalPart] = value.split('.');
  let processedInteger = integerPart || '0';
  
  if (parseInt(processedInteger) > 100) {
    processedInteger = '100';
  }
  
  // 重新组合数值
  let finalValue = processedInteger;
  if (decimalPart) {
    finalValue += '.' + decimalPart.slice(0, 3);
  }
  
  // 处理0开头的多位数（比如012自动转成12）
  if (finalValue.startsWith('0') && finalValue.length > 1 && finalValue[1] !== '.') {
    finalValue = finalValue.replace(/^0+/, '') || '0';
  }
  
  // 最后兜底：确保不超过100.000
  if (parseFloat(finalValue) > 100) {
    finalValue = '100.000';
  }
  
  e.target.value = finalValue;
});

方案2：HTML属性配合失焦校验（代码最简） #

如果你用的是type="number"的输入框，可以先用HTML属性做基础限制，再配合失焦时的校验来修正值。优点是代码少，缺点是输入过程中不会实时拦截非法值。

<input type="number" id="your-input-id" min="0" max="100" step="0.001">

再加上失焦校验：

const input = document.getElementById('your-input-id');

input.addEventListener('blur', function(e) {
  const value = parseFloat(e.target.value);
  if (value > 100) {
    e.target.value = '100.000';
  } else if (isNaN(value)) {
    e.target.value = '0.000'; // 也可以设为空，看你需求
  }
});

方案3：正则拦截非法输入（精准控制） #

这种方式在用户按下按键或粘贴内容时，直接拦截不符合规则的输入，能从源头阻止非法值。需要考虑的边界情况多一点，但控制更精准。

const input = document.getElementById('your-input-id');

// 处理键盘输入
input.addEventListener('keydown', function(e) {
  const key = e.key;
  const currentValue = e.target.value;
  
  // 允许退格、删除、箭头键等控制键
  if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
  
  // 只允许数字和小数点
  if (!/[0-9.]/.test(key)) {
    e.preventDefault();
    return;
  }
  
  // 处理小数点：只能有一个，且整数是100时不能加小数点
  if (key === '.') {
    if (currentValue.includes('.') || currentValue === '100') {
      e.preventDefault();
      return;
    }
  } else {
    // 处理数字输入：整数部分不能超过100，小数部分最多3位
    const [integerPart, decimalPart] = currentValue.split('.');
    if (integerPart === '100' || (decimalPart && decimalPart.length >=3)) {
      e.preventDefault();
      return;
    }
    // 比如已经输入10，再输1就变成101，直接拦截
    if (integerPart && integerPart.length >=2 && parseInt(integerPart + key) >100) {
      e.preventDefault();
      return;
    }
  }
});

// 处理粘贴
input.addEventListener('paste', function(e) {
  const pastedText = e.clipboardData.getData('text');
  // 正则匹配0-100.000之间的数值
  const validRegex = /^(\d{1,2}|100)(\.\d{1,3})?$/;
  if (!validRegex.test(pastedText)) {
    e.preventDefault();
    alert('请粘贴0-100.000之间的合法数值');
  }
});

重要提醒 #

不管用哪种方案，后端一定要再做一次校验，前端的限制很容易被绕过，后端校验才是最后一道防线。

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