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

最新推荐文章于 2020-10-09 21:47:43 发布

wy_0928

最新推荐文章于 2020-10-09 21:47:43 发布

阅读量569

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47811125

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
表单提交两种方法：
（1）修改默认submit，通过在form标签中定义事件οnsubmit="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 οnsubmit="return checkForm()">
			用户名称：<input type="text" name="user" οnblur="checkUser()"/>
			<span id="userspan"></span>
			<br/>
			输入密码：<input type="text" name="psw" />
			<span id="pswspan"></span>
			<br/>
			<input type="submit" value="提交数据" />
		</form> 
		
		<!-- 由于submit按钮只要一点击，就会把现有表单数据打包提交给服务端，正常情况下我们需要先对现有数据进行校验，校验
		通过后再提交，校验不通过绝对不提交，又因为submit带有默认提交事件，即不经过校验直接提交，所以我们必须修改这个默认
		提交事件，那么在form标签中定义新事件οnsubmit="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" οnblur="checkUser()"/>
			<span id="userspan"></span>
			<br/>
			输入密码：<input type="text" name="psw" />
			<span id="pswspan"></span>
			<br/>
		</form> 
		
		<input type="button" value="我的提交数据" οnclick="mySubmit()" />
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（三）-09-(示例-表单校验-表单提交的两种方式)

 function checkUser(){ //alert("haha"); var
复制链接

扫一扫