PWChecker 密码安全强度提示 jQuery 插件 - 文章教程

PWChecker 密码安全强度提示 jQuery 插件

发布于 2019-11-25 字数 3515 浏览 1458 评论 0

PWChecker 是一款当用户键入密码的时候,提示的密码强度。允许强制执行指定最小和最大的密码长度,通过友好的方式提示用户,它也能在输入密码不一致的情况下,提示用户。

PWChecker 密码安全强度提示 jQuery 插件

安全一直是程序设计的重要考虑因素,不管你是设计一个简单的登录表单,还是一个复杂的网络应用程序,特别是在线用户的数据安全,虽然我们会设置一个用户名和密码,但是有些用户设置的密码太过于简单,以至于黑客很容易就破解了,这篇文章我们将为大家介绍一款用户密码安全性检测工具。

这就插件就是 PWChecker,这款 jQuery 插件可以检测用户的密码强度,位数和两次输入的密码是否一致,以友好的提示方式展现给用户,帮助用户创建一个复杂安全的网络密码。

参数

下面是 PWChecker 初始化参数,你可以选择性的使用

  • minlength:密码最小长度,默认是8个字符。
  • maxlength:密码的最大长度,默认是16个字符。
  • onPasswordValidate:回调函数。
  • onPasswordMatch:回调函数。

使用方法

1、引入插件文件和jQuery库文件到你的网页中

<script src="js/jquery.min.js"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="js/pschecker.js"></script>

2、编写一些HTML代码,具体的如下所示,给需要验证的密码文本框添加strong-password类

<div class="password-container">
    <p>
        <label>Enter Password:</label>
        <input class="strong-password" type="password" />
    </p>
    <p>
        <label>Confirm Password:</label>
        <input class="strong-password" type="password" />
    </p>
    <p><a class="submit-button locked" href="#">Submit</a></p>
    <div class="strength-indicator">
        <div class="meter"></div>
        Strong passwords contain 8-16 characters,
        do not include common words or names,
        and combine uppercase letters,
        lowercase letters, numbers, and symbols.
    </div>
</div>

3、初始化PWChecker,并且设置一些自定义参数和回调函数

$(document).ready(function () {

    //Demo code
    $('.password-container').pschecker({
      onPasswordValidate: validatePassword,
      onPasswordMatch: matchPassword
    });

    var submitbutton = $('.submit-button');
    var errorBox = $('.error');
    errorBox.css('visibility', 'hidden');
    submitbutton.attr("disabled", "disabled");

    // this function will handle onPasswordValidate callback,
    // which mererly checks the password against minimum length
    function validatePassword(isValid) {
        if (!isValid)
            errorBox.css('visibility', 'visible');
        else
            errorBox.css('visibility', 'hidden');
    }
    //this function will be called when both passwords match
    function matchPassword(isMatched) {
        if (isMatched) {
            submitbutton.addClass('unlocked').removeClass('locked');
            submitbutton.removeAttr("disabled", "disabled");
        }else {
            submitbutton.attr("disabled", "disabled");
            submitbutton.addClass('locked').removeClass('unlocked');
        }
    }
});

相关链接

项目主页:https://www.wenjiangs.com/wp-content/uploads/2019/PWChecker/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论