pattern属性仅在表单提交或调用checkvalidity()时触发一次全匹配校验，需配合required、title及text类type（如text/tel/email）才生效；正则须为裸字符串，禁用/^$/和斜杠，字符类中短横须置首尾，中文用u4e00-u9fa5，避免.*开头结尾。
pattern 属性本身不实时校验、不自动提示、也不高亮错误——它只在表单提交或调用 checkValidity() 时触发一次全匹配判断。想让它“起作用”，必须配对 required 和 title，且 type 必须是文本类（如 text、tel、email）。
pattern 正则怎么写才不被浏览器静默忽略
浏览器把 pattern 当作纯字符串解析，内部自动加 ^ 和 $ 做全匹配。写错一个符号就失效，而且毫无报错提示。
- 绝对不要加首尾斜杠：
pattern="/[0-9]{6}/"→ 浏览器真去匹配字面的/，直接失败 -
-在字符类[]中必须放开头或结尾：[a-z_-]✅，[a-z-_]❌（会被当成非法 Unicode 范围） - 点号
.不需要转义，但 HTML 属性中若要表示字面点，得写成.；而.在属性值里需双写反斜杠 → 实际写成\. - 中文用
[u4e00-u9fa5]，注意u是 HTML 属性中对 Unicode 的必要双写（单u会被 HTML 解析器吞掉） - 避免
.*开头或结尾：pattern=".*@.*..*"失去约束力，且贪婪匹配会让验证形同虚设
为什么写了 pattern 却没反应？常见静默失效场景
不是代码错了，而是你没满足它的硬性触发条件。
-
type不是文本类：用type="number"或type="date"时，pattern完全被忽略 —— 想控 6 位验证码，必须用type="text"inputmode="numeric" - 没配
required：空值默认通过所有pattern（除非你显式写pattern=".+"），加required才能触发必填 + 格式双重拦截 - 没写
title：验证失败时只显示“请与所要求的格式匹配”，iOS Safari 甚至不显示该提示，用户完全不知道错在哪 - 状态残留：用户改完内容后再次提交仍报旧错，因为
input.validity.valid不自动刷新，得手动调用reportValidity()或监听input清空setCustomValidity("")
哪些场景适合用 pattern，哪些必须切到 JavaScript
pattern 只适合格式边界清晰、无需上下文判断的静态规则；一旦涉及组合、依赖、实时反馈或容错处理，就得靠 JS。
- 能用：
pattern="1[3-9]d{9}"（手机号骨架）、pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}"（邮箱基础结构）、pattern="[0-9]{6}"（验证码） - 不能用：两次密码一致（跨字段）、用户名不能含敏感词（需查表）、输入实时标红（
pattern不监听事件）、粘贴后自动trim空格（它不做任何预处理） - 移动端尤其注意：Safari 对
[u4e00-u9fa5]支持极差，姓名校验建议放宽为[a-zA-Zu4e00-u9fa5·s]{2,10}，再用 JS 补位
真正容易被忽略的是：pattern 的“被动性”设计——它不监听、不提示、不重置、不兜底。哪怕你写对了正则，漏掉 required 或 title，用户就只能对着空白错误气泡发呆。复杂逻辑别硬扛，JS 补位不是备选，是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
