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

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

本文介绍如何通过正则表达式结合逻辑校验，在前端准确验证ipv4地址格式与数值范围，避免仅依赖简单替换或不完整正则导致的误判。

在Web表单中，仅用正则限制输入字符（如 /[^0-9.]/g）或仅匹配 d{1,3}\.d{1,3}\.d{1,3}\.d{1,3} 是不够的——前者只是“防误输”，后者无法阻止 999.999.999.999 或 012.168.001.001 这类格式合法但语义非法的IP（如含前导零、超255值）。真正的IPv4验证需同时满足：

✅ 四段十进制数字（0–255）
✅ 每段不含前导零（除非该段就是 "0"）
✅ 段间以英文句点 . 精确分隔
✅ 整体无空格、不可见字符

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

✅ 推荐实现：HTML + JavaScript 组合校验


  Signet/DSC IP Address
  *

const isValidOctet = (str) => {
  // 允许 "0"，但拒绝 "01", "00", "09" 等带前导零的非零数
  if (/^0\d+$/.test(str)) return false;
  const num = Number(str);
  return Number.isInteger(num) && num >= 0 && num <= 255;
};

const isValidIPv4 = (ip) => {
  const parts = ip.trim().split('.');
  return (
    parts.length === 4 &&
    parts.every(part => isValidOctet(part))
  );
};

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

  input.addEventListener('input', (e) => {
    const value = e.target.value;
    e.target.setCustomValidity('');

    if (value && !isValidIPv4(value)) {
      e.target.setCustomValidity('Invalid IPv4 address: each octet must be 0–255, without leading zeros.');
    }
  });

  // 可选：提交时二次校验（增强可靠性）
  document.getElementById('ipForm').addEventListener('submit', (e) => {
    if (!isValidIPv4(input.value)) {
      e.preventDefault();
      input.reportValidity();
    }
  });
});