密码强度验证

浏览：762次- 评论：1次- 发布时间：2017-10-27

Html

Css


    弱
    中
    强

/*
 	 1、一类字符 是   弱         纯数字  弱              纯字母  弱                  纯 特殊字符 弱
 	 2、两类字符 是   中   
 	 3、三类字符      强
*/
var txt = document.getElementById("txt");
var r = document.getElementById("r");
var z = document.getElementById("z");
var q = document.getElementById("q");
txt.onkeyup = function() {
    var regxs = [];
    regxs[0] = /[^a-zA-Z0-9]/g; //特殊
    regxs[1] = /[a-zA-Z]/g; //字母
    regxs[2] = /[0-9]/g; //数字
    var str = txt.value;
    var len = str.length;
    var sec = 0; //强度
    if (len >= 6) {
        for (var i = 0; i < regxs.length; i++) {
            if (str.match(regxs[i])) {
                sec++;
            }
        }
    }
    if (sec == 0) {
        r.style.backgroundColor = "deeppink";
        z.style.backgroundColor = "deeppink";
        q.style.backgroundColor = "deeppink";

} else if (sec == 1) {
        r.style.backgroundColor = "blue";
        z.style.backgroundColor = "deeppink";
        q.style.backgroundColor = "deeppink";
    } else if (sec == 2) {
        r.style.backgroundColor = "blue";
        z.style.backgroundColor = "blue";
        q.style.backgroundColor = "deeppink";

} else if (sec == 3) {
        r.style.backgroundColor = "blue";
        z.style.backgroundColor = "blue";
        q.style.backgroundColor = "blue";

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.1