pattern属性仅在表单提交或调用checkValidity()时触发验证，不监听实时输入；需配合required和title使用，且正则书写须注意双反斜杠转义、避免贪婪匹配，移动端提示受限，复杂场景必须JS补位。
pattern属性只在提交时触发验证，不监听实时输入
很多人以为给 <input pattern="..."> 加上正则就能实时高亮错误，其实 pattern 不会自动监听 input 或 blur 事件——它只在表单调用 checkValidity() 或用户点击 submit 时才生效。浏览器不会主动标红、弹提示，除非你配合 required 和原生表单提交逻辑。
常见误区是写完 pattern 就以为“前端校验完成了”，结果用户输错内容却毫无反馈，直到点提交才看到红色边框或 title 提示（如果写了的话）。
- 必须搭配
required才能触发必填 + 格式双重校验（否则空值也能通过） - 提示文案靠
title属性，不是placeholder：例如<input pattern="[0-9]{3}" title="请输入3位数字"> - 移动端 Safari 对
title支持弱，iOS 用户可能看不到提示，需额外 JS 补充 - pattern 正则默认是“全匹配”，不需要加
^和$—— 浏览器内部已隐式包裹
正则写法要避开贪婪匹配和未转义字符
pattern 的正则引擎是浏览器内置的 RegExp，但不支持某些高级特性（如 lookbehind、命名捕获组），而且对反斜杠处理更敏感。写错一个转义就直接失效，比如想匹配邮箱中的点号 .，写成 .*@.*..* 会报语法错误，因为 HTML 属性值里反斜杠要双写。
- 点号必须写成
.，而 HTML 中要写成\.（第一个反斜杠转义第二个） - 中文字符用 Unicode 范围，例如
[\u4e00-\u9fa5]，注意双反斜杠 - 避免用
.*开头或结尾，容易导致“看似通过实则没校验”——比如pattern=".*abc"允许任意前缀，失去约束力 - 手机号常用写法：
pattern="1[3-9]\d{9}"（注意双反斜杠），别漏掉1开头限制
与 JavaScript 的 RegExp.test() 行为不完全一致
pattern 内部调用的是类似 new RegExp(`^${attrValue}$`).test(value)，但细节有差异：比如不支持 g 或 i 标志，且部分浏览器对 Unicode 字符类支持不一。最典型的是，pattern="d+" 在 Chrome 可用，但在旧版 Firefox 可能不识别 d，得写成 [0-9]+。
立即学习“前端免费学习笔记（深入）”；
- 坚持用字符类代替简写：用
[0-9]替d，[a-zA-Z]替[a-z]（忽略大小写不可控） - 测试时别只信控制台
/^d+$/.test("123")，要真放进 input 提交看效果 - 空格容易被忽略：
pattern="[a-z]+"会拒绝带空格的姓名，需明确是否允许——加\s？那也要双写\s - IE10+ 支持 pattern，但 Android 4.4 WebView 有 bug，遇到复杂正则建议降级为 JS 校验
真正可靠的校验需要 JS 补位，尤其在非 submit 场景
如果页面用 AJAX 提交、禁用原生 submit、或需要输入中实时反馈（比如密码强度、用户名可用性），pattern 完全无用。这时候必须手动监听 input 事件，用 RegExp.prototype.test() 判断，并操作 setCustomValidity() 来干预原生验证状态。
- 关键代码模式：
input.addEventListener('input', () => { const isValid = /^[a-z0-9_]{3,16}$/.test(input.value); input.setCustomValidity(isValid ? '' : '只能用小写字母、数字、下划线，3–16位'); }); -
setCustomValidity('')清空错误，否则一旦设过非空字符串，后续即使输入正确也不会自动恢复通过状态 - 不要在
input事件里直接改样式（如加 class），优先用:valid/:invalidCSS 伪类，更轻量 - 服务端永远要重验——pattern 是用户体验优化，不是安全边界
