JavaScript正则实现禁止重复逗号/点号及互斥输入的需求

你需要的输入限制规则总结：

• 禁止输入多个点号（.）或多个逗号（,）
• 输入框中已有.时，不允许再输入.或；已有,`时同理
• 禁止开头直接输入.或,

原来的keypress事件代码可正常工作，但改用正则实现的话，我们可以通过预判输入后的完整值是否符合规则来做验证，或者结合input事件覆盖所有输入场景（包括粘贴、拖拽等）。

方案1：基于keypress事件的正则验证 #

这个方案和原代码逻辑对齐，通过正则判断输入后的内容是否合法：

function validateNumberInput(evt, obj) {
  const char = String.fromCharCode(evt.which || evt.keyCode);
  const currentValue = obj.value;
  // 处理选中内容替换的情况
  const start = obj.selectionStart;
  const end = obj.selectionEnd;
  const newValue = currentValue.substring(0, start) + char + currentValue.substring(end);

  // 核心正则：允许数字开头，最多包含一个.或,，后面可跟任意数字
  const validPattern = /^[0-9]*([.,][0-9]+)?$/;
  
  // 禁止开头直接输入标点
  if (currentValue.length === 0 && (char === '.' || char === ',')) {
    return false;
  }
  
  // 验证新输入后的内容是否符合规则
  return validPattern.test(newValue);
}

对应的HTML：

<INPUT TYPE="TEXT" VALUE="0" onkeypress="return validateNumberInput(event,this)">

方案2：更全面的input事件处理（支持粘贴等场景） #

如果需要处理粘贴、右键菜单输入等keypress覆盖不到的场景，可以用input事件结合正则修正输入内容：

const numberInput = document.querySelector('input[type="text"]');

numberInput.addEventListener('input', function() {
  let inputValue = this.value;
  
  // 第一步：过滤掉所有非数字、非.、非,的字符
  inputValue = inputValue.replace(/[^0-9.,]/g, '');
  
  // 第二步：确保最多只有一种分隔符（.或,）
  const hasDot = inputValue.includes('.');
  const hasComma = inputValue.includes(',');
  if (hasDot && hasComma) {
    // 保留先出现的分隔符，移除另一种
    const firstSepIndex = Math.min(inputValue.indexOf('.'), inputValue.indexOf(','));
    const keepSep = inputValue[firstSepIndex];
    inputValue = inputValue.split('').filter(c => c !== (keepSep === '.' ? ',' : '.')).join('');
  }
  
  // 第三步：禁止分隔符出现在开头或结尾
  if (inputValue.startsWith('.') || inputValue.startsWith(',')) {
    inputValue = inputValue.slice(1);
  }
  if (inputValue.endsWith('.') || inputValue.endsWith(',')) {
    inputValue = inputValue.slice(0, -1);
  }
  
  // 第四步：空值时设置默认0
  if (inputValue === '') {
    inputValue = '0';
  }
  
  this.value = inputValue;
});

对应的HTML可以去掉onkeypress属性，纯事件监听：

<INPUT TYPE="TEXT" VALUE="0">

关于你尝试的正则说明 #

你之前用的/^[0-9]+(?:\.[0-9]+)*$/有两个问题：

1. 只允许.作为分隔符，不支持,
2. (?:\.[0-9]+)*会允许出现多个.（比如1.2.3），不符合你“最多一个分隔符”的要求

上面给出的/^[0-9]*([.,][0-9]+)?$/则完美匹配你的规则：

• [0-9]*：允许开头有0个或多个数字（支持空输入后补0的场景）
• ([.,][0-9]+)?：可选的一个分隔符（.或,）加上至少一个数字，确保分隔符后面有内容，且最多出现一次

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