HTML5的pattern属性无法独立实现真正复杂的密码强度校验，仅支持单次正则匹配，缺乏多条件逻辑、分项反馈与实时强度指示，且兼容性差；应结合JavaScript进行规则逐条验证并用setCustomValidity提供定制化提示。
HTML5 的 pattern 属性可以实现基础的密码格式校验，但它**无法独立完成真正意义上的“复杂密码强度”判断**——比如要求“至少1个大写字母、1个小写字母、1个数字、1个特殊字符，且长度≥8”，因为 pattern 仅支持单个正则匹配，不支持多条件逻辑或断言（如正向先行断言 (?=.*\d) 在部分浏览器中虽被解析，但表单提交时的原生验证行为并不统一，且错误提示不可控、不可定制。
pattern 能做什么：有限但实用的格式约束
pattern 本质是让浏览器对输入值执行一次 RegExp.test()，匹配成功才允许通过原生校验。它适合表达「必须满足的整体结构」，例如：
- 长度范围：
pattern=".{8,20}"（8–20 个任意字符） - 禁止空格：
pattern="^\S+$" - 必须以字母开头：
pattern="^[a-zA-Z][a-zA-Z0-9_@#$%&*]{7,}$" - 常见组合（较宽松）：
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d$@$!%*?&]{8,}"—— 注意：此写法在 Chrome/Firefox 中可触发原生提示，但 Safari 对先行断言支持不稳定，且用户看到的默认提示语是“请匹配所要求的格式”，不说明缺什么
为什么纯 pattern 不足以做“强度校验”
原生 pattern 校验有三个硬性局限：
- 无分项反馈：只返回“匹配”或“不匹配”，无法告诉用户“缺少数字”还是“未含大写字母”
- 无实时强度指示：不能在输入过程中动态显示“弱/中/强”或进度条
-
兼容性与语义缺陷：正则中的先行断言在旧版 Edge 或某些移动浏览器中可能被忽略，导致校验失效；且
title属性提示文字无法动态更新
推荐方案：pattern + JavaScript 增强校验
用 pattern 做兜底（防绕过、保基础结构），用 JS 实现真正的强度分析和友好反馈：
- 监听
input或blur事件，逐条检查规则（如/[a-z]/.test(val)、val.length >= 8等） - 汇总未达标项，生成可读提示（例：“需至少1个大写字母、1个特殊字符”）
- 调用
setCustomValidity()控制原生报错，例如：input.setCustomValidity(issues.length ? issues.join('；') : ''); - 保留
pattern属性用于无 JS 环境的最小保障（如禁用 JS 时仍阻断纯数字密码）
一个轻量可用的实践示例
HTML 中写：
JS 中处理：
- 定义规则数组：
const rules = [ { re: /.{8,}/, msg: '长度至少8位' }, { re: /[a-z]/, msg: '含小写字母' }, … ] - 遍历
rules，收集!rule.re.test(val)的msg - 用
setCustomValidity写入拼接后的提示，或清空（校验通过时传空字符串） - 配合 CSS 类（如
.pwd-strong）动态更新背景色或图标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
