pattern属性仅对text、search、tel、url、email、password六种type有效，需配合required和title使用；复杂校验必须用JavaScript实现。
pattern 属性不是万能的，它只在特定 type 下生效，且必须配 required 和 title 才真正起作用；复杂逻辑或跨字段校验（如“密码与确认密码一致”）必须用 JavaScript 接管。
哪些 input type 支持 pattern 属性
pattern 仅对 text、search、tel、url、email、password 这六种 type 有效。其他类型如 number、date、range、checkbox 会直接忽略该属性——浏览器先将输入转为数值或日期对象，正则根本收不到原始字符串。
-
<input type="number" pattern="[0-9]{6}">：永远不触发校验；iOS 下还可能自动删前导零 -
<input type="tel" pattern="1[3-9]\d{9}">：✅ 正确，tel保留字符串且唤起数字键盘 -
<input type="text" inputmode="numeric" pattern="[0-9]{6}">：✅ 兼顾移动端体验与格式控制
pattern 中的正则写法限制
浏览器会自动把你的 pattern 值当作 ^(?:)$ 处理，所以你只需写核心模式，不能带 /^$/、i、g 等 JS 正则语法。
- ✅ 正确：
pattern="[a-zA-Z0-9_]{3,16}"（用户名）、pattern="1[3-9]\d{9}"（手机号） - ❌ 错误：
pattern="/^[0-9]{6}$/"→ 斜杠被当作文本，整个表达式字面匹配，永远失败 - ❌ 错误：
pattern="^[0-9]{6}$"→ 锚点冗余，旧版 Safari 可能跳过整条规则 - ❌ 错误：
pattern="d{8}"→ 缺少反斜杠，解析为字面量d{8}，不是数字
title 是唯一可控的提示出口
没设 title，Chrome/Firefox 默认报错文案是“请与所要求的格式匹配”，用户根本不知道要输什么。而 title 是唯一能在错误气泡、hover 提示、input.validationMessage 中复用的内容。
-
title="请输入6位数字,不要加空格或字母"比title="格式错误"有用十倍 - iOS Safari 对
title支持较弱，若需强提示，得用 JS 的setCustomValidity()补充 -
title不参与校验逻辑，只用于展示，可以写中文、标点、emoji，无需编码
什么时候必须用 JavaScript 接管
HTML5 内置验证只是第一道防线，它挡不住恶意绕过、不一致的提示、跨字段依赖或动态规则。以下场景无法靠 pattern 解决：
- 密码与确认密码是否一致：
password和password2的值比对 - 邮箱域名白名单校验（如只允许
@company.com） - 实时反馈（
input或blur事件中检查并高亮） - 需要调用 API 验证用户名是否已存在
- 老浏览器兼容性兜底（如 Safari 14 以下不支持环视，
pattern="(?=.*\d)(?=.*[a-z]).{8,}"会失效）
pattern 的最大陷阱在于：它看起来像“开了个校验开关”，但其实只在极窄路径下工作；一旦你用了 type="number" 或忘了 required，整个校验就静默失效——这种问题在线上环境很难复现，却极易漏测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
