pattern属性只接受裸字符串而非js正则字面量，自动锚定全串，不支持标志位，连字符-须置首尾，type="number"等非文本类型无效，需配合required和title实现有效校验。
pattern正则不支持JavaScript字面量语法，别加斜杠
直接复制 JS 里的 /^[0-9]{6}$/ 到 pattern 属性里，浏览器会报“Unable to check”或静默失效——因为 pattern 只接受裸字符串，不是 JS 正则字面量。
浏览器内部用 new RegExp(pattern, 'u') 编译，自动加上 ^ 和 $ 锚定全串。你写 pattern="[0-9]{6}" 就等效于 ^[0-9]{6}$，加了反而冗余，还可能因转义出错。
-
❌ 错误写法：
<input pattern="/^[0-9]{6}$/">（斜杠被当作文本字符） -
✅ 正确写法：
<input pattern="[0-9]{6}"> - 想兼容大小写邮箱？别依赖
i标志——pattern不支持标志位，改用[a-zA-Z]或前端统一转小写
字符类中连字符-必须放开头或结尾，否则解析失败
在 [] 里，- 是范围连接符，不是字面短横线。写成 [a-z-_] 会被当成 “z 到 _” 的非法 Unicode 范围，直接导致正则无效。
常见错误是把符号堆一起然后乱加转义，结果越修越错。核心原则：只对真正有元字符意义的字符转义，其余照抄。
-
✅ 安全写法：
[a-zA-Z0-9_-]（-放末尾）、[-a-zA-Z0-9]（-放开头） -
❌ 危险写法：
[a-zA-Z0-9-_]、[a-z-0-9] -
.、+、{、}、(、)在[]内无特殊含义，不要加反斜杠；但[、]、^（在开头）、\本身必须转义
type="number"完全无视pattern，换type或加inputmode
写了 <input type="number" pattern="\d{6}">？它根本不会校验。因为 type="number" 有自己的输入解析逻辑（自动过滤非数字、允许科学计数法），浏览器直接跳过 pattern。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
要控格式，必须选对 type：验证码、手机号、带前缀的编号，一律用 type="text" 或 type="tel"（后者在 iOS 更倾向唤起数字键盘）。
- 需要语义化数值 + 格式控制？用
type="text"+inputmode="numeric"（比type="number"更可靠） -
type="email"自带基础校验，pattern是叠加限制，比如强制域名小写：pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" -
type="date"、type="checkbox"等非文本类型，pattern无效
没反应？大概率缺required或没触发验证时机
pattern 默认允许空值通过——哪怕正则再严，用户不输内容就直接“校验通过”。想让空值也被拦住，必须加 required。
它也不主动提示。没点提交、没调 checkValidity() 或 reportValidity()，就永远没反馈。很多人以为加了 pattern 就万事大吉，结果用户输错后毫无察觉，直到点提交才看到模糊提示。
- 必须配
title：不然 Chrome 提示“请与所要求的格式匹配”，Safari 可能根本不显示气泡 - 要实时反馈？监听
input或blur，手动调input.reportValidity()（弹气泡）或input.checkValidity()（只返回布尔） - 移动端 Safari 对
title和中文 Unicode 范围（如[\u4e00-\u9fa5]）支持弱，复杂场景务必用 JS 补位
pattern 是个被动、延迟、弱反馈的原生机制，它的价值在于轻量兜底，而不是替代 JS 校验。真正容易被忽略的点是：它从不阻止用户输入，只在提交那一刻才说话——而那一刻，用户可能已经填了十项、点了三次提交、开始怀疑页面坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
