JavaScript表单验证一_onblur="checked()-优快云博客

本文介绍了一个简单的HTML页面，该页面包含一个注册表单及相应的JavaScript脚本用于前端验证。验证包括检查用户名（长度需在3到16个字符之间）、密码（长度需在6到16个字符之间）及其一致性。

<html>
	<head>
		<title></title>
		<meta charset="UTF-8" />
		<script type="text/javascript">
			function ge(itemId){
				return document.getElementById(itemId);
			}
			function checkUser(username){
				var msg = ge('userMsg');
				//判断用户名不能为空
				if(username==''){
					//alert('用户名不能为空');
					msg.innerHTML = '用户名不能为空';
					msg.style.color = 'red';
					return false;
				}
				//判断用户名长度是否为3~16位
				if(username.length<3||username.length>16){
					//alert('用户名长度必须在3~16位之间');
					msg.innerHTML = '用户名长度必须在3~16位之间';
					msg.style.color = 'red';
					return false;
				}else{
					msg.innerHTML = '用户名可用';
					msg.style.color = 'green';
					return true;
				}
			}
			
			function checkPwd(pwd){
				var msg = ge('pwdMsg');
				//判断密码不能为空
				if(pwd==''){
					//alert('密码不能为空');
					msg.innerHTML = '密码不能为空';
					msg.style.color = 'red';
					return false;
				}
				//判断密码长度是否为6~16位
				if(pwd.length<3||pwd.length>16){
					//alert('密码必须在6~16位之间');
					msg.innerHTML = '密码必须在6~16位之间';
					msg.style.color = 'red';
					return false;
				}else{
					msg.innerHTML = '密码可用';
					msg.style.color = 'green';
					return true;
				}
			}
			
			function checkRePwd(repwd){
			var msg = ge('repwdMsg');
				//判断确认密码不能为空
				if(repwd==''){
					//alert('确认密码不能为空');
					msg.innerHTML = '确认密码不能为空';
					msg.style.color = 'red';
					return false;
				}
				
				//判断确认长度是否为6~16位之间
				if(repwd.length<3||repwd.length>16){
					//alert('确认密码必须在6~16位之间');
					msg.innerHTML = '确认密码必须在6~16位之间';
					msg.style.color = 'red';
					return false;
				}
				
				if(repwd!=document.reg.password.value){
					//alert('两次输入的密码不一致');
					msg.innerHTML = '两次输入的密码不一致';
					msg.style.color = 'red';
					return false;
				}else{
					msg.innerHTML = '确认密码可用';
					msg.style.color = 'green';
					return true;
				}
			}
			////验证表单是否正确
			function checkForm(){
				var uResult = checkUser(document.reg.username.value);
				var pResult = checkPwd(document.reg.password.value);
				var rpResult = checkRePwd(document.reg.repassword.value);
				
				if(uResult&&pResult&&rpResult){
					return true;
				}else{
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form action="" method="get" name="reg" onsubmit='return checkForm();' >
			用户名：<input type='text' name='username' onblur='checkUser(this.value)'/><span id='userMsg'></span><br />
			
			密码：<input type='password' name='password' onblur='checkPwd(this.value)'/><span id='pwdMsg'></span><br />
			
			确认密码:<input type='password' name='repassword' onblur='checkRePwd(this.value)' /><span id='repwdMsg'></span><br />
			
			<input type='submit' name='sub' value='注册' />
		</form>
	</body>
</html>