本文详解如何通过正则匹配与逻辑校验结合的方式，准确验证用户输入的 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 结构：使用 <form> 包裹输入框，并设置 required 和基础 pattern（作为初步提示）；
-
JavaScript 校验：监听 input 事件，用正则提取四段数字，再逐段验证：
- 每段必须是 0–255 的整数；
- 允许 0（如 0.0.0.0 是合法 IPv4 地址），但不允许前导零（即 01、007 等非规范写法应被拒绝）；
- 注意：parseInt("01", 10) 会返回 1，因此需额外检查原始字符串是否含前导零（可通过 numStr !== String(Number(numStr)) 判断）。
✅ 推荐代码（含前导零防护）
<form id="ipForm">
<label for="txtSignDSCIPAdd">Signet/DSC IP Address</label>
<span class="mandatory" style="color: red;">*</span>
<input
type="text"
class="form-control"
id="txtSignDSCIPAdd"
required
pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
title="Enter a valid IPv4 address (e.g., 192.168.1.1)"
/>
<button type="submit">Submit</button>
</form>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();
}
});
});⚠️ 注意事项
- ❌ 不要仅用 replace(/[^0-9.]/g, '') 这类过滤逻辑替代验证——它不阻止 .... 或 192.168.1.256；
- ❌ pattern 属性仅用于基础提示，不可信，浏览器可能忽略或绕过，必须配合 JS 逻辑校验；
- ✅ 使用 setCustomValidity() + reportValidity() 可触发原生 HTML5 表单验证 UI，体验更统一；
- ✅ 若需支持 IPv6，请改用专门库（如 is-ip）或更复杂正则，本文聚焦标准 IPv4。
通过以上方法，你将获得一个既符合标准、又具备良好用户体验的 IPv4 输入验证方案。
