HTML pattern属性使用隐式^$和u标志，连字符-须置字符类首尾，禁用/^$/、先行断言及type="number"下pattern，email推荐组合type与精简pattern，中文空格等需规范写法。
HTML pattern 属性的正则不是 JavaScript 正则字面量，浏览器会自动加 ^ 和 $，且默认启用 u（Unicode）标志——直接粘贴 JS 里能用的正则，八成会报错或行为异常。
pattern 中的连字符 - 必须放在字符类开头或结尾
在 [a-z0-9-_] 这类写法里，- 在中间会被解析为“z 到 _”的 Unicode 范围，而 z（U+007A）码点大于 _（U+005F），范围非法，直接触发 Invalid character in character class 错误。
-
[a-z0-9_-]✅ 安全（-在末尾） -
[-a-z0-9_]✅ 安全（-在开头） -
[a-z-_0-9]❌ 解析失败（-夹在中间且前后无序） - 所有含
-的字符类，都建议统一放末尾，省心又兼容
不要写 /^...$/，斜杠和锚点全是冗余的
pattern 值是纯字符串，不是正则字面量。写 pattern="/^[a-z]+$/ 会导致首尾 / 被当作文本匹配，^ 和 $ 虽不报错但多余——浏览器已隐式包裹整个输入值。
-
pattern="[a-z]{3}"✅ 匹配“恰好 3 个小写字母” -
pattern="^[a-z]{3}$"⚠️ 语义等价但增加出错风险（尤其混用转义时） -
pattern="/[a-z]{3}/"❌ 斜杠被当作字面字符，实际要求用户输 “/abc/”
type="email" 和 pattern 叠加时，别重复造轮子
本身已强制含 @ 和至少一个 .，再套复杂正则容易冲突。比如写 pattern="^.+@.+\..+$" 看似严谨，实则和原生校验逻辑重叠，还可能因转义不当崩掉。
- 推荐组合：
type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" - 必须转义的只有
\.（点号在域名后是字面量，不转义会匹配任意字符） - 别用先行断言
(?!...)：pattern 不支持，Chrome 直接忽略整条正则 -
type="number"下pattern完全无效，改用type="text" inputmode="numeric"
中文、空格、特殊符号怎么安全写进字符类
Unicode 字符如中文可直写，但需注意浏览器对 u4e00-u9fa5 的支持较稳；空格建议用 \s（语义清晰且覆盖全角空格、NBSP 等），而非字面空格；.、+、(、)、{、} 在字符类内无需转义——除非它们有元字符含义（如 ]、^、-）。
-
[a-zA-Z\u4e00-\u9fa5\s.,_+-]✅ 中文 + 字母 + 空格 + 常用符号，-在末尾 -
[a-zA-Z\u4e00-\u9fa5 \.,_+-]⚠️ 字面空格易被 HTML 属性值 trim 或混淆，不如\s -
[a-zA-Z\u4e00-\u9fa5\s\.\,\+\-\_]❌ 所有反斜杠都是冗余转义，pattern会报Invalid identity escape
最常被忽略的是：pattern 校验只在提交时触发，且不提供具体错误位置提示；调试时优先用 document.querySelector("input").checkValidity() + validationMessage 查问题，而不是靠肉眼猜哪段正则坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
