侧边栏壁纸
  • 累计撰写 8 篇文章
  • 累计创建 10 个标签
  • 累计收到 1 条评论

基于JQ的密码强度校验改造

神舟一号
2022-02-09 / 0 评论 / 1 点赞 / 283 阅读 / 3,175 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-02-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

密码强度校验改造

背景

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

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

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: "密码强度不足,请重新输入!"
}

备注

  • 附效果图

    密码强度

1

评论区