pattern属性不生效需先确认type为text/search/tel/url/email/password且必须搭配required；正则勿加^$锚点或/修饰符，推荐用[0-9]而非\d；title是唯一提示出口，复杂校验须用js接管。
pattern 属性不生效，先确认 type 和 required 是否配齐
浏览器只对 text、search、tel、url、email、password 这六种 type 解析 pattern；其他类型如 number、date 会直接忽略——因为输入值早已被转成数字或日期对象，正则根本收不到原始字符串。
更关键的是：pattern 必须搭配 required 才会触发校验。没加 required 的字段，即使输入为空或格式错误，也不会报错。
-
<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>：✅ 兼顾移动端体验与格式控制
正则写法踩坑：别带 /^$/、别用 \d、锚点冗余
HTML 的 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”）
title 是唯一提示出口，不设就等于没写规则
title 不参与校验逻辑，但它是浏览器错误气泡、hover 提示、input.validationMessage 唯一复用的内容。没设 title，Chrome/Firefox 默认文案是“请与所要求的格式匹配”，用户完全不知道要输什么。
- ❌
title="格式错误"：无信息量，用户无法修正 - ✅
title="请输入6位数字，不要加空格或字母"：明确、可操作 - iOS Safari 对
title支持较弱，若需强提示，得用 JS 的setCustomValidity()补充
复杂逻辑必须用 JavaScript 接管，pattern 只是第一道防线
pattern 天然不支持跨字段比对、动态规则、API 调用或实时反馈。以下场景它完全无能为力：
- 密码与确认密码是否一致：需要监听两个
input的值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern无法做子串判断 - 实时高亮错误（
input或blur事件中检查）：pattern只在提交时触发 - 用户名是否已存在：必须调用后端 API
- 老浏览器兜底：Safari 14 以下不支持环视，
pattern="(?=.*\d)(?=.*[a-z]).{8,}"会直接失效
真正难的不是写出正则，而是判断哪些地方该交出去——pattern 是轻量守门员，JS 才是主力后卫；漏掉这个分工，调试就会陷入“为什么明明写了正则却没反应”的死循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
