html input pattern属性不接受javascript正则字面量（如/^$/），须写裸字符串；禁用首尾斜杠、冗余转义（如.）、连字符-须置字符类首尾，否则解析失败或报错。
pattern 属性不接受 JavaScript 风格的正则字面量，直接写裸正则字符串即可；加 /、冗余转义、错放 - 都会导致验证失效或报错。
pattern 里不能带首尾 /
HTML 的 pattern 是纯字符串，不是 JS 的 RegExp 字面量。浏览器会把 /^abc$/ 当作「以 / 开头、/ 结尾的字符串」来匹配，而不是正则逻辑。
- ❌ 错误：
<input pattern="/^[a-z]{3}$">→ 浏览器尝试匹配字面斜杠 - ✅ 正确：
<input pattern="[a-z]{3}">→ 自动隐式添加^和$ - 调试技巧：用
document.querySelector("input").checkValidity()手动触发，看是否返回false；再读validationMessage确认失败原因
字符类 [] 里怎么写 - 和转义
- 在 [] 中是范围符（如 a-z），若要当普通短横线，必须放在开头或结尾；同时，多数符号在字符类内无特殊含义，不该乱加 。
- ❌ 错误：
[a-z-_]→ 浏览器解析为z到_的非法 Unicode 范围 - ✅ 正确：
[a-z_-]或[-a-z_]→-放末尾或开头即视为字面量 - ❌ 错误：
[.+*]→.、+、*在[]内无元字符意义，加属于非法 identity escape - ✅ 正确：
[.+*]（直接写）；但[、]、^（在开头）、本身仍需转义，如[[]^\]
中文、邮箱、密码这类常见 pattern 怎么写才靠谱
别照搬 JS 正则，得适配 HTML 的 u 模式和隐式锚定规则；复杂逻辑（如「至少含一个大写+一个小写」）可用先行断言，但注意兼容性。
- 中文姓名（2–4 字）：
pattern="[\u4e00-\u9fa5]{2,4}"→\u是 HTML 属性中对u的必要双写（单u会被 HTML 解析器吞掉） - 基础邮箱：
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"→ 注意.在域名后要转义，且 TLD 不用$（pattern已隐式收尾） - 强密码（8+位，含大小写字母、数字）：
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"→ 先行断言可用，但 Safari 旧版本可能不支持，生产环境建议 JS 补充校验 - type="number" 完全忽略
pattern→ 想限制位数（如 6 位验证码），必须用type="text" inputmode="numeric"
为什么写了 pattern 却没反应？几个关键盲区
pattern 生效有硬性前提，漏掉任意一条都会“静默失效”。
-
type必须是支持类型：仅text、search、tel、email、url、password；type="number"、"date"、"checkbox"均无视pattern - 用户未触发提交或失去焦点时，浏览器不会主动提示；可监听
input事件 +checkValidity()实现实时反馈 - 空格是真实字符：用户输
"abc "（末尾空格），pattern="[a-z]{3}"就失败；业务上通常应配合.trim()或在正则中显式允许（如[a-z]{3}\s*） - 浏览器默认提示文案不可定制，且不标红错位；想控制体验，就得用
setCustomValidity()+ JS 主动干预
真正卡住人的，往往不是正则怎么写，而是没确认 type 是否合法、没检查 - 在 [] 里的位置、或者把 JS 的 /.../ 习惯直接搬进 HTML 属性里——这些地方一错，pattern 就彻底“装死”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
