pattern仅在提交时校验，不拦截输入；正确用法需type="text"+inputmode="numeric"+oninput实时过滤，且必须配required和title。
pattern 不拦输入，只管提交——它不是过滤器，是守门员。想实时阻止字母、粘贴乱码或小数点，光靠 pattern 一定失败。
为什么 pattern="[0-9]+" 挡不住 "abc123"？
浏览器只在调用 checkValidity() 或点击 type="submit" 时才校验；输入过程完全放行。用户可以：
- 粘贴含字母的字符串
- 切换中文输入法打“一二三”
- 手动改 DOM：input.value = "hello42"
这些操作 pattern 全部无视。
常见误判现象：
- 写了 pattern="[0-9]{6}" 却能输 “123abc”，不报错 → 因为还没提交
- 提交后提示 “请与所要求的格式匹配” → 没加 title 属性，浏览器用默认文案
- 在 type="number" 上写 pattern → 完全无效，该类型会忽略 pattern
真正有效的数字限制组合方案
必须三件套齐上：
- type="text"（避免 type="number" 的 iOS 逗号转换、粘贴禁用等副作用）
- inputmode="numeric"（iOS/Android 主动弹出纯数字键盘）
- oninput="this.value = this.value.replace(/[^0-9]/g, '')"（实时删掉所有非数字字符）
如果需支持小数：
- 改用 inputmode="decimal"
- oninput 正则换成 /[^0-9.]/g
- 额外处理多个小数点：this.value = (parseFloat(this.value) || '').toString() 更稳妥
别用 onkeydown 或 onkeypress：
- 无法捕获粘贴、拖拽、IME 输入（如中文拼音上屏后回车）
- 移动端输入法普遍绕过这类事件
pattern 正确写法与典型翻车点
pattern 的正则默认隐式加 ^ 和 $，所以：
- ✅ 正确：pattern="[0-9]{4,6}"（匹配 4–6 位纯数字）
- ❌ 错误：pattern="[0-23]"（这只是字符集，匹配单个 '0'/'1'/'2'/'3'，不是数字范围 0–23）
- ❌ 错误：pattern="^[0-9]{6}$"（显式写 ^$ 可能因转义在旧 Android WebView 中解析失败）
必须搭配 required：否则空值直接跳过校验
title 属性不能省：它是唯一可定制的错误提示入口
移动端 Safari 对 title 支持不稳定，建议 JS 监听 invalid 事件补提示
最易被忽略的一点：一旦 pattern 校验失败，input.validity.valid 会长期保持 false，直到用户再次输入并满足条件——这个状态不会自动重置，也不随页面刷新消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
