表单验证 - 爱码网

表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证,雪豹软件工作室,javascript</title>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<link rel="stylesheet" type="text/css" href="body.css">

<style type="text/css">
		 
.userNameDefaultMes {
	border-style:solid; border-width:3px; border-color:black;width: 300px;height: 30px;
}

.userNameErrorMes {
	border-style:solid; border-width:3px; border-color:red;background-color: #EED5D2;
}
.userNameOKMes {
	border-style:solid; border-width:3px; border-color:#8E388E;background-color:yellow;
}
</style>

<script type="text/javascript">

	function checkUserName(){
		
		var userName = document.getElementById("userName");
		var userNameMes = document.getElementById("userNameMes");
		
		if (userName.value == "") {
			userNameMes.innerHTML = "用户名不能为空！";
			//className和class的用法可以参考http://www.jb51.net/article/28118.htm(js中设置元素class的三种方法小结)
			userNameMes.className = "userNameErrorMes";
			//userNameMes.setAttribute("class", "userNameErrorMes");
			//userNameMes.setAttribute("className", "userNameErrorMes");
			return false;
		}
		if (userName.value.length < 3 || userName.value.length > 12) {
			userNameMes.innerHTML = "用户名必须是3-12个字符！";
			userNameMes.className = "userNameErrorMes";
			return false;
		}
		userNameMes.innerHTML = "用户名通过！";
		userNameMes.className = "userNameOKMes";
		return true;
	}
	
	function showUserNameDefaultMes(){
		
		/*
			刚才在写的时候遇到了一个问题，一个控件内同时有style、id、class这3个属性的话，样式的优先级问题，暂
			时没时间深究这个问题了，先放一放，以后有时间再回过头来追究这个问题。
		*/
		
	/*	if(checkUserName()){
			userNameMes.innerHTML = "用户名通过！";
			userNameMes.className = "userNameOKMes";
			return;
		}
	*/
		var userNameMes = document.getElementById("userNameMes");
		userNameMes.innerHTML = "用户名必须是3-12个字符(包括字母，数字，下划线)";
		userNameMes.className = "userNameDefaultMes";
	}

</script>

</head>
<body>
<div style="text-align: center;">
	<form action="calculator.html" method="get">
		用户名<input type="text" id="userName" name="userName" onblur="checkUserName()" onfocus="showUserNameDefaultMes()">
		<span id="userNameMes" class="userNameDefaultMes">用户名必须是3-12个字符(包括字母，数字，下划线)</span>
		<br><br>
		 密码<input type="password" id="pwd" name="pwd" onblur="" onfocus="">
		<span>密码必须是6-12个字符(包括字母，数字，下划线)</span>
		<br><br>
	</form>
	</div>
</body>
</html>
表单验证