pattern中/^$/不生效是因为斜杠被当作文本字符而非正则符号，浏览器实际匹配的是以/开头结尾的字符串；字符类中连字符-必须置于开头或结尾，否则解析失败；html pattern仅支持ecmascript 5.1子集，不支持先行断言等高级语法；type="number"等类型不触发pattern校验。
pattern里写了/^$/为什么总不生效
因为pattern值不是 JavaScript 正则字面量，斜杠/会被当作文本字符匹配。浏览器看到/^[a-z]+$/，实际是在找以/开头、以/结尾的字符串，而不是执行正则逻辑。
常见错误现象：输入“abc”却提示验证失败 → 实际要求用户输“/abc/”。
-
pattern="[a-z]{3}"✅ 安全有效（浏览器自动加隐式^和$） -
pattern="^[a-z]{3}$"⚠️ 语义等价但增加风险（尤其混用转义时易出错） -
pattern="/[a-z]{3}/"❌ 斜杠被当字面量，完全偏离预期
字符类里的连字符-总报Invalid character in character class
自2023年4月起，HTML pattern默认启用v（Unicode Sets）标志，-在[]中不再宽容——它必须放在开头或结尾，否则会被解析为非法范围（如[a-z-_]试图解释“z到_”，而U+007A > U+005F）。
使用场景：姓名、用户名、带符号的昵称等含短横线的输入。
-
[a-zA-Z0-9_-]✅ 推荐写法（-在末尾） -
[-a-zA-Z0-9_]✅ 合法（-在开头） -
[a-zA-Z-_0-9]❌ 解析失败，浏览器静默忽略整个pattern - 所有含
-的字符类，统一放末尾最省心
复制JS正则直接粘贴就报错或失效
JS正则支持先行断言(?=...)、p{L}、u/g标志等，但pattern只认 ECMAScript 5.1 子集，且底层用v或u标志编译，能力受限。
常见错误现象：表单提交无阻拦、input.validity.valid恒为true → 很可能正则被浏览器静默丢弃。
-
pattern="(?=.*[a-z])"❌ 先行断言不支持，Chrome 直接跳过整条规则 -
pattern="d{3}-d{2}-d{4}"❌d不是标准写法，应写[0-9]{3}-[0-9]{2}-[0-9]{4} -
pattern="[a-z\u4e00-\u9fa5]+"✅ 中文支持稳定，但Safari对\u4e00-\u9fa5兼容性差，建议搭配长度校验 - 别信“JS能跑，HTML就能用”——必须手动降级语法
type="number"或type="email"配pattern没反应
pattern只对text、search、tel、email、url、password有效；对number、date、checkbox等类型完全无效——因为浏览器先将值转成数字或日期对象，再拿字符串形式去匹配，结果常为空或非预期格式。
使用场景：手机号、邮箱、验证码等需格式约束但又依赖原生键盘体验的字段。
- 手机号：用
type="tel"+pattern="1[3-9]\d{9}"，比type="number"更可靠（iOS不会丢前导1） - 邮箱：用
type="email"+ 精简pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"，别重复校验@和点 - 验证码：用
type="text"+inputmode="numeric"，避免type="number"触发符号键盘 - 没设
title属性？验证失败时浏览器只显示“请与所要求的格式匹配”，中文用户根本看不懂
pattern只在submit时触发，且不反馈具体哪错了——它不标记字段、不高亮、也不滚动到错误位置。如果用户改完内容重试仍失败，大概率是input.validity.valid状态没更新，得手动调用reportValidity()或监听input事件清空自定义错误。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
