pattern属性仅在表单提交时触发校验，不实时响应输入；需配合<form>使用，不支持环视、Unicode类及正则flag，且自动锚定全字符串，转义需双重处理。
pattern属性只在提交时触发校验，不会实时响应输入
很多人以为给 <input pattern="..."> 加上正则就能像 JavaScript 那样监听每次输入做提示，其实不是。pattern 的校验只发生在表单调用 submit() 或用户点击原生提交按钮时，且仅影响 checkValidity() 和伪类 :valid/:invalid 的状态。
常见错误现象：输入明显不符合 pattern（比如邮箱少个 @），但没任何提示；直到点提交才弹出浏览器默认气泡提示（如“请匹配所要求的格式”）。
- 必须配合
<form>使用，单独 input 不会触发 pattern 校验 - 不支持 flag（如
/i、/g），所有修饰需写进正则字面量内部，例如用[a-zA-Z]代替[a-z]+i - 正则默认**锚定全字符串**：浏览器自动在你写的 pattern 前后加上
^和$，所以不用自己加
手机号校验用 pattern 要小心中国区号和座机场景
想用 pattern 限制 11 位大陆手机号，直接写 pattern="1[3-9]d{9}" 看似合理，但实际会失败——因为缺少起始/结束锚定，而浏览器又自动补了 ^$，所以它其实在匹配整个字段值是否「恰好等于」这个 11 位数字。问题在于：用户可能输空格、括号或短横线（如 138-1234-5678），导致不通过。
更现实的做法是先清理格式（用 JS），或改用宽松 pattern 允许常见分隔符：
立即学习“前端免费学习笔记（深入）”；
<input type="text" pattern="1[3-9]d{2}[-s]?d{4}[-s]?d{4}" title="请输入合法手机号，支持空格或短横线分隔">
- 注意
title属性会作为校验失败时的提示文案，务必写清楚 - pattern 中不能出现 Unicode 字符类（如
p{Han}），只支持 ASCII 范围的正则语法 - 移动端软键盘类型不受 pattern 影响，想呼出数字键盘请额外加
inputmode="numeric"和type="tel"
密码强度校验用多个 pattern 组合不如拆成 JS 检查
试图用单个 pattern 表达“至少 8 位、含大小写字母和数字”，例如 pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*d).{8,}"，结果发现完全不生效。原因：HTML pattern **不支持环视（lookahead）**，所有主流浏览器都忽略这类断言。
可行的替代方案有限：
- 用简单 pattern 做基础长度限制：
pattern=".{8,}"（至少 8 字符） - 把复杂规则交给
input或blur事件里的 JS 处理，并手动调用setCustomValidity() - 若坚持纯 HTML，可退化为多字段：一个 input 限定小写+数字（
[a-zd]+），另一个限定大写（[A-Z]+），再组合逻辑——但体验差，不推荐
pattern 正则中的转义和特殊字符要双重处理
在 HTML 属性里写正则，遇到反斜杠 容易出错。比如想匹配一个反斜杠本身，你以为写 pattern="\" 就行，其实不行——HTML 属性值先解析一次转义，然后正则引擎再解析一次。最终你需要写四个反斜杠：pattern="\\\" 才能匹配单个 。
更常踩的坑是点号 .、星号 *、括号等未被转义：
- 匹配字面量点号，必须写
.，而不是.（否则匹配任意字符） - 匹配字面量问号
?，得写?，否则会被当成量词 - 路径类输入（如
/user/profile）中斜杠不需要转义，但开头结尾的/会被浏览器自动忽略，别画蛇添足写pattern="/user/.*/"
真正难的不是写对正则，而是记住 pattern 是 HTML 属性 → 浏览器解析 → 正则引擎执行，中间有两层上下文切换。稍不注意，d 变成 d，[^s] 变成 [^s]，调试起来毫无头绪。
