pattern属性仅在表单提交时触发验证，不实时校验；需配合required和title使用，正则无需^$锚定，中文用\u4e00-\u9fa5，错误提示不可定制，移动端适配弱。
pattern属性只在提交时触发验证
很多人以为给 input 加了 pattern 就能实时校验，其实它只在表单调用 submit() 或用户点击 type="submit" 按钮时才生效。输入过程中不会自动标红、弹提示，也不会阻止非法字符输入——它只是“提交前把关”。
这意味着：如果你需要实时反馈（比如输错立刻变红），得额外监听 input 或 blur 事件，手动调用 checkValidity() 并操作样式。
-
pattern值必须是 JavaScript 正则字面量的「不带斜杠」形式，比如写^[a-z]{3,}$，而不是/^[a-z]{3,}$/ - 正则默认**不锚定**两端，但浏览器内部会自动加上
^和$，所以pattern="a+"实际等价于^a+$，不会匹配"baa" - 空字符串总是通过验证（除非你显式要求非空，比如加
required）
中文、emoji、全角字符容易踩坑
正则引擎用的是 JavaScript 的 RegExp，而 HTML 的 pattern 不支持 u 标志，所以处理 Unicode 字符（如中文、emoji）时行为和 JS 里直接写 /\p{Script=Han}/u 完全不同——pattern 里根本不能用 \p{...} 或 u 标志。
常见写法是退而求其次：
- 匹配中文：用 Unicode 范围，比如
[\u4e00-\u9fa5]（注意这不覆盖所有中文字，如生僻字或扩展区） - 允许 emoji：基本做不到精确匹配，只能放行所有字符（
.*）再靠 JS 补充校验 - 全角数字/字母：需单独列出范围，例如全角数字
[\uff10-\uff19]，混写时正则很快变得臃肿
错误信息无法自定义，且不显示具体原因
浏览器原生报错文案固定为类似 “请匹配所要求的格式”，完全不可控。你不能改文字，也不能根据正则分支显示不同提示。
更麻烦的是：它不告诉你哪部分没匹配上。比如 pattern 是 [0-9]{6}，用户输了 "123abc"，浏览器只说“格式不对”，不会指出“第4位开始不是数字”。
- 要定制提示，必须阻止默认提交，用
setCustomValidity()手动设错误消息 - 推荐组合：
oninvalid="this.setCustomValidity('请输入6位纯数字')"+oninput="this.setCustomValidity('')"清空状态 - 注意：
setCustomValidity('')是启用原生验证的关键，留空字符串才表示“验证通过”
移动端软键盘适配常被忽略
pattern 会影响 iOS 和 Android 输入法弹出的键盘类型，但效果有限且不一致：
-
pattern="[0-9]"或type="tel"可能触发数字键盘，但 iOS 对pattern的响应比type弱得多 -
pattern="[a-zA-Z]"几乎不影响键盘——它还是默认键盘，不会切到字母模式 - 真正靠谱的方式是优先用语义化
type（如type="email"、type="url"），pattern仅作二次校验
别指望靠 pattern 控制键盘，那是 type 的职责；pattern 的本分只是格式守门员，而且守得挺安静——不声不响，直到提交那一刻才亮红灯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
