JavaScript文本框整数输入验证正则表达式求助

Got it，我来帮你搞定这个文本框输入验证的问题！先梳理下你的核心需求：

• 首字符不能是空格，必须是数字
• 两种合法输入：要么单个 0 ≤ 整数 ≤ 500，要么最多100个用单个空格分隔的同范围整数
• 末位可以是空格或数字
• 达到100个整数时要阻止新的输入

一、精准匹配的正则表达式 #

先给你能满足所有规则的正则，再拆解说明：

^(?:(?:0|[1-9]\d{0,2})(?<!50[1-9]|5[1-9]\d|[6-9]\d{2}))(?: (?:0|[1-9]\d{0,2})(?<!50[1-9]|5[1-9]\d|[6-9]\d{2})){0,99}\s?$

正则各部分拆解：

• ^：锚定字符串开头，确保首字符不会是空格
• (?:0|[1-9]\d{0,2})：匹配单个合法整数：
  • 0 直接匹配单个0
  • [1-9]\d{0,2} 匹配1-3位无前置零的正整数（避免012这类不规范的整数）
• (?<!50[1-9]|5[1-9]\d|[6-9]\d{2})：负向后行断言，排除超过500的数字：
  • 排除501-599、600-999的情况，确保所有数字≤500
• (?: (?:...) ){0,99}：匹配0-99个「空格+合法整数」的组合，这样总整数数量控制在1-100个
• \s?$：允许末尾有一个空格或无空格，匹配字符串结尾

二、你之前正则的问题所在 #

• /^\d*$/：仅支持单个整数，完全没考虑多空格分隔的场景，也没限制数字上限500
• /^(?=.*\d)[\d ]+$/：允许开头是空格，也没限制每个数字的范围和整数数量，会出现 123 501这类非法输入
• /^(\s*[0-9]+\s*)+$/：允许开头/结尾有多个空格，同样没限制数字范围和数量上限，不符合你的规则

三、前端输入拦截逻辑（阻止100个整数后继续输入） #

正则只能验证输入是否合法，但要实现「达到100个时阻止输入」，需要结合前端事件监听来做：

<input type="text" id="numberInput" placeholder="请输入单个或多个整数">

<script>
const input = document.getElementById('numberInput');
// 上面的正则表达式
const validRegex = /^(?:(?:0|[1-9]\d{0,2})(?<!50[1-9]|5[1-9]\d|[6-9]\d{2}))(?: (?:0|[1-9]\d{0,2})(?<!50[1-9]|5[1-9]\d|[6-9]\d{2})){0,99}\s?$/;

// 保存上一次合法的输入值
input.previousValidValue = input.value;

input.addEventListener('input', function(e) {
  const currentValue = e.target.value;
  
  // 统计当前已输入的整数数量（去除末尾空格后分割）
  const integerCount = currentValue.trim() ? currentValue.trim().split(/\s+/).length : 0;
  
  // 当已有100个整数时，截断输入，只保留前100个+可选末尾空格
  if (integerCount >= 100) {
    const validIntegers = currentValue.trim().split(/\s+/).slice(0, 100);
    e.target.value = validIntegers.join(' ') + (currentValue.endsWith(' ') ? ' ' : '');
    this.previousValidValue = e.target.value;
    return;
  }
  
  // 验证当前输入是否符合正则，不符合则回退到上一次合法值
  if (!validRegex.test(currentValue)) {
    e.target.value = this.previousValidValue;
    return;
  }
  
  // 更新合法值缓存
  this.previousValidValue = currentValue;
});
</script>

这个逻辑会在用户输入时实时校验：

1. 先统计整数数量，达到100就截断输入
2. 再用正则校验格式，非法输入直接回退到上一次合法状态

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