jQuery密码强度验证控件使用详解

jQuery密码强度验证控件使用详解

介绍

jQuery密码强度验证控件是一个用于实时检测密码强(安全)度的工具，它支持自定义安全等级，自定义强度条样式等。该控件简单易用，轻量级高效，易于开发者快速上手并集成到自己的项目中。

安装

jQuery密码强度验证控件可通过npm安装，命令如下：

npm install jquery.password_strength --save

您也可以通过下载源码进行手动安装。

使用

引入

引入以下文件：

<link rel="stylesheet" href="jquery.password_strength.css">
<script src="jquery.js"></script>
<script src="jquery.password_strength.js"></script>

HTML结构

<div>
  <input type="password" id="password" name="password">
  <div id="password_strength"></div>
</div>

调用

$(document).ready(function () {
  $("#password").password_strength({
    common : ["123456", "password", "qwerty", "abc123", "111111", "admin", "welcome", "123123", "monkey", "master", "password1", "sunshine", "letmein", "dragon", "princess", "superman", "iloveyou", "starwars", "hello"],
    minChar : 8,
    baseScore: 30,
    maxScore: 100,
    scoreLevel: [
      {"score": 50, "level": "medium", "color": "#FFAC6F"},
      {"score": 80, "level": "strong", "color": "#6FFF73"}
    ],
    onProgressEnd: function (score, strength) {
      // Your callback function
    },
    onScoreChange: function (score, strength) {
      // Your callback function
    }
  });
});

选项

• common: 数组类型，包含常见的弱密码，即使密码符合要求但其中包含该数组内的弱密码也会被判断为不安全。
• minChar: 数字类型，定义密码最小长度，默认为6。
• baseScore: 数字类型，初始强度，即初始得分，默认为0。
• maxScore: 数字类型，最大得分，默认为100。
• scoreLevel: 数组类型，自定义不同得分范围所对应的强度等级和颜色。
• onProgressEnd: 函数类型，计算结束后触发的回调函数。
• onScoreChange: 函数类型，每次分数计算后触发的回调函数。

示例

示例一

$(document).ready(function () {
  $("#password").password_strength({
    minChar : 10,
    baseScore: 0,
    maxScore: 75,
    common : ["123456", "password", "qwerty", "abc123", "111111", "admin", "welcome", "123123", "monkey", "master", "password1", "sunshine", "letmein", "dragon", "princess", "superman", "iloveyou", "starwars"],
    scoreLevel: [
      {"score": 30, "level": "weak", "color": "#FF4646"},
      {"score": 60, "level": "medium", "color": "#FFAC6F"},
      {"score": 75, "level": "strong", "color": "#6FFF73"}
    ],
    onProgressEnd: function (score, strength) {
      var result = "密码强度为：" + strength;
      $("#password_strength").text(result).css("color", strength === "weak" ? "#FF4646" : (strength === "medium" ? "#FFAC6F" : "#6FFF73"));
    }
  });
});

示例二

$(document).ready(function () {
  $("#password").password_strength({
    common : [],
    minChar : 6,
    baseScore: 0,
    maxScore: 100,
    scoreLevel: [
      {"score": 50, "level": "medium", "color": "#FFAC6F"},
      {"score": 80, "level": "strong", "color": "#6FFF73"}
    ],
    onScoreChange: function (score, strength) {
      var result = "";
      switch (strength) {
        case "weak":
          result = "弱";
          break;
        case "medium":
          result = "中";
          break;
        case "strong":
          result = "强";
          break;
      }
      $("#password_strength").text(result).css("color", strength === "weak" ? "#FF4646" : (strength === "medium" ? "#FFAC6F" : "#6FFF73"));
    }
  });
});

以上就是jQuery密码强度验证控件的详细攻略，希望能为您带来帮助。