<>强效果图:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>验证密码强度& lt;/title>
& lt;风格类型=" text/css "比;
*{保证金:0;填充:0;}
身体{背景:# ccc;}
#演示{宽度:400 px;填充:50 px;背景:# efefef;边界:1 px固体# 999;行高:40 px;保证金:100 px汽车0;}
# strength_length{高度:6 px;宽度:100 px;填充:2 px;边界:1 px固体# ccc;}
.lv1{背景:红色;}
.lv2{背景:蓝色;宽度:200 px;}
.lv3{背景:绿色;宽度:300 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=把菔尽北?
& lt;标签=癷pt”在密码:& lt;/label>
& lt;输入类型="文本" id=癷pt”祝辞& lt; br/比;
& lt; em>密码强度:& lt;/em> & lt; em id=扒慷取弊４? lt;/em>
& lt; div id=" strength_length "祝辞& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
(函数(窗口){
函数$ (id) {
返回. getelementbyid (id);
};
var arr=[”,“低”、“中”、“高”);//获取对象
var ipt=$ (ipt)强度=$(“力量”),strLength=$ (“strength_length”);//密码输入事件
ipt。onkeyup=function () {
var s=0;
var txt=this.value;
如果(/[a-zA-Z]/test (txt)) {
s + +;
};
如果([0 - 9]/test (txt)) {
s + +;
};
如果(/[^ 0-9a-zA-Z]/test (txt)) {
s + +;
};
如果(txt)。长度& lt; 6) {
s=0;
};
的力量。innerHTML=arr [s];
strLength。className=發v”+ s;
}
})(窗口)
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
