密码强度校验

shenzhou_yh

已于 2023-11-08 16:00:55 修改

阅读量2.6k

点赞数 3

分类专栏：前端

于 2022-02-09 13:24:56 首次发布

本文链接：https://blog.csdn.net/shenzhou_yh/article/details/122839952

版权

jquery javascript 前端密码强度

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

密码强度校验改造

背景

由于对项目中用户的密码级别有一定要求，所以需要对用户的密码强度基于一定的校验，方便在重置密码时可以引导用户使用强度偏大的密码，以此为背景展开改造工作。

由于是对页面的改造，且涉及到多个项目，需要尽可能的改动少量文件，以下为实施过程。

Demo搭建

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>密码强度检测算法分析及实现-zxcvbn示例</title>
</head>
<style>
    .container > * {
        width: 200px;
    }
    .bar {
        margin: 5px 0 3px;
        border: 2px solid #ccc;
        overflow: hidden;
    }
    .bar > span {
        display: block;
        height: 20px;
        width: 1%;
        background-color: green;
    }
</style>
<body>
<div class="container">
  <h1>请输入密码：</h1>
    <input id ="pwd" type="text" maxlength="32"  />
    <div class="bar">
        <span id="rate"></span>
    </div>
    <span id="score">0</span>
</div>
<script src="https://cdn.bootcss.com/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var pwd = document.getElementById("pwd");
        pwd.addEventListener("keyup",function () {
            var result = zxcvbn(pwd.value);
            document.getElementById("score").innerHTML = "评分："+result['score']*100.0 / 4;
            document.getElementById("rate").style.width = (result['score']*100.0 / 4)+"%";
        });
    });
</script>
</body>
</html>

上述代码可保存为HTML文件，直接运行；下面我们按照demo，将其集成到项目中去，由于项目框架使用的是若依，其他项目框架可参考调整，主要逻辑没变。

步骤

若依项目中，存在两处可以修改代码，分别为右上角头像hover中的个人中心和修改密码，操作方式相同，可参考一下步骤。

第一步：添加响应的HTML，用于显示强度信息

<input name="strength" id="strength" type="hidden"/>
<div class="form-group">
    <label class="col-sm-3 control-label">密码强度：</label>
    <div class="col-sm-8">
        <div style="border: 2px solid #ccc;overflow: hidden;">
            <span id="rate"
                  style="display: block;height: 20px;width: 0%;background-color: green;"></span>
        </div>
        <span id="score"></span>
    </div>
</div>

若依项目可以直接复制该代码块，放置到新密码所在的DIV之后即可；除此之外，还需声明一个隐藏字段，放置强度等级，用于最终的表单校验。

第二步：添加核心的校验逻辑

    <script src="https://cdn.bootcss.com/zxcvbn/4.4.2/zxcvbn.js"></script>
    <script>
        $(document).ready(function () {
            jQuery.validator.addMethod("strengthLev", function (value, element, param) {
                return $("#strength").val() > param;
            });
            var pwd = $("#newPassword");
            var colorList = ["red", "orange", "yellow", "blue", "green"];
            var strengthList = ["非常弱", "弱", "一般", "强", "非常强"];
            pwd.keyup(function () {
                var result = zxcvbn(pwd.val());
                var level = result['score'];
                $("#score").html(strengthList[level]);
                $("#rate").css({
                    "width": (level * 100.0 / 4) + "%",
                    "background-color": colorList[level]
                });
                $("#strength").val(level);
            });
        });
    </script>

上述代码和demo相比，使用了JQ的方式并且优化了等级和颜色的显示；初次之外，还增加了自定的校验器用于表单校验，下一步做说明

第三步：添加表单校验逻辑

有了强度的提示，还需要满足对应的强度才能修改密码。

对应的校验rules中添加对应的strengthLev等级

newPassword: {
    required: true,
        minlength: 5,
            maxlength: 20,
                strengthLev: 2
},

并在对应的message中添加提示信息

newPassword: {
    required: "请输入新密码",
        minlength: "密码不能小于6个字符",
            maxlength: "密码不能大于20个字符",
                strengthLev: "密码强度不足，请重新输入！"
}