pattern属性需用纯字符串正则（不加/^$/），type必须为text类，配合required和title才生效；适合静态格式校验，复杂逻辑须用javascript。
直接写 pattern 属性就行，但浏览器只在表单提交时校验，不实时反馈，也不高亮错误字段；它不是 JS 正则字面量，不能带 /、^、$，且对 type="number" 完全无效。
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 补位 - 正则太复杂（比如
(a+)+）可能引发 ReDoS，表单提交卡死，这种必须降级为 JS 并加超时保护
真正容易被忽略的是：pattern 验证失败时，浏览器既不滚动到错误字段，也不聚焦输入框，更不告诉你哪一位错了——它只默默拦住提交。如果你指望用户靠试错来猜格式，那不如不用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
