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>

		<!--

        	作者：blowing1inthewind@126.com

        	时间：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显示表单的提交验证

最新文章

热门文章
