pattern验证失败默认不显示title提示，因title仅用于悬停，与约束验证无关；必须通过invalid事件拦截并调用setCustomValidity()注入title内容，且每次input需清空自定义错误。
pattern 属性触发的验证错误为什么默认不显示 title 提示
浏览器原生表单验证时，pattern 匹配失败会触发 ValidityState.patternMismatch，但默认只显示“请匹配所要求的格式”这类泛化提示——title 的内容根本不会自动出现在错误气泡里。这不是 bug，而是规范行为：title 仅用于鼠标悬停提示，和约束验证（Constraint Validation API）无关。
让 title 内容实际出现在 pattern 验证失败气泡里的唯一可靠方式
必须拦截 invalid 事件，调用 setCustomValidity() 手动注入提示文本。此时浏览器会放弃默认提示，改用你传入的字符串：
<input
type="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"
title="密码需包含大小写字母、数字，且不少于8位"
id="pwd">
title 仍保留在 HTML 中（供悬停查看），但真正生效的是 JS 注入的提示：
const pwd = document.getElementById('pwd');
pwd.addEventListener('invalid', e => {
if (e.target.validity.patternMismatch) {
e.target.setCustomValidity(pwd.title || '密码不符合要求');
}
});
pwd.addEventListener('input', e => {
e.target.setCustomValidity(''); // 用户输入时清空自定义错误
});
-
setCustomValidity('')必须在input或change时调用，否则错误状态会一直卡住 - 不要在
submit事件里做这事——验证发生在提交前，invalid事件才是正确时机 - 如果同时用了多个验证规则（如
required+pattern），需在invalid里区分validity的具体字段，避免覆盖其他错误提示
pattern 正则写错导致 title 完全不生效的典型陷阱
常见错误是正则末尾漏掉 $ 锚点，导致部分匹配就通过验证。例如：pattern="[a-z]{3}" 允许输入 "abc123"（只校验开头3位小写字母），用户根本触发不了 patternMismatch，自然也看不到 title 提示。
立即学习“前端免费学习笔记（深入）”；
- 强密码场景务必用完整匹配：以
^开头、$结尾，中间用零宽断言（如(?=.*\d)）确保所有条件满足 - 调试时在控制台检查
input.checkValidity()和input.validity.patternMismatch的返回值，别只靠肉眼观察气泡 - 移动端 Safari 对某些 Unicode 字符类（如
\p{L}）支持差，优先用 ASCII 范围明确的写法
为什么不用 :invalid + ::after 模拟提示
虽然 CSS 可以用 :invalid 伪类加 ::after 显示文字，但它无法读取 title 属性值，也不能响应原生验证气泡的定位逻辑。更关键的是，它绕过了 Constraint Validation API，导致 form.reportValidity() 等方法失效，表单级验证流程断裂。
真正要复用 title 文本，还是得靠 setCustomValidity()——这是唯一能和浏览器原生验证机制对齐的路径。
pattern 和 title 的配合不是属性联动，而是 JS 主动桥接。漏掉 setCustomValidity('') 清空这一步，后续所有验证都会被卡死，这个细节比正则本身更容易让人花半天排查。
