html pattern属性不支持环视等高级正则语法，因规范要求子集实现；safari 14及更早版本会静默忽略含(?=...)的pattern，导致校验失效；需用显式字符集如[a-za-z0-9!@#$%^*]{8,}确保跨浏览器兼容，复杂规则必须用javascript配合setcustomvalidity实现。
HTML 的 pattern 属性能做基础密码格式校验，但有硬性限制：它只对 type="password" 生效，且不支持环视（(?=...)）等高级语法——Safari 14 及更早版本会直接忽略含环视的 pattern，导致校验失效。
为什么 pattern="(?=.*\d)(?=.*[a-z]).{8,}" 在某些浏览器里不工作
因为 HTML 的 pattern 规范要求正则引擎使用「子集实现」，而环视（lookahead）不属于该子集。Chrome 和新版 Firefox 会尝试兼容，但 iOS Safari（尤其 14.x 及之前）遇到这种写法会静默跳过整条规则，相当于没写 pattern。
-
pattern本质是「全字符串匹配」，浏览器自动加上^和$，你不用、也不该手动加 -
(?=.*\d)这类零宽断言在 HTML 表单中属于「未定义行为」，不能依赖 - 即使写了，
title提示仍会显示，但校验逻辑已失效——用户输纯字母也能通过
type="password" 下可用的 pattern 写法
要确保跨浏览器生效，必须用「显式字符集 + 长度控制」这类确定性模式。例如：
<input type="password" pattern="[a-zA-Z0-9!@#$%^&*]{8,}" title="密码至少8位，仅允许字母、数字和常见符号">
- ✅ 安全可用：
[a-zA-Z0-9!@#$%^&*]{8,}—— 明确列出允许字符，长度约束清晰 - ❌ 不推荐：
[a-zA-Z\d!@#$%]{8,}——\d在部分旧浏览器中解析不稳定，优先写0-9 - ⚠️ 注意：
pattern不校验「是否同时包含大小写+数字」，它只管「每个字符是否在集合内」和「总长度」
真正需要「大小写+数字+特殊字符」必须用 JavaScript
HTML 的 pattern 无法表达「至少含一种大写、一种小写、一种数字」这类逻辑。必须用 JS 监听 input 或 blur 事件，调用 test() 手动检查：
const pwd = document.querySelector('input[name="password"]');
pwd.addEventListener('blur', () => {
const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if (!re.test(pwd.value)) {
pwd.setCustomValidity('密码需含大小写字母、数字及特殊字符，至少8位');
} else {
pwd.setCustomValidity('');
}
});
- 这个正则在 JS 环境中完全可靠，所有现代浏览器都支持环视
-
setCustomValidity()能覆盖浏览器默认提示，且与reportValidity()协同工作 - 别忘了：后端必须用相同规则再校验一次，前端校验可被绕过
最常被忽略的一点：pattern 校验只发生在表单提交瞬间，而用户往往在输入中途就需要反馈。如果你只靠 pattern，就等于把「密码强度是否达标」这个关键体验，交给了用户点击「提交」之后才告知——这已经晚了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
