pattern属性仅在表单提交或调用checkvalidity()时触发全匹配，且需type、required、title三者齐备才生效；正则不加/^$/，浏览器自动添加^和$；中文匹配用[\u4e00-\u9fa5]，连字符-须置首尾，type非text/tel/email等时pattern无效。
pattern 属性不是“写了就能用”，它只在表单提交或调用 checkValidity() 时触发一次全匹配，且必须满足 type、required、title 三者齐备才真正生效。
pattern 正则不加 /^$/，也不写 ^ 和 $
浏览器内部自动给 pattern 值加上 ^ 和 $，所以显式写反而冗余，还容易因转义出错导致静默失效。
- ❌ 错误：
<input pattern="/^[0-9]{6}$/">（斜杠被当作文本字符，^和$重复） - ✅ 正确：
<input pattern="[0-9]{6}">（干净、可靠、兼容性好） - ⚠️ 注意：
\d在部分旧浏览器（如 Firefox 早期版本）中不被支持，坚持用[0-9]更稳妥 - 中文匹配必须写成
[\u4e00-\u9fa5]，HTML 属性中u要双写为u？不用——直接写\u4e00即可，但注意 Safari 对该写法支持差，移动端建议 JS 补位
字符类 [] 里连字符 - 必须放开头或结尾
写错位置会触发 “invalid character in class” 报错，且无任何提示，输入框直接失去校验能力。
- ✅ 安全写法：
[a-zA-Z0-9_-]（-在末尾）、[-a-zA-Z0-9]（-在开头） - ❌ 危险写法：
[a-z-0-9]（-在中间，被解析为 “z 到 0” 的非法范围） - 点号
.、星号*、加号+在[]内就是字面量，**不要加反斜杠**；只有]、^（在开头）、\本身需要转义 - 想匹配字面
(或)？直接写(和)即可，无需\(；但部分 WebKit 浏览器（如旧版 Safari）可能报错，保险起见可显式转义为\(和\)
type="number"、type="date" 等非文本类型完全忽略 pattern
哪怕正则再精准，只要 type 不是 text、tel、email、url、password 或 search，pattern 就不会执行。
- ❌ 无效：
<input type="number" pattern="1[3-9]\d{9}">（type="number"自动过滤符号、允许科学计数法，pattern 彻底失效） - ✅ 推荐：
<input type="tel" pattern="1[3-9][0-9]{9}" inputmode="numeric">（type="tel"唤起数字键盘，inputmode提升移动端体验） - 邮箱场景优先用
type="email"+pattern叠加限制，比如强制本地部分小写：pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}" - 密码强度类（如“至少含数字和字母”）需零宽断言，但 pattern 不支持
(?=.*\d)等语法，这类必须用 JS 校验
空格、大小写、实时反馈这些事 pattern 根本不管
pattern 只做一次字符串全匹配，不做清洗、不监听事件、不区分大小写（除非你手动写 [a-zA-Z]）。
- 用户输入
" 123 "（带空格），pattern="[0-9]{3}"会失败——得靠 JS 在提交前调用.trim() - 大小写敏感是默认行为，
pattern="[a-z]{3}"拒绝ABC；没有i标志可用，只能写成[a-zA-Z]{3} - 想输错就标红？pattern 不监听
input事件，必须自己绑定并调用setCustomValidity()或reportValidity() - title 属性不是可选项：没它，错误提示是“请与所要求的格式匹配”，iOS Safari 甚至不显示该提示
真正难的不是写出正则，而是判断哪些规则能交给 pattern，哪些必须立刻切到 JS——比如跨字段比对、粘贴后自动清理、动态依赖其他输入值，这些 pattern 天然无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
