pattern 属性不生效主因是 type、required、正则写法三者未匹配：type 必须为 text/search/tel/url/email/password 之一，且必须搭配 required；正则勿加 ^$，连字符等需转义；title 是唯一提示出口，缺失则用户无指引。
pattern 属性不生效，八成是 type、required、正则写法三者中至少一个没对上，不是 JS 写错了，也不是浏览器 bug。
type 和 required 必须同时存在且合法
浏览器只在 type 为 text、search、tel、url、email、password 这六种时才解析 pattern；其他如 number、date 会直接跳过——因为值早已被转成数字或 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>：✅ 兼顾移动端体验与格式控制
正则里别写 ^ $，连字符 - 要转义
HTML 的 pattern 会自动在你写的表达式前后加上 ^ 和 $，所以你只需写核心匹配逻辑。自己再加锚点，旧版 Safari 可能直接跳过整条规则。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
自 2023 年 4 月起，pattern 默认启用 JavaScript v（Unicode Sets）标志，字符类 [] 中的 -、[、| 等必须显式转义，否则编译失败，浏览器静默忽略该 pattern，输入恒为有效。
-
pattern="/^[0-9]{6}$/"：❌ 斜杠被当作文本，整个变成字面量匹配 -
pattern="^[0-9]{6}$"：❌ 锚点冗余，部分旧版 Safari 可能失效 -
pattern="[s-]"：❌v模式下语法错误，应写成[s\-] -
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 天然不支持跨字段比对、动态规则、API 调用或实时反馈。以下场景它完全无能为力：
- 密码与确认密码是否一致：需监听两个
input的值并比对 - 邮箱域名白名单（如只允许
@company.com）：pattern 无法做子串判断 - 用户名是否已存在：必须调用后端 API
- 实时高亮错误（
input或blur事件中检查）：pattern只在提交时触发
真正容易被忽略的点是：哪怕你把 pattern 写对了，只要没配 required，或者用了 type="number" 却想校验带前导零的字符串，验证就形同虚设——它不是“失效”，而是压根没启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
