javascript 密码强弱度检测万能插件

下面是“javascript 密码强弱度检测万能插件”的完整攻略。

1. 概述

随着人们对于数据安全性的需求越来越高，如何设置强密码成为了网站设计的重要问题之一。为此，针对密码的强弱度检测成为了十分必要的工作之一。在Web开发中，需要使用Javascript实现密码强度检测功能。

2. 实现原理

密码强度检测的实现主要包括两个部分：密码评估和UI反馈。其中密码评估是根据一定的算法对输入的密码进行分析，该算法的结果通常包括密码长度、字符集、重复性等等；UI反馈是将分析结果以颜色、文本等形式展现给用户，同时也可以根据密码强弱自动调整表单状态，例如表单收缩、提交禁止等。

3. 插件引入

可以通过CDN引入第三方的密码强度检测插件，例如使用zxcvbn的CDN地址 https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.min.js，也可以将该库下载到本地并引入。

4. 核心代码

下面是一段基于zxcvbn库实现的密码强度检测的示例代码:

//密码强度检测
function checkPasswordStrength(password) {
  var result = zxcvbn(password);
  var score = result.score;
  switch (score) {
    case 0:
      return "非常弱";
    case 1:
      return "弱";
    case 2:
      return "中等";
    case 3:
      return "强";
    case 4:
      return "非常强";
    default:
      return "未知";
  }
}

在上述代码中，我们调用zxcvbn函数并传入密码参数，该函数返回一个分析结果对象。我们可以从该对象中取到密码的评分值score，根据score的值进行密码强度的判定。

另外，需要注意的是，zxcvbn函数是异步调用，因此在应用中需要等待该函数的返回结果后再执行UI反馈操作。可以使用Promise或Callback回调来进行操作。

5. 示例说明

下面我们通过两个例子来说明密码强度检测的效果。

示例1：

假设一个网站要求密码长度不得少于8位，必须包含至少一个大写字母和一个特殊字符。为了检测密码的强弱度，我们使用上述的zxcvbn函数来实现。

<input type="password" id="password" name="password" onchange="onPasswordChange()">
<span id="passwordStrength" style="color: red"></span>

//密码改变事件处理函数
function onPasswordChange() {
  var passwordEl = document.getElementById('password');
  var password = passwordEl.value;

  //检查密码是否符合长度和包含的规则
  if (password.length < 8 || !/[A-Z]/.test(password) || !/[!@#$%^&*]/.test(password)) {
    passwordEl.style.borderColor = "red";
    document.getElementById('passwordStrength').innerText = "非法密码";
    return;
  }

  //计算密码强度并给出反馈
  checkPasswordStrength(password).then(function(strength) {
    var passwordStrengthEl = document.getElementById('passwordStrength');
    passwordStrengthEl.innerText = "密码强度：" + strength;
    var color;
    switch (strength) {
      case "非常弱":
        color = "red";
        break;
      case "弱":
        color = "orange";
        break;
      case "中等":
        color = "yellow";
        break;
      case "强":
        color = "greenyellow";
        break;
      case "非常强":
        color = "green";
        break;
    }
    passwordStrengthEl.style.color = color;
    passwordEl.style.borderColor = color;
  });
}

上述代码中，我们在密码的change事件中处理输入的密码。首先检查密码是否符合题设要求，如果不符合则直接返回，并给用户以提示；否则调用checkPasswordStrength函数计算密码强度，并根据密码强度的等级设置样式和提示文本。

示例2：

这道例子是一个更加简单的示例，我们只展示如何在注册表单中对密码进行强度评估。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" onchange="onPasswordChange()">
  <span id="passwordStrength" style="color: red"></span><br>
  <label for="rePassword">确认密码：</label>
  <input type="password" id="rePassword" name="rePassword"><br>
  <input type="submit" value="注册">
</form>

//密码改变事件处理函数
function onPasswordChange() {
  var passwordEl = document.getElementById('password');
  var password = passwordEl.value;

  //计算密码强度并给出反馈
  checkPasswordStrength(password).then(function(strength) {
    var passwordStrengthEl = document.getElementById('passwordStrength');
    passwordStrengthEl.innerText = "密码强度：" + strength;
    var color;
    switch (strength) {
      case "非常弱":
        color = "red";
        break;
      case "弱":
        color = "orange";
        break;
      case "中等":
        color = "yellow";
        break;
      case "强":
        color = "greenyellow";
        break;
      case "非常强":
        color = "green";
        break;
    }
    passwordStrengthEl.style.color = color;
    passwordEl.style.borderColor = color;
  });
}

上述代码中，我们在password输入框的change事件中计算密码强度，并实时展示给用户。这段代码同样使用了前文的checkPasswordStrength函数来计算密码强度。可以看到这段代码很短，非常适合在现有的表单中加入密码强度检测功能。

6. 结论

有了上述的Javascript密码强度检测插件，可以很容易地检测用户输入的密码强弱度，避免弱密码网络攻击带来的风险。对于网站开发来说，想要加入密码强度检测，只需要轻松引入插件，并且选用合适的策略结合UI反馈即可。