表单提交前校验密码强度需监听submit事件并调用自定义函数，按长度、大小写字母、数字、特殊符号4项规则检测，至少满足4项才允许提交；同时建议结合input事件实现实时反馈，并强调前端校验不可替代后端验证。
在表单提交前校验密码强度，核心是监听表单的 submit 事件，在事件处理函数中调用自定义校验逻辑，不达标就调用 event.preventDefault() 阻止提交，并给出提示。
密码强度常见校验规则
通常要求密码至少满足以下几项中的若干条（例如：4 选 3 或全部满足）：
- 长度 ≥ 8 位
- 包含大写字母（A–Z）
- 包含小写字母（a–z）
- 包含数字（0–9）
- 包含特殊符号（如
!@#$%^&*等）
用正则表达式逐项检测
每个规则可用一个正则测试，返回布尔值，再统计达标项数：
示例代码：
立即学习“Java免费学习笔记（深入）”；
function checkPasswordStrength(pwd) {
let score = 0;
if (pwd.length >= 8) score++;
if (/[A-Z]/.test(pwd)) score++;
if (/[a-z]/.test(pwd)) score++;
if (/[0-9]/.test(pwd)) score++;
if (/[^A-Za-z0-9]/.test(pwd)) score++; // 匹配非字母数字字符
return score >= 4; // 要求至少 4 项达标
}
document.querySelector('form').addEventListener('submit', function(e) {
const pwdInput = document.getElementById('password');
const pwd = pwdInput.value.trim();
if (!checkPasswordStrength(pwd)) {
e.preventDefault();
alert('密码强度不足：请确保包含大小写字母、数字和特殊符号，且长度不少于 8 位');
pwdInput.focus();
}
});
增强体验：实时反馈与可视化提示
仅靠提交时校验不够友好，建议结合 input 或 blur 事件做实时检测，并用颜色/文字/进度条反馈强度：
- 监听
input事件，每次输入后更新强度提示（如显示“弱 / 中 / 强”） - 用不同颜色文字或背景边框区分状态（如红色边框表示不达标）
- 可添加简易进度条：
<div class="strength-bar"></div>，根据得分设置宽度和背景色
注意安全与兼容性
前端校验只是用户体验优化，绝不能替代后端校验。攻击者可绕过 JS，所有规则必须在服务端再次验证。
正则表达式在旧版 IE 中基本都支持，但若需匹配 Unicode 字符（如中文符号），注意使用 /u 标志（现代浏览器支持，IE 不支持）。普通密码校验无需此标志，上述写法兼容性良好。
