html5 pattern属性仅提供基础格式约束，无法真正校验密码强度或提供实时反馈；最简正则为pattern="(?=.[a-z])(?=.[0-9]).{8,}"，须配合title、required及type="password"使用，且服务端必须二次验证。
HTML5 的 pattern 属性可以对密码做**基础格式约束**，比如要求同时包含大写字母和数字，但要注意：它不能真正“校验强度”，也不能告诉用户缺什么、实时反馈或跨浏览器稳定生效。实际使用中，得配合 title 和 JavaScript 才可靠。
pattern 能写的最小可行正则
要表达“至少1个大写字母 + 至少1个数字 + 总长≥8”，最简 pattern 写法是：
pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}"
说明：
-
(?=.*[A-Z])表示“某处后面跟着一个大写字母”（正向先行断言） -
(?=.*[0-9])同理，确保有数字 -
.{8,}要求总长度至少8位，且允许任意字符（包括小写、符号等） - 不用写
^和$，浏览器会自动加上 - 不要用
\d，部分旧版 Firefox 不识别，统一用[0-9]更稳妥
必须加 title，否则提示没用
pattern 自带的错误提示是冷冰冰的“请与所要求的格式匹配”。用户根本不知道要加数字还是大写字母。所以一定要设 title：
title="密码需至少8位，且包含至少1个大写字母和1个数字"
这个文案会出现在浏览器原生报错气泡里，也是 input.validationMessage 的来源，不能省。
type 和 required 要配对使用
pattern 只对以下 type 生效：text、password、email、tel、url、search。其他如 number 或 date 会直接忽略 pattern。
推荐写法：
-
required必须加，否则空值也能通过 -
type="password"是 pattern 生效的前提之一 - 不要用
type="text"配合inputmode="text"来绕过掩码——安全性下降，且失去密码字段语义
别依赖 pattern 做唯一校验
这个正则在 Chrome/Firefox 中基本可用，但在 Safari ≤15.6、iOS WebView、部分安卓浏览器中，先行断言会被静默忽略，导致校验完全失效。更关键的是：
- 用户输错时，只看到模糊提示，不知道哪里不对
- 无法在输入过程中显示“已满足大写 ✔️，缺数字 ✖️”这类分项反馈
- 服务端必须重新验证，前端 pattern 纯属用户体验补丁，可被禁用或绕过
真正健壮的做法是：用宽松 pattern 挡住明显错误（如太短），再用 JS 绑定 input 事件逐条检测，并调用 setCustomValidity() 输出精准提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
