别再放任用户乱填 IP 了！一套前端 IP 与 CIDR 校验的高效方案

在实际开发中，网络地址输入错误往往是隐藏的"定时炸弹"：

用户在表单里输个 192.168.300.1，结果后端直接报错；
运维想加个网段 10.0.0.0/40，系统却崩了；
防火墙、白名单、批量导入......一个错误输入可能拖垮整个配置流程。

👉 这些问题，完全可以在前端就拦截掉！

如果你还没在项目里做 IP / CIDR 校验，这篇文章就是提醒你"该补上这一环了"。

🌐 基础知识：IPv4 与 CIDR

IPv4（本文聚焦 IPv4）

IPv4（Internet Protocol version 4）是目前最常用的 IP 地址格式，由 4 段十进制数 组成（范围 0--255），用点隔开：

✅ 192.168.0.1
✅ 10.0.0.5
❌ 192.168.1.1.（末尾多点）
❌ 256.0.0.1（超出 255）

常见分类：

公网 IP：可在互联网上直接路由
私网 IP ：10.0.0.0/8、172.16.0.0/12、192.168.0.0/16
特殊 IP ：127.0.0.1（回环）、0.0.0.0（任意地址）

CIDR（网段表示法）

CIDR（Classless Inter-Domain Routing，无类域间路由）用来表示 一个 IP 段 ，格式为：
IP/前缀长度

✅ 192.168.0.0/24 → 覆盖 192.168.0.0 到 192.168.0.255 共 256 个地址
✅ 10.0.0.0/8 → 覆盖 10.0.0.0 到 10.255.255.255 共 1600 万个地址
❌ 192.168.1.0/35 → 掩码不可能大于 32

前缀长度范围必须是 0--32，其中：

/24 表示前 24 位是网络号，后 8 位是主机号
/0 表示全网（0.0.0.0/0）

可直接复用的校验正则与函数

IPv4 校验

js 复制代码

const validateIPv4 = (input: string) => {
    const regex = /^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){3}(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$/
    return regex.test(input)
}

👉 精准限制 0--255，不允许末尾多点。

CIDR 校验

ts 复制代码

const validateCIDR = (input: string) => {
  const cidrReg = /^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){3}(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\/([0-9]|[1-2][0-9]|3[0-2])$/
  return cidrReg.test(input)
};

👉 保证前缀长度在 0--32，非法掩码直接判错。

单行判定策略

用户输入可能是 单个 IP 或 一个 CIDR，两者之一合法即可。

ts 复制代码

/**
 * 校验IP和CIDR
 * @param s 字符串
 * @returns 是否是IP或CIDR
 */
const isValidIpOrCidr = (s: string) => {
  const v = s.trim();
  return validateIPv4(v) || validateCIDR(v);
};

批量输入的高可用校验方案

在实际场景里（批量导入、防火墙规则、白名单），往往是多行输入。

我们需要支持：换行、注释、去重、逐行定位错误。

ts 复制代码

/**
 * 批量校验IP和CIDR
 * @param lines 
 * @param allowComments 是否允许注释
 * @param dedupe 是否去重
 * @returns {ok: boolean, errors: string[], items: string[]} 是否校验通过，错误信息，校验通过的IP和CIDR
 */
const validateBatch = (lines: string[], { allowComments = true, dedupe = true } = {}) => {
  let items = lines
    .map(s => s.trim())
    .filter(s => s.length > 0 && (!allowComments || !s.startsWith('#')));

  if (dedupe) {
    const seen = new Set();
    items = items.filter(s => (seen.has(s) ? false : (seen.add(s), true)));
  }

  const errors: any = [];
  items.forEach((raw, idx) => {
    if (!isValidIpOrCidr(raw)) {
      errors.push(`第 ${idx + 1} 行格式不正确: ${raw}`);
    }
  });

  return {
    ok: errors.length === 0,
    errors,
    items,
  };
};

一分钟自测清单

✅ 合法 IP
- 1.2.3.4
- 192.168.0.1
- 255.255.255.255
❌ 不合法 IP
- 192.168.1.1.（末尾点）
- 256.0.0.1（超出范围）
- 00.1.2.3（前导零风险）
✅ 合法 CIDR
- 10.0.0.0/8
- 172.16.0.0/12
- 192.168.1.0/24
- 0.0.0.0/0
❌ 不合法 CIDR
- 192.168.1.0/35（掩码超出 32）
- 192.168.1.0/-1（负数）
- 192.168.1.0/033（前导 0 语义风险）

总结

无论你在做：

API 网关
防火墙规则配置
监控平台
管理系统

只要涉及 IP 或 CIDR 配置 ，前端校验就是必不可少的一环。

通过这套正则与函数，你可以：迅速拦截错误、提升安全性、改善用户体验。