连字符-在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收不到任何东西。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

必须换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()来控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！