纯html的pattern无法真正校验ipv4数值范围，因其仅在submit时触发、不拒前导零、不触发数字键盘；需用oninput实时修正段值、清理非数、限制0-255、去除前导零并同步光标位置。
纯 HTML 无法真正校验 IPv4 地址的数值范围（比如 256.1.1.1 或 012.168.001.001），pattern 只能拦住明显格式错误，不能替代 JavaScript 的语义校验。
为什么 pattern="^((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$" 不够用
这个正则看似严密，但实际有三个硬伤：
- 它只在表单
submit时触发，用户粘贴999.999.999.999或输入过程中不会拦截 - 它不拒绝前导零（
01.1.1.1被认为合法，但 RFC 无此写法，多数后端/设备会拒收） - 移动端软键盘不会因该
pattern自动切数字键盘，inputmode="numeric"必须显式加
oninput 里怎么实时过滤和修正 IP 段
关键不是“阻止输入”，而是“自动修正 + 光标保护”。监听 input 事件，对每一段做三件事：
- 用
.split(/\./g)切出四段，逐段处理；超出 4 段的直接截断（如用户粘贴了 5 段） - 对每段：先
.replace(/[^0-9]/g, '')清除非数字字符；再转成数字，若 > 255 → 设为255；若为空字符串 → 设为0 - 检查原始段是否含前导零（
segment !== String(Number(segment)) && segment.length > 1），是则重置为Number(segment) - 拼回新值后，手动保存光标位置（用
selectionStart/selectionEnd），否则用户编辑中间段时光标会跳到末尾
移动端 inputmode 和 pattern 怎么配才有效
想让 iOS/Android 软键盘弹出数字盘，必须同时满足：
-
inputmode="numeric"—— 这是触发条件，type="number"反而会带来小数点和负号干扰 -
pattern="[0-9.]*"—— 告诉浏览器“只允许数字和点”，否则inputmode在部分 Android 上失效 - 不要加
type="tel"或type="number"，它们会引入额外校验逻辑，和 IP 格式冲突 -
autocomplete="off"加上，防止浏览器自动填充带空格或括号的乱码地址
最易被忽略的是光标管理——没做光标位置同步的 IP 输入框，在用户修改中间某一段时会强制跳到末尾，体验直接降级。数值修正和前导零清理可以靠 JS 完成，但光标得自己算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
