密码强度验证

Html

Css



    弱
    中
    强

span {
	width:80 px;
	height:10 px;
	display:inline - block;
	background:deeppink;
	margin - right:3 px;
	font - size:18 px;
	text - align:center;
}

/*
 	 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

立即下载

密码强度验证



代码描述：用正则实现密码验证,纯实现方法没有加效果

用排他思想也很不错。这里3个提示内容，选择颜色替换

1

最新

发表评论全部评论

暂时没有评论！

辉色头像0

2017/11/15 11:39:46

纯js代码
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

一杯敬过往

相关代码

密码强度验证

最新