pattern是浏览器原生的提交时轻量格式校验，仅对text/search/tel/email/url/password有效，自动全匹配（隐式^$），不支持实时反馈或替代后端校验。
pattern 属性不是“增强验证”的可选项，它是浏览器原生支持的、提交时触发的**轻量格式守门员**——不写 JS 就能拦住明显错的输入，但别指望它实时反馈、覆盖所有边界、或替代后端校验。
pattern 属性只在 submit 时触发，且不支持 ^ 和 $ 的显式语义
浏览器会自动把 pattern 值当作全匹配处理，等价于隐式加了 ^...$。所以写 pattern="[0-9]{6}" 就够了，别写 pattern="^[0-9]{6}$" —— 斜杠和修饰符（如 i、g）会被当作文本字面量，直接让正则失效。
常见错误现象：
- 用户输完 6 位数字，点提交却报错 → 可能多打了空格或粘贴了换行，
pattern不做trim()，得靠 JS 或type="tel"降低干扰 - 正则里写了
^或$却没效果 → 浏览器忽略它们，只按隐式全匹配跑 - 用
new RegExp("...")动态构造再塞进pattern→ 失败，pattern只接受字符串字面量，不执行 JS 表达式
哪些 input type 支持 pattern？哪些不支持？
pattern 仅对 text、search、tel、email、url、password 有效；对 number、date、checkbox 等类型完全无效 —— 因为浏览器提前把值转成数字或日期对象，pattern 拿到的是转换后的结果，不是原始字符串。
使用场景建议：
立即学习“前端免费学习笔记（深入）”；
- 手机号：用
type="tel"+pattern="1[3-9]\d{9}"，比type="number"更可靠（后者在 iOS 上可能自动补零或丢前导 1） - 邮箱：用
type="email"+pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"，注意小写限制，必要时加 CSStext-transform: lowercase - 验证码：用
type="text"（避免移动端数字键盘弹出符号键），配合inputmode="numeric"提升体验
错误提示靠 title，失败无主动反馈
title 是唯一可控的提示出口。不设 title，浏览器默认显示“请与所要求的格式匹配”，中文用户根本看不懂。
容易被忽略的坑：
- 用户改完内容后再次提交仍报错 →
input.validity.valid状态未更新，需手动调用reportValidity()或监听input事件清空自定义错误 - 用
setCustomValidity("xxx")后忘记在每次输入后调用setCustomValidity("")→ 旧错误残留，表单永远 invalid - 移动端 Safari 对中文字符集
[\u4e00-\u9fa5]支持极差，甚至直接跳过验证 → 如需姓名校验，优先用长度 + 字母/数字宽松组合，别强求纯中文
pattern 验证失败时，表单不提交，但不告诉你哪错了
这是最常被低估的一点：pattern 只阻断，不标记、不高亮、不滚动到错误字段。用户看到空白弹窗或毫无反应，只能凭直觉猜哪里不对。
真实项目中必须补的逻辑：
- 监听
invalid事件，在对应input上加class="error"并聚焦 - 提交失败后，遍历所有
form.elements，对!el.checkValidity()的字段调用el.reportValidity()，强制触发提示 - 不要单独依赖
pattern做密码强度校验 —— 它无法检查“是否含大写字母”这类逻辑，得用 JS 的test()配合多个正则分别判断
pattern 只负责最表层的格式卡口，后面所有体验细节，都得靠 JS 补全。 
