js显示表单的提交验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			document.onkeydown=function(event){
				//获取键盘的回车键
				if(event.keyCode==13){
					var sh=show();
					if(sh!=false){
						//如果非空验证通过，则提交表单
						document.forms[0].submit();
					}
				}
			}
			
			function show(){
				//获取用户名
				var name=document.getElementById('username');
				//获取密码
				var pwd=document.getElementById('password');
				//获取确认密码
				var repwd=document.getElementById('repassword');
				//获取年龄
				var ageObj=document.getElementById('age');	
				//获取学历
				var eduObj=document.getElementById('edu');
				
				//验证用户名是否为非空，如果为空
				if('' == name.value || null == name.value || name.value.trim() == ''){
					//获取提示信息行
					var userSpanObj = document.getElementById('userSpan');
					//打印提示信息
					userSpanObj.innerHTML = "<font color='red'>用户名不能为空!!!</font>";
					//获取鼠标焦点
					name.focus();
					return false;
				}else{
					//如果为非空，获取提示信息行
					var userSpanObj = document.getElementById('userSpan');
					//提示信息为空
					userSpanObj.innerHTML = "";
					
				}
				
				//验证密码是否为非空，如果为空
				if('' == pwd.value || null == pwd.value || pwd.value.trim() == ''){
					//获取提示信息行
					var pwdSpanObj = document.getElementById('pwdSpan');
					//打印提示信息
					pwdSpanObj.innerHTML = "<font color='red'>密码不能为空!!!</font>";
					//获取鼠标焦点
					pwd.focus();
					return false;
				}else{
					//如果为非空，获取提示信息行
					var pwdSpanObj = document.getElementById('pwdSpan');
					//提示信息为空
					pwdSpanObj.innerHTML = "";
				}
				
				//验证确认密码是否为非空，如果为空
				if ('' == repwd.value || null == repwd.value || repwd.value.trim() == '') {
					//获取提示信息行
					var repwdSpanObj = document.getElementById('repwdSpan');
					//打印提示信息
					repwdSpanObj.innerHTML = "<font color='red'>确认密码不能为空!!!</font>";
					//获取鼠标焦点
					repwd.focus();
					return false;
				} else{
					//如果为非空，获取提示信息行
					var repwdSpanObj = document.getElementById('repwdSpan');
					//提示信息为空
					repwdSpanObj.innerHTML = "";
				}
				
				//如果密码的输入不一致
				if (repwd.value!=pwd.value) {
					//获取提示信息行
					var repwdSpanObj = document.getElementById('repwdSpan');
					//打印提示信息
					repwdSpanObj.innerHTML = "<font color='red'>密码不一致!!!</font>";
					//获取鼠标焦点
					repwd.focus();
					return false;
				} else{
					//如果密码的输入一致，获取提示信息行
					var repwdSpanObj = document.getElementById('repwdSpan');
					//提示信息为空
					repwdSpanObj.innerHTML = "";
				}
				
				//验证年龄是否为非空，如果为空
				if('' == ageObj.value || null == ageObj.value || ageObj.value.trim() == ''){
					//获取提示信息行
					var ageSpanObj = document.getElementById('ageSpan');
					//打印提示信息
					ageSpanObj.innerHTML = "<font color='red'>年龄不能为空!!!</font>";
					//获取鼠标焦点
					ageObj.focus();
					return false;
				}else{
					//如果为非空，获取提示信息行
					var ageSpanObj = document.getElementById('ageSpan');
					//提示信息为空
					ageSpanObj.innerHTML = "";
				}
				
				//如果option的属性value为0，则意味着未选择
				if(0==eduObj.value){
					var eduSpanObj = document.getElementById('eduSpan');
					eduSpanObj.innerHTML = "<font color='red'>学历不能为空!!!</font>";
					return false;
				}else{
					var eduSpanObj = document.getElementById('eduSpan');
					eduSpanObj.innerHTML = "";
				}
				return true;
			}
		</script>
	</head>
	<body>
		<!--
        	作者：[email protected]
        	时间：2018-07-01
        	描述：表单的提交方式必须为get方式
        -->
		<form action="demo04.html" method="get">
			<table align="center" width="500px" border="0">
				<tr>
					<td>用户名：</td>
					<td><input type="text" id="username"  name="username"/></td>
					<td>
						<span id="userSpan"></span>
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" id="password" name="password"/></td>
					<td>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="text" id="repassword" name="repassword"/></td>
					<td>
						<span id="repwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>年龄：</td>
					<td><input type="text" id="age" name="age"/></td>
					<td>
						<span id="ageSpan"></span>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" checked="checked"/>男
						<input type="radio" name="sex"/>女
					</td>
				</tr>
				<tr>
					<td>学历：</td>
					<td>
						<select id="edu" name="edu">
							<option value="0">--请选择--</option>
	            			<option value="1">小学</option>
	                        <option value="2">中学</option>
	                        <option value="3">大学</option>
		            	</select><br/>
					</td>
					<td>
						<span id="eduSpan"></span>
					</td>
				</tr>				
				<tr>
					<td colspan="3" align="center">
						<input type="submit" value="注册" onclick="return show()" />
						<!--<button onclick="return show()">注册</button>-->
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
js显示表单的提交验证

猜你喜欢
