如何实现一个JavaScript的密码强度校验器？-js教程-PHP中文网

如何实现一个JavaScript的密码强度校验器？

幻影之瞳

发布： 2025-10-07 11:19:02

原创

265人浏览过

答案：通过正则检测字符类型数量和长度判断密码强度，结合输入事件实时反馈。定义小写、大写、数字、特殊符号四类字符，统计匹配类型数，不足两类或长度小于8为弱，两类及以上且≥8为中，四类全含且≥8为强；绑定input事件动态显示强度并添加CSS样式提示，可优化空值处理与常见弱密码警告。

如何实现一个javascript的密码强度校验器？

实现一个JavaScript密码强度校验器，关键是分析密码中包含的字符类型和长度，并据此评估强度等级。不需要依赖复杂库，用原生JS就能完成。

1. 定义强度判断规则

通常密码强度分为三类：弱、中、强。可以按以下规则划分：

弱：仅包含单一类型字符（如全是数字或小写字母），长度小于8位
中：包含两种字符类型，长度大于等于8位
强：包含至少三种字符类型（大写字母、小写字母、数字、特殊符号），长度大于等于8位

字符类型分类如下：

小写字母：a-z
大写字母：A-Z
数字：0-9
特殊符号：!@#$%^&*()_+{}:"?> 等

2. 编写校验函数逻辑

通过正则表达式检测每种字符类型的出现情况，统计类型数量并检查长度：

立即学习“Java免费学习笔记（深入）”；

西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

查看详情

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为“弱”“中”“强”添加颜色提示，比如红色、橙色、绿色。