答案：通过正则检测字符类型数量和长度判断密码强度，结合输入事件实时反馈。定义小写、大写、数字、特殊符号四类字符，统计匹配类型数，不足两类或长度小于8为弱，两类及以上且≥8为中，四类全含且≥8为强；绑定input事件动态显示强度并添加CSS样式提示，可优化空值处理与常见弱密码警告。
实现一个JavaScript密码强度校验器，关键是分析密码中包含的字符类型和长度，并据此评估强度等级。不需要依赖复杂库，用原生JS就能完成。
1. 定义强度判断规则
通常密码强度分为三类：弱、中、强。可以按以下规则划分：
- 弱：仅包含单一类型字符（如全是数字或小写字母），长度小于8位
- 中：包含两种字符类型，长度大于等于8位
- 强：包含至少三种字符类型（大写字母、小写字母、数字、特殊符号），长度大于等于8位
字符类型分类如下：
- 小写字母：a-z
- 大写字母：A-Z
- 数字：0-9
- 特殊符号：!@#$%^&*()_+{}:"?> 等
2. 编写校验函数逻辑
通过正则表达式检测每种字符类型的出现情况，统计类型数量并检查长度：
立即学习“Java免费学习笔记（深入）”；
function checkPasswordStrength(password) {
let strength = 0;
const checks = [
/[a-z]/, // 小写字母
/[A-Z]/, // 大写字母
/[0-9]/, // 数字
/[^a-zA-Z0-9]/ // 特殊字符
];
checks.forEach(pattern => {
if (pattern.test(password)) strength++;
});
const lengthOk = password.length >= 8;
if (!lengthOk) return '弱';
if (strength === 1) return '弱';
if (strength === 2 || strength === 3) return '中';
if (strength === 4) return '强';
return '弱'; // 默认
}
3. 在页面中实时反馈强度
将函数绑定到输入框的input事件，动态显示结果：
<input type="password" id="password" placeholder="输入密码">
<div id="strength"></div>
<script>
document.getElementById('password').addEventListener('input', function () {
const pwd = this.value;
const result = checkPasswordStrength(pwd);
const strengthEl = document.getElementById('strength');
strengthEl.textContent = '强度：' + result;
// 可添加样式反馈
strengthEl.className = 'strength ' + result.toLowerCase();
});
</script>
可进一步用CSS为“弱”“中”“强”添加颜色提示，比如红色、橙色、绿色。
4. 增强体验的小建议
提升实用性的一些细节：
- 避免在空输入时显示“弱”，可加判断：if (!password) 显示为空或提示
- 限制最大长度，防止过长输入影响性能
- 可加入常见弱密码检测，如123456、password
- 对连续字符或键盘序列（如qwerty）做警告
