密码强度实时检测需监听input事件，按长度、大小写字母、数字、特殊符号五项各20分判定，返回分数、等级及提示，并通过进度条宽度、背景色、文字三重反馈动态更新UI。
在输入密码时实时显示强度等级（如弱/中/强）和对应视觉反馈，核心是监听输入事件、分析密码特征、动态更新 UI。关键不在于复杂算法，而在于即时性、可读性和用户友好。
监听输入并触发强度检测
用 input 事件（不是 change）确保每次按键都响应，包括粘贴、删除、切换输入法等场景：
const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('strength-bar');
const strengthText = document.getElementById('strength-text');
passwordInput.addEventListener('input', () => {
const pwd = passwordInput.value;
const result = checkPasswordStrength(pwd);
updateUI(result);
});
定义清晰的强度判定逻辑
避免纯正则堆砌，按维度加分更可控、易解释。推荐以下 5 项基础检查（每项 20 分，满分 100）：
- 长度 ≥ 8 字符 → +20
- 含小写字母 → +20
- 含大写字母 → +20
- 含数字 → +20
- 含特殊符号（如 !@#$%^&*）→ +20
返回对象包含分数、等级（'weak' / 'medium' / 'strong'）、提示文案，例如：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
function checkPasswordStrength(pwd) {
let score = 0;
let tips = [];
if (pwd.length >= 8) { score += 20; }
else { tips.push('至少 8 位'); }
if (/[a-z]/.test(pwd)) score += 20;
else tips.push('小写字母');
if (/[A-Z]/.test(pwd)) score += 20;
else tips.push('大写字母');
if (/\d/.test(pwd)) score += 20;
else tips.push('数字');
if (/[^A-Za-z0-9\s]/.test(pwd)) score += 20;
else tips.push('特殊符号');
let level = 'weak';
if (score >= 80) level = 'strong';
else if (score >= 60) level = 'medium';
return {
score,
level,
tip: tips.length ? `建议补充：${tips.join('、')}` : '很好！'
};
}
用颜色+文字+进度条直观反馈
不要只靠文字，组合三种信号降低认知负担：
-
进度条宽度：设为
score + '%'（如 60 → width: 60%） - 背景色动态变化：weak → #ff6b6b（红），medium → #4ecdc4（青），strong → #45b7d1（蓝）
- 文字标签同步更新：显示“弱”“中”“强”，并附带 tip 提示
更新 UI 示例：
function updateUI({ score, level, tip }) {
strengthBar.style.width = score + '%';
strengthBar.className = `bar ${level}`; // 用于 CSS 控制颜色
strengthText.textContent = level === 'weak' ? '弱' :
level === 'medium' ? '中' : '强';
document.getElementById('strength-tip').textContent = tip;
}
补充体验细节提升专业感
真实项目中容易忽略但影响感知的小点：
- 密码为空时，进度条归零、隐藏提示文案，避免误导
- 添加 CSS 过渡效果：
transition: width 0.2s, background-color 0.2s; - 移动端注意
inputmode="text"和autocomplete="new-password"防止自动填充干扰检测 - 若需更高安全性，可在失去焦点（blur）时额外校验是否含常见弱密码（如 '123456'、'password'）并提示
