css部分
.box {
margin-top: 8px;
}
span {
width: 70px;
height: 10px;
display: inline-block;
font-size: 18px;
text-align: center;
background: #bbb;
}
html部分
<input type="text" name="" id="txt">
<div class="box" id="box">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
js部分
/*
分析:
密码长度不能低于3
根据密码的复杂程度决定密码的强度
弱:纯数字、纯字母或纯其他特殊字符
中:有任意两种字符
强:包含数字、字母、特殊字符三种字符
*/
function $(id) {
return document.getElementById(id);
}
var regNum = /^\d+$/; //纯数字
var regLetter = /^[a-zA-Z]+$/ //纯字母
var regSpe = /^[!@#%^&_]+$/; //特殊字符
//包含字母、数字、特殊字符
var _regNum = /\d+/;
var _regLetter = /[a-zA-Z]+/
var _regSpe = /[!@#%^&_]+/;
//当键盘弹起时执行函数
$("txt").onkeyup = function(){
var psw = this.value;
//先让三个span颜色还原
for(var i=0; i < $("box").children.length; i++){
$("box").children[i].style.background = "#bbb";
}
当密码长度小于3时,结束函数体
if(psw.length<3) {
return;
}
if(regNum.test(psw) || regLetter.test(psw) || regSpe.test(psw)){ //弱
$("box").children[0].style.background = "green";
}else if(_regNum.test(psw) && _regLetter.test(psw) && _regSpe.test(psw)){ //强
$("box").children[2].style.background = "green";
}else{ //中
$("box").children[1].style.background = "green";
}
}