DOM(三)-09-(示例-表单校验-表单提交的两种方式)

<!--
表单提交两种方法:
(1)修改默认submit,通过在form标签中定义事件onsubmit="checkForm()";
(2)自定义提交,自定义个button,通过onclick事件触发,用form对象中的submit方法控制
-->

<!--以下是方法(1)-->
<html>
	<head>
		<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function checkUser(){
				
//alert("haha");
				var flag;//定义标记,用户记录用户名是否校验成功
				var oUserName = document.getElementsByName("user")[0];
				var name = oUserName.value;
//alert(name);
				var reg = new RegExp("^[a-z]{4}$","i");

				var oSpanNode = document.getElementById("userspan");
				
				if(reg.test(name)){
					
					oSpanNode.innerHTML = "用户名正确".fontcolor("blue");
					flag = true;
				}else{
					
					oSpanNode.innerHTML = "用户名错误".fontcolor("red");
					flag = false;
				}
				return flag;
			}
			
			//定义提交事件处理
			function checkForm(){
				
				//这里只需要判断校验结果是否正确即可
				if(checkUser()){
					
					return true;
				}else{
					
					return false;
				}
			}
		
		</script>
		<!-- 因为校验结果无非两种:true和false,所以这里直接在onsubmit事件中用return语句得到校验结果,如果返回的是true,
		单击"提交数据"按钮就就提交数据,如果返回的是false,单击“提交数据”不会提交数据,这里只需要明确是true还是false即可,
		其余不管,底层代码已经完成其余功能 -->
		<form onsubmit="return checkForm()">
			用户名称:<input type="text" name="user" onblur="checkUser()"/>
			<span id="userspan"></span>
			<br/>
			输入密码:<input type="text" name="psw" />
			<span id="pswspan"></span>
			<br/>
			<input type="submit" value="提交数据" />
		</form> 
		
		<!-- 由于submit按钮只要一点击,就会把现有表单数据打包提交给服务端,正常情况下我们需要先对现有数据进行校验,校验
		通过后再提交,校验不通过绝对不提交,又因为submit带有默认提交事件,即不经过校验直接提交,所以我们必须修改这个默认
		提交事件,那么在form标签中定义新事件onsubmit="checkForm()" -->
		
	</body>
</html>



<!-- ============================================================================================================= -->


<!--以下是方法(2)-->
<html>
	<head>
		<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function checkUser(){
				
				var flag;
				var oUserName = document.getElementsByName("user")[0];
				var name = oUserName.value;
				
				var reg = new RegExp("^[a-z]{4}$","i");

				var oSpanNode = document.getElementById("userspan");
				
				if(reg.test(name)){
					
					oSpanNode.innerHTML = "用户名正确".fontcolor("blue");
					flag = true;
				}else{
					
					oSpanNode.innerHTML = "用户名错误".fontcolor("red");
					flag = false;
				}
				return flag;
			}
			
			function mySubmit(){
				
				/*
				 *打开DHTML API文档,在form对象中有如下方法:
				 * submit:提交表单
				 */
				var oFormNode = document.getElementById("formid");
				if(checkUser()){//只有用户名正确才提交
					
					oFormNode.submit();
				}
			}
		
		</script>

		<form id="formid">
			用户名称:<input type="text" name="user" onblur="checkUser()"/>
			<span id="userspan"></span>
			<br/>
			输入密码:<input type="text" name="psw" />
			<span id="pswspan"></span>
			<br/>
		</form> 
		
		<input type="button" value="我的提交数据" onclick="mySubmit()" />
	</body>
</html>

你可能感兴趣的:(DOM(三)-09-(示例-表单校验-表单提交的两种方式))