正则的运用 -- 判断密码的强度

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";
	}
}