连字符-在pattern字符类中必须置于首尾，否则解析为非法范围导致正则失效；校验含连字符字符串需用type="text"或"type=tel"，配合required和title；复杂规则须JS实现。
pattern里连字符-必须放字符类首尾
在pattern属性的字符类[...]中，-不是字面量短横线，而是范围连接符（如a-z）。如果把它放在中间，比如[a-z-_]，浏览器会尝试解析“z到_”这个非法Unicode范围，直接导致正则失效，控制台可能报Invalid character in character class或静默跳过校验。
正确做法只有两种：
✅ [a-zA-Z0-9_-]（-放末尾）
✅ [-a-zA-Z0-9]（-放开头）
别加反斜杠——[-]或\-在pattern里都多余甚至出错。
校验含连字符的用户名或编号（如my-user、NO-123）
不能直接套用JS正则写法。比如想匹配my-user，写pattern="^[a-z]+-[a-z]+$"是错的：浏览器自动加^和$，你再写就变成^^[a-z]+-[a-z]+$$，部分旧版Safari会拒识整个规则。
推荐写法：
• 用户名（小写字母+单连字符+小写字母）：pattern="[a-z]+-[a-z]+"
• 编号（NO-后跟1~4位数字）：pattern="NO-\d{1,4}"
• 注意：\d在pattern中等价于[0-9]，安全可用；但\w不支持，得拆成[a-zA-Z0-9_]
立即学习“前端免费学习笔记（深入）”；
type="number"加pattern永远不生效
写了<input type="number" pattern="NO-\d{3}">？它根本不会触发校验。因为type="number"把输入转成数值类型，原始字符串（含-）早被浏览器截断或丢弃，pattern收不到任何东西。
必须换type：
• 用type="text"最稳妥
• 或type="tel"（iOS会唤起数字键盘，且保留连字符）
• 想兼顾语义和体验？加inputmode="text"明确提示键盘类型，别依赖type="number"
空值通过、无提示=白配pattern
pattern默认允许空输入——哪怕正则再严，用户不输内容就直接“验证通过”。这不是bug，是设计如此。
要真正拦住空值：
• 必须加required属性
• 同时加title，否则错误提示是模糊的“请与所要求的格式匹配”
• 示例：<input required title="请输入形如 my-user 的格式" pattern="[a-z]+-[a-z]+">
真正复杂的连字符校验（比如“最多两个连字符，不能连续，不能开头结尾”）已超出pattern能力边界，得用JavaScript监听input事件配合RegExp.test()和setCustomValidity()来控。
