html pattern 无法严格校验 ipv4（如放行 192.168.01.1）且不支持 ipv6，因其仅做字符串匹配、无数值范围与前导零校验，也不支持条件分支；必须结合 javascript 实现分步验证。
直接用 pattern 属性做 HTML 原生校验，只能覆盖 IPv4 且不严格——它不拒绝 192.168.01.1 这类带前导零的非法格式，也不支持 IPv6。
HTML pattern 校验 IPv4 的实际效果
浏览器原生 pattern 是基于 RegExp 的子集（不支持 lookaround、非捕获组等），且验证发生在提交时，无法实时拦截。常见写法如：pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"，但它会错误接受 999.999.999.999 或 012.034.056.078。
- 必须配合
title提示用户合法范围，但提示不阻止提交 - 无法校验每段 ≤255，
\d{1,3}只保证位数，不控制数值 - 移动端软键盘可能因 pattern 触发数字键盘，但校验逻辑仍松散
为什么不能只靠 HTML pattern 区分 IPv4 和 IPv6
pattern 不支持条件分支或“先试 IPv4、不匹配再试 IPv6”的逻辑。你无法在一个 pattern 里同时容纳 IPv4 点分十进制和 IPv6 冒号十六进制结构，更别说处理 ::ffff:192.0.2.1 这类嵌入格式。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- IPv6 含
:、a–f、A–F、可选%zone，与 IPv4 字符集重叠度低，硬塞进单条 pattern 易冲突 - 浏览器对长 pattern 兼容性差，部分旧版 Safari 会静默忽略超长正则
- 没有否定逻辑（如排除前导零），
pattern本质是“匹配即通过”，而非“匹配且满足业务约束”
真正可用的混合校验方案
HTML 层只做基础格式兜底（比如非空、无空格），把核心校验交给 JS —— 这才是生产环境通用做法。
- HTML 中保留
input type="text"，去掉pattern，避免误导性“已校验”感 - JS 里用两个独立正则：先
/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/.test(ip)判 IPv4 - 不匹配时，再用更宽松的 IPv6 正则（如匹配
::1、2001:db8::、fe80::1%eth0）测试 - 若需支持 CIDR（如
192.168.1.0/24），在 IPv4/IPv6 分流后，额外检查/\/(\d{1,2}|1[0-9]{2}|2[0-9]{2}|3[0-2])$/或/\/(1[0-9]{2}|2[0-9]{2}|3[0-9]{2}|4[0-9]{2}|5[0-9]{2}|6[0-4][0-9]|65[0-5])$/
最易被忽略的一点：地址字符串前后常含不可见空白（尤其是粘贴输入），所有正则前必须 .trim()；另外，IPv6 的区域标识符（如 %en0）虽合法，但在某些网络栈中会被截断，是否允许应由业务定，不能无条件放行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
