答案是通过JavaScript监听输入事件实现密码强度检测。创建密码输入框和提示区域，使用addEventListener实时分析输入内容，根据长度、大小写字母、数字及特殊字符的包含情况计算强度，动态更新提示文本与颜色，提供即时反馈。
在网页中实现密码强度检测，可以通过监听输入框的 input 事件，在用户输入时实时验证密码的强度。虽然 HTML 本身不支持“函数”，但结合 JavaScript 可以轻松实现这一功能。下面是一个完整、实用的实现方法。
1. HTML 结构：添加密码输入框和提示区域
创建一个输入框用于输入密码，并显示强度提示：
<input type="password" id="password" placeholder="请输入密码"><br><div id="strengthHint">密码强度：</div>
2. JavaScript 实现：实时检测密码强度
使用 addEventListener 监听 input 事件，对输入内容进行分析：
const passwordInput = document.getElementById('password');
const strengthHint = document.getElementById('strengthHint');
passwordInput.addEventListener('input', function() {
const value = this.value;
if (value === '') {
strengthHint.textContent = '密码强度：';
return;
}
let strength = 0;
const checks = [
value.length >= 8, // 长度 ≥8
/[a-z]/.test(value), // 包含小写字母
/[A-Z]/.test(value), // 包含大写字母
/\d/.test(value), // 包含数字
/[^a-zA-Z\d]/.test(value) // 包含特殊字符
];
strength = checks.filter(check => check).length;
let strengthText, color;
if (strength <= 2) {
strengthText = '弱';
color = 'red';
} else if (strength === 3 || strength === 4) {
strengthText = '中';
color = 'orange';
} else {
strengthText = '强';
color = 'green';
}
strengthHint.textContent = `密码强度：${strengthText}`;
strengthHint.style.color = color;
});
3. 增强体验：可加入进度条或样式类
你还可以通过添加 CSS 类来美化提示效果：
- 根据强度添加 class，如 weak / medium / strong
- 用 CSS 定义不同颜色或背景条
- 避免在控制台输出或 alert 提示，保持界面友好
4. 注意事项与安全建议
前端验证仅用于用户体验，不能替代后端校验：
- 实时检测不要发送密码到服务器
- 不要存储明文密码
- 后端必须重新验证密码强度
- 避免正则过于复杂影响性能
