pattern属性仅对text、search、tel、url、email、password六种type生效，number等类型会忽略；需配合required确保非空、title提供可操作提示；正则默认全文匹配，无需^$锚点；复杂校验必须用JavaScript实现。
pattern 属性只在特定 type 下生效，且必须配 required 和 title 才真正起作用；复杂校验（如跨字段比对、API 验证）必须用 JavaScript 接管。
哪些 type 支持 pattern？
只有 text、search、tel、url、email、password 这六种类型会解析 pattern。其他类型如 number、date、range 会直接忽略——因为浏览器已把输入转成数字或日期对象，正则收不到原始字符串。
-
<input type="number" pattern="[0-9]{6}">：永远不触发校验；iOS 下还可能自动删前导零 -
<input type="tel" pattern="1[3-9]\d{9}" required>：✅ 正确，tel保留字符串且唤起数字键盘 -
<input type="text" inputmode="numeric" pattern="[0-9]{6}" required>：✅ 兼顾移动端体验与格式控制
pattern 的正则写法有哪些坑？
浏览器会自动给你的表达式加上 ^ 和 $，所以你只需写核心匹配逻辑，不能自己加锚点或修饰符。
- ❌
pattern="/^[0-9]{6}$/"：斜杠被当作文本，整个变成字面量匹配，永远失败 - ❌
pattern="^[0-9]{6}$"：锚点冗余，旧版 Safari 可能跳过整条规则 - ❌
pattern="\d{6}"：部分旧版 Safari/IE 不识别\d，推荐用[0-9]{6} - ✅
pattern="[a-zA-Z0-9_]{3,16}"（用户名） - ✅
pattern=".*[0-9]{6}$"（末尾六位数字，如“张三 123456”）
为什么写了 pattern 却没提示？
title 是唯一可控的提示出口。没设 title，Chrome/Firefox 默认报错文案是“请与所要求的格式匹配”，用户根本不知道要输什么。
立即学习“前端免费学习笔记（深入）”；
- ❌
title="格式错误"：无信息量，用户无法修正 - ✅
title="请输入6位数字，不要加空格或字母"：明确、可操作 - iOS Safari 对
title支持较弱，若需强提示，得用 JS 的setCustomValidity()补充 -
title不参与校验逻辑，只用于展示，可以写中文、标点、emoji，无需编码
什么时候必须用 JavaScript 接管？
pattern 是第一道防线，但挡不住恶意绕过、不一致的提示、跨字段依赖或动态规则。
- 密码与确认密码是否一致：需要监听两个
input的值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern 无法做子串判断 - 实时高亮错误（
input或blur事件中检查）：pattern 只在提交时触发 - 用户名是否已存在：必须调用后端 API
- 老浏览器兜底：Safari 14 以下不支持环视，
pattern="(?=.*\d)(?=.*[a-z]).{8,}"会直接失效
最常被忽略的一点：所有前端验证都只是用户体验优化，后端必须重复校验——否则攻击者禁用 JS 或直接发请求就能绕过全部规则。
