jQuery仿京东检测验密码强度

来源:https://www.sucaihuo.com/js/551.html 2015-11-02 05:47浏览(1514) 收藏

本文的验证密码强度参考了京东注册的密码强度验证。密码强、中、弱正则表达式已在方法里介绍了。
jQuery仿京东检测验密码强度
分类:表单代码 > 注册登录框 难易:初级
查看演示 下载资源 下载积分: 20 积分

检测密码强度表单代码

<input type="password" name="pwd" id="pwd" class="input" onkeyup="checkPwdStrong(this.value)"/>
<label id="pwdstrength" class="strengthA">
    <span class="fl">安全程度:</span>
    <b></b>
</label>

定义强度弱(A)、中(B)、强(C)样式

.strengthA b {
    background: url("pwdstrength.gif") no-repeat scroll 0 0;
}
.strengthB b {
    background:url("pwdstrength.gif") no-repeat scroll 0 -13px;
}
.strengthC b {
    background: url("pwdstrength.gif") no-repeat scroll 0 -26px;
}

检测密码强度方法

function checkPwdStrong(pwd) {
    var element = $("#pwdstrength");
    var value = $("#pwd").val();
    if (value.length >= 6) {
        element.show();
        var level = pwdLevel(value);
        switch (level) {
            case 1:
                element.removeClass().addClass("strengthA");
                break;
            case 2:
                element.removeClass().addClass("strengthB");
                break;
            case 3:
                element.removeClass().addClass("strengthC");
                break;
            default:
                break;
        }
    } else {
        element.hide();
    }
}

若密码长度大于10,强度加一级。支持pattern_1加1,pattern_2加1,pattern_3加1

function pwdLevel(value) {
    var pattern_1 = /^.*([\W_])+.*$/i; //匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'并且支持下划线_。
    var pattern_2 = /^.*([a-zA-Z])+.*$/i;//英文字母
    var pattern_3 = /^.*([0-9])+.*$/i;//数字
    var level = 0;
    if (value.length > 10) {
        level++;
    }
    if (pattern_1.test(value)) {
        level++;
    }
    if (pattern_2.test(value)) {
        level++;
    }
    if (pattern_3.test(value)) {
        level++;
    }
    if (level > 3) {
        level = 3;
    }
    return level;
}
标签: 密码正则强度
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2