DOM操作表单验证和提交

321 阅读1分钟
<!--
表单提交两种方法:
(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>

我目前是在职java开发,如果你现在也想学习java开发技术,在入门学习java的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的java学习交流裙:前面:893 中间:241 后面:279。里面聚集了一些正在自学java的初学者,转行者,初阶者,我这里也有我做java技术这段时间整理的一些java学习手册,java大厂面试题,java语法pdf,需要的话都可以找裙猪获取。