pattern属性仅在表单提交时触发原生正则校验，适用于text、tel、email等文本输入类型，不作用于number类型；需配合title提供提示，且正则为全匹配模式，^和$可省略。
pattern 属性是浏览器原生提供的轻量级客户端格式校验机制，它不依赖 JavaScript 就能在表单提交时自动拦截明显非法的输入——但仅此而已，它不实时反馈、不主动提示、不支持复杂逻辑。
pattern 什么时候会真正起作用
只在 <form></form> 提交瞬间触发，且仅对 type="text"、type="tel"、type="email"、type="password" 等文本类输入生效；type="number" 完全忽略 pattern，因为它的校验逻辑独立于正则。
- 用户点击提交按钮或按 Enter 键触发表单提交时，浏览器才执行匹配
- 匹配失败时，表单被阻止提交，但不会高亮输入框、也不会显示具体错误位置
- 若没写
title属性，错误提示是浏览器默认文案（如“请与所要求的格式匹配”），不可控 -
checkValidity()可手动触发验证，配合validationMessage查看当前提示文本
pattern 的正则怎么写才不会报错
它不是 JS 正则字面量，而是纯字符串模式，由浏览器以 u（Unicode）标志编译。常见写错方式包括加 /、乱转义、误用 ^ 和 $。
- 绝对不要写
pattern="/^[0-9]{6}$/"—— 斜杠会被当作文本，直接导致解析失败 - 字符类
[]中的-必须放在开头或结尾，否则被当作范围符（如[a-z-]合法，[a-z-_]非法） -
\s、\d可用，但\.、\+、\(等在[]内无需转义（它们本就不具元字符意义） -
^和$可写可不写：浏览器默认做全串匹配，pattern="[0-9]{6}"等价于^$包裹后的效果
为什么写了 pattern 却没反应
最常踩的坑是「以为它能实时校验」或「拿它当 JS 替代品」——它天生就是被动、延迟、弱反馈的。
- 用户改完内容后再次点提交仍失败？因为
input.validity.valid状态不会自动刷新，需监听input或blur并调用reportValidity() - 写了
setCustomValidity("xxx")却一直报旧错？必须在每次输入后显式调用setCustomValidity("")清空 - 移动端 Safari 对中文 Unicode 范围（如
[\u4e00-\u9fa5]）支持不稳定，建议用inputmode="text"+ JS 补位 - 正则太复杂（比如带嵌套量词
(a+)+）可能引发 ReDoS，导致提交卡死，应避免
哪些场景适合用 pattern，哪些必须上 JS
pattern 适合「格式固定、边界清晰、容错宽松」的输入，比如验证码、手机号前缀、邮箱骨架；一旦涉及组合判断（如两次密码一致）、动态依赖（如省市区联动）、或需要光标定位/实时提示，就得切到 JS 的 test() + addEventListener。
- 能用：
pattern="1[3-9]\d{9}"（11位手机号基础校验） - 能用：
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"（邮箱结构校验） - 不能用：
pattern无法校验「两次输入密码是否一致」 - 不能用：
pattern无法在用户输到第5位时就提示「还差1位」
真正容易被忽略的是：pattern 是个「开关型」校验器——它只决定“能不能过”，从不告诉你“哪里不对”。如果你指望靠它实现精细交互，大概率会在移动端 Safari 上遇到兼容问题，或在用户反复修改后陷入状态不同步的调试泥潭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
