js应验密码 _JavaScript

js验证密码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>密码</title>
		<style type="text/css">
body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}

form {
	margin: 2em;
}

#chkResult {
	margin-left: 53px;
	height: 15px;
}
</style>
<script type="text/javascript">

//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强 
function getResult(s) {
	var ls = 0;
	if (s.length < 8) {
		return ls;
	}
	
	if (s.match(/[a-z]/)){
		ls++;
	}
	if (s.match(/[0-9]/)){
	   ls++;
	} 
	 if (s.match(/[A-Z]/)){
	   ls++;
	}
	if(ls==3){
		return 4;
	}
	
	return ls
}
	var msg = new Array(5);
	msg[0] = "密码必须至少为8个字符长”。";
	msg[1] = "密码必须包括所有的字符以下类型：小写字母，大写字母和数字";
	msg[2] = "密码必须包括所有的字符以下类型：小写字母，大写字母和数字";
	msg[3] = "密码必须包括所有的字符以下类型：小写字母，大写字母和数字";
	msg[4] = "格式正确。";
function setDisplay(mark){
	var sty = new Array(5);
	sty[0] = -60;
	sty[1] = -45;
	sty[2] = -30;
	sty[3] = -15;
	sty[4] = 0;

	var col = new Array(5);
	col[0] = "gray";
	col[1] = "red";
	col[2] = "#ff6600";
	col[3] = "#ff6611";
	col[4] = "Green";

	//设置显示效果 
	var bImg = "http://bbs.blueidea.com/attachments/2006/12/7/pwdlen_dSIPeEGQWxfO.gif";//一张显示用的图片 
	var sWidth = 400;
	var sHeight = 15;
	var Bobj = document.getElementById("chkResult");

	Bobj.style.fontSize = "12px";
	Bobj.style.color = col[mark];
	Bobj.style.width = sWidth + "px";
	Bobj.style.height = sHeight + "px";
	Bobj.style.lineHeight = sHeight + "px";
	Bobj.style.background = "url(" + bImg + ") no-repeat left " + sty[mark]
			+ "px";
	Bobj.style.textIndent = "20px";
	Bobj.innerHTML = "检测提示：" + msg[mark];
}

function checkPas(){
	var pas=document.getElementById("pwd").value;
	var mark=getResult( pas);
	//alert(msg[mark]);
}
function isSame(){
	
	var pas=document.getElementById("pwd").value;
	var rePas=document.getElementById("pwd2").value;
	if(pas!=rePas){
		alert("aa");
		var Bobj = document.getElementById("errorMsg");
		Bobj.style.fontSize = "12px";
		Bobj.style.color = "red";
		Bobj.innerHTML = "两次输入密码不一致";
	}
	//AAAbb2222
}
</script>
	</head>

	<body>
		
		<form name="form1">
			<label for="pwd">
				用户密码
			</label>
			<input type="password" name="pwd" onKeyUp="setDisplay(getResult(this.value));" onblur="checkPas();"/>
			<div id="chkResult"></div>
			<br>
			<label for="pwd2">
				重复密码
			</label>
			<input type="password" name="pwd2" onblur="isSame();"/>
			<div id="errorMsg"></div>
		</form>

	</body>

</html>
//可以看附件