表单验证

最新推荐文章于 2025-06-21 22:19:35 发布
原创最新推荐文章于 2025-06-21 22:19:35 发布 · 210 阅读
0 ·
CC 4.0 BY-SA版权
demo 专栏收录该内容
5 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 

 
 
<!--/** 

满足以上条件 
 1、弹出所有的内容 
 2、提交表单 
否则 
1、说明错误原因 
2、不能提交表单 */ -->
	</head>
	<body>
		<form id='myform' name="myform"> 
			
				   姓名:<input type="text" id="uname" name="uname" />
				   <span id="userWar" style="color:red;"></span>
				   <br /> 
		    密码:<input type="password" id="upwd" name="upwd" />
		    <span id="pwdWar" style="color:red;"></span>
		    <br /> 
		    年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 
		         <input type="radio" name="uage" value="1"/>你懂得
		         <span id="ageWar" style="color:red;"></span>
		         <br /> 
		    爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 
		         <input type="checkbox" name="ufav" value="爬床"/>爬床 
		         <input type="checkbox" name="ufav" value="代码"/>代码
		         <span id="hobbyWar" style="color:red;"></span>
		         <br /> 
		    来自:<select id="ufrom" name="ufrom"> 
		            <option value="-1" selected="selected">请选择</option> 
		            <option value="0">北京</option> 
		            <option value="1">上海</option> 
		         </select>
		          <span id="youFrom" style="color:red;"></span>
		         <br /> 		    
		    <button type="button" onclick="return checkForm();">提交</button> 
		    <button type="reset" onclick="resetForm();">重置</button> 
		</form> 
		<script type="text/javascript">
			function checkForm(){
				var userWar=document.getElementById("userWar");//用于提醒用户的用户名错误
				var pwdWar=document.getElementById("pwdWar");//用于提醒用户的密码错误
				var ageWar=document.getElementById("ageWar");//用于年龄提醒
				var upwd=document.getElementById("upwd").value;//获取用户的密码
				var userName=document.getElementById("uname").value;////获取用户的名字
				var nameFlag=true;
				var pwdFlag=true;
				var userPwdFlag=true;
				var ageFlag=true;
				var hobby=true;
				var myPlace=true;
			    console.log(userName.trim());
			    //判断用户名
                if(userName.trim()==" "||userName.length<6){
                
                	userWar.innerHTML="您输入的用户名或长度有误！";
                		setTimeout(function(){
                		userWar.innerHTML="";
                	},2000)
                	 nameFlag=false;
                }
                    //判断密码
                if(upwd.trim()==" "||upwd.length<6){
                
                	pwdWar.innerHTML="您输入的密码或长度有误！";
                		setTimeout(function(){
                		pwdWar.innerHTML="";
                	},2000)
                		
                	pwdFlag=false;
                }
                if(userName.length>0 && upwd.indexOf(userName)>=0){ 	         
                	pwdWar.innerHTML="您输入的密码包含用户名！";
                		setTimeout(function(){
                		pwdWar.innerHTML="";
                	},2000)
                		
                	userPwdFlag= false;
                }	
			
			   //年龄的选择
			   var uage=document.getElementsByName("uage");
			   var age;
			   for(var i=0;i<uage.length;i++){
			     uage[i].addEventListener("click",function(){
			     	   var index= this.value;
			     	   console.log(index);			     	 
			   	    	age=index;	
			   	    if(age==0){
			   		ageWar.innerHTML="必须选择为你懂得";
			   	  	setTimeout(function(){
                	ageWar.innerHTML="";
                	},2000)              		
                	ageFlag= false;				   	 
			  	 }
			     })               
			   	}
			var ufav=document.getElementsByName("ufav");//获取用户的爱好
			var hobbyWar=document.getElementById("hobbyWar");
			   //判断爱好所选的状态
			   var hob="";
			  for(var i=0;i<ufav.length;i++){
			  	if(ufav[i].checked){
			  		hob+=ufav[i].value+",";			  		
			  	}
			  }
			  if(hob==""){
			  	hobbyWar.innerHTML="至少要有一个爱好";
			  	 	setTimeout(function(){
                	hobbyWar.innerHTML="";
                	},2000)   
                	hobby=false;
			  }
//			  console.log(hob);
             var ufrom=document.getElementById("ufrom");
             var youFrom= document.getElementById("youFrom");
             var comFom="";
             for(var i=0;i<ufrom.length;i++){
             	if(ufrom.options[i].selected==true){           		
             		comFom=ufrom.options[i].text;
//           		console.log(comFom);
             	}
             }
             if(comFom=="请选择"){
             		youFrom.innerHTML="*你来自火星吗?";
			  	 	setTimeout(function(){
                	youFrom.innerHTML="";
                	},2000)  
                	myPlace=false;
             }
             var myform=document.getElementById("myform");//提交myform
             if( nameFlag&&pwdFlag&&userPwdFlag&&ageFlag&&hobby&&myPlace){
                   alert("你的用户名是:"+userName+"-->"+"你的密码"+upwd+"-->"+age+"-->"+hob);
				 	 myform.action="http://www.baidu.com"; 
				 	   myform.submit(); 
				 }
			}
				
			   
		</script>
	</body>
</html>