pattern属性仅对type="text"、"search"、"url"、"tel"、"email"、"password"的input生效；正则默认全匹配，需注意转义规则与浏览器兼容性，复杂校验必须依赖JS。
pattern 属性只对特定表单控件生效
不是所有 <input> 都能用 pattern。它只在 type="text"、type="search"、type="url"、type="tel"、type="email"、type="password" 这几类中起作用，type="number" 或 type="date" 会直接忽略该属性——浏览器压根不触发正则校验。
常见错误是给 <input type="number"> 加 pattern 想限制数字范围，结果毫无反应。真要限制数值范围，请用 min/max，或者 JS 手动监听 input 事件。
正则写法必须匹配整个字符串
pattern 的正则默认隐式加了 ^ 和 $，也就是说你写的表达式必须完全匹配输入内容，不能只匹配其中一部分。
- 想要求「6位纯数字」，写
pattern="d{6}"是错的——用户输1234567也会通过（因为 d{6} 能匹配前6位） - 正确写法是
pattern="d{6}"实际等价于^\d{6}$，所以没问题；但若写pattern="123"，用户输abc123def就会通过（因为123出现在中间），这通常不是你想要的 - 如需允许开头/结尾有空格，得显式写进正则里，比如
pattern="^s*d{6}s*$"
浏览器报错提示不可定制，且不显示具体原因
当输入不匹配 pattern 时，浏览器只弹默认提示（如 Chrome 显示“请与所要求的格式匹配”），无法修改文案，也无法知道是哪部分没匹配上。
立即学习“前端免费学习笔记（深入）”；
更麻烦的是：这个校验只在表单提交时触发（或调用 checkValidity()），用户实时输入时不会反馈——不像 JS 可以监听 input 并高亮错误。
- 别指望靠
pattern做友好的交互验证，它只是最后一道轻量级防线 - 如果需要即时提示、自定义错误信息、或复杂逻辑（比如“密码需含大小写字母和数字”），必须配合 JS 的
setCustomValidity()+ 事件监听 -
title属性可作为补充说明，例如title="请输入8–20位字母数字组合"，部分浏览器会在气泡里显示它
兼容性和转义容易出错
pattern 值是 HTML 属性，不是 JS 字符串，所以反斜杠处理规则不同：HTML 中一个 就是字面量反斜杠，不需要双写。
- 写
pattern="d+"是对的；写pattern="\d+"反而会匹配字面量d+（即反斜杠+d+加号） - 但如果你从 JS 动态设置，比如
input.pattern = "\d+"，这时就得用两个反斜杠——因为 JS 字符串解析阶段先吃掉一个 - IE10+ 支持
pattern，但 Android 4.3 及更早 WebView 不支持；Safari 对某些 Unicode 类（如p{L}）不支持
真正复杂的验证逻辑，终究绕不开 JS。HTML 的 pattern 适合简单、静态、容错率高的场景，比如邮编、手机号前缀、固定长度编码。多条件交叉校验？留到 JS 里做更稳。
