HTML/JavaScript中IP地址验证功能失效问题求助

原代码的问题在于：

• 第二个正则/(\..*?)\..*/g会强制只保留第一个点，导致无法输入IP地址所需的3个分隔点
• 没有限制每段数字的合法范围（0-255），也没处理前导零的问题

修复后的实时输入处理代码 #

<label for="txtSignDSCIPAdd">Signet/DSC IP Address</label>
<span class="mandatory" style="color: red;">*</span>
<input type="text" class="form-control" id="txtSignDSCIPAdd" 
  oninput="
    // 仅保留数字和点
    this.value = this.value.replace(/[^0-9.]/g, '');
    // 限制最多3个点，移除连续点和开头的点
    this.value = this.value.replace(/(\.*)\./g, '$1').replace(/^(\.*)/, '');
    while (this.value.split('.').length > 4) {
      this.value = this.value.replace(/\.[^.]*$/, '');
    }
    // 处理每段数字：限制0-255，去除前导零
    this.value = this.value.split('.').map(segment => {
      segment = segment.replace(/^0+(?=\d)/, '');
      if (parseInt(segment) > 255) {
        segment = '255';
      }
      return segment === '' ? '' : segment;
    }).join('.');
  " />

关键处理逻辑说明 #

• 第一步过滤非数字和点的字符，确保输入仅包含合法字符
• 第二步限制点的数量最多3个，同时清理无效的连续点、开头点
• 拆分每段数字后，自动去除无意义的前导零（单个0保留），并强制每段数值不超过255
• 最后将处理后的分段重新拼接为合法格式的字符串

补充提交时的严格验证 #

如果需要确保最终输入是完全合法的IP地址，可以在提交时添加如下校验函数：

function isValidIP(ip) {
  const segments = ip.split('.');
  if (segments.length !== 4) return false;
  return segments.every(segment => {
    const num = parseInt(segment);
    return !isNaN(num) && num >= 0 && num <= 255 && segment === num.toString();
  });
}

// 使用示例：
const ipInput = document.getElementById('txtSignDSCIPAdd');
if (!isValidIP(ipInput.value)) {
  alert('请输入合法的IP地址');
  // 此处添加阻止提交的逻辑
}

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