pattern属性不生效主因是type不匹配或冗余正则符号；仅text等6种type支持pattern；需省略/^$/、设title提示、复杂校验须用JS。
pattern 属性不生效？不是正则写错了，大概率是 type 或 required 没配对，或者你多加了 /^$/。
为什么 pattern 在 type="number" 里完全没反应
浏览器只对 text、search、tel、url、email、password 这六种 type 解析 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 里写 /^[0-9]{6}$/ 为什么会匹配失败
浏览器会自动把你的 pattern 值当作 ^(?:...)$ 处理，所以你只需写核心匹配逻辑，不能带 JS 风格的修饰符或锚点。
- ❌
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 就等于没写 pattern
title 是浏览器错误气泡、hover 提示、input.validationMessage 唯一复用的内容。不设它，Chrome/Firefox 默认文案是“请与所要求的格式匹配”，用户完全不知道要输什么。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- ❌
title="格式错误"：无信息量，用户无法修正 - ✅
title="请输入6位数字，不要加空格或字母"：明确、可操作 - iOS Safari 对
title支持较弱，若需强提示，得用 JS 的setCustomValidity()补充 -
title不参与校验逻辑，只用于展示，可以写中文、标点、emoji，无需编码
哪些场景必须放弃 pattern，改用 JavaScript
pattern 是第一道防线，但天然不支持跨字段比对、动态规则、API 调用或实时反馈。以下情况它完全无能为力：
- 密码与确认密码是否一致：需要监听两个
input的值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern无法做子串判断 - 实时高亮错误（
input或blur事件中检查）：pattern只在提交时触发 - 用户名是否已存在：必须调用后端 API
- 老浏览器兜底：Safari 14 以下不支持环视，
pattern="(?=.*\d)(?=.*[a-z]).{8,}"会失效
真正容易被忽略的是：即使你用 JS 写了完整校验，也得在表单提交前调用 form.reportValidity() 触发原生 UI，否则用户看不到统一的错误气泡；而所有前端验证都只是体验层，后端重复校验不可省略。
