如何在 HTML 和 JavaScript 中正确验证 IPv4 地址

心靈之曲 2026-01-02 00:00:00 次阅读

本文详解如何通过正则匹配与逻辑校验结合的方式，准确验证用户输入的 ipv4 地址（如 `192.168.1.1`），避免仅依赖简单正则导致的误判（如 `999.999.999.999` 通过但实际非法），并提供可直接运行的完整示例代码。

单纯使用正则表达式（如 pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"）只能检查格式是否“像”IP，但无法确保每个八位组（octet）在合法范围内（0–255），也无法排除前导零（如 01.1.1.1 或 000.000.000.000）等无效写法。因此，真正的 IP 验证必须分两步：格式匹配 + 语义校验。

以下是一个健壮、可复用的客户端验证方案：

✅ 正确实现步骤

HTML 结构：使用
包裹输入框，并设置 required 和基础 pattern（作为初步提示）；
JavaScript 校验：监听 input 事件，用正则提取四段数字，再逐段验证：
- 每段必须是 0–255 的整数；
- 允许 0（如 0.0.0.0 是合法 IPv4 地址），但不允许前导零（即 01、007 等非规范写法应被拒绝）；
- 注意：parseInt("01", 10) 会返回 1，因此需额外检查原始字符串是否含前导零（可通过 numStr !== String(Number(numStr)) 判断）。

✅ 推荐代码（含前导零防护）


  Signet/DSC IP Address
  *

const isValidOctet = (str) => {
  // 拒绝空字符串、非数字、或带前导零（除非就是 "0"）
  if (!/^\d+$/.test(str)) return false;
  if (str.length > 1 && str.startsWith('0')) return false; // 排除 "01", "00", "099"
  const num = Number(str);
  return num >= 0 && num <= 255;
};

document.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById('txtSignDSCIPAdd');

  input.addEventListener('input', (e) => {
    const value = e.target.value.trim();
    const match = value.match(/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/);

    e.target.setCustomValidity('');

    if (match) {
      const [_, a, b, c, d] = match;
      const octets = [a, b, c, d];
      const allValid = octets.every(isValidOctet);

      if (!allValid) {
        e.target.setCustomValidity('Invalid IPv4 address: each octet must be 0–255 with no leading zeros.');
      }
    } else if (value !== '') {
      e.target.setCustomValidity('IPv4 format required: four dot-separated numbers (e.g., 127.0.0.1).');
    }
  });

  // 可选：表单提交时强制校验（增强兼容性）
  document.getElementById('ipForm').addEventListener('submit', (e) => {
    if (!input.checkValidity()) {
      e.preventDefault();
      input.reportValidity();
    }
  });
});