js简单表单验证

<!DOCTYPE html>
<html>
  <head>
    <title>测试</title>
<script type="text/javascript">
	  window.onload=function(){
	    var span = document.getElementById("userSpan");
	     var user  = document.getElementById("user");
		 user.onblur=function(){
		   //var user = document.getElementById("user");
		   var userVal = user.value;
		   if(userVal){
		     if(userVal.length>14||userVal.length<6){
			   span.innerText="用户名不能少于6位且不能大于14位";
			 }else{
			   var regExp = /^[0-9a-zA-Z]+$/;
			   var ok = regExp.test(userVal);
			   if(ok){
			     //alert("");
			   }else{
			     span.innerText="用户名必须由字母数字组成";
			   }
			 }
		   }else{
		     span.innerText="用户名不能为空";
		   }
		 };
		 user.onfocus=function(){
		   if(span.innerText != ""){
		   //清空非法内容
		     user.value="";
			 //清空span非法提示
			 span.innerText="";
		   }
		 };
		 var firstBox = document.getElementById("firstBox");
		 var allBox = document.getElementsByName("运动");
		 firstBox.onclick = function(){
		   
		   for(var i=0;i<allBox.length;i++){
		     if(firstBox.checked){
			   allBox[i].checked = true;
			 }else{
			   allBox[i].checked = false;
			 }
		   }
		 };
		 for(var i=0;i<allBox.length;i++){
		   allBox[i].onclick = function(){
		     var count = 0;
		     for(var i=0;i<allBox.length;i++){
			   if(allBox[i].checked){
			     count++;
			   }  
			 }
			 if(allBox.length==count){
			   firstBox.checked=true;
			 }else{
			   firstBox.checked=false;
			 }
		   };
		 }
		 //密码校验
		var pwd=document.getElementById("pwd");
		var pwdSpan = document.getElementById("pwdSpan");
		pwd.onblur=function(){
		  var pwdVal = pwd.value;
		  if(pwdVal != ""){
		    if(pwdVal.length<6){
			  pwdSpan.innerText="密码不能小于6位";
			}else{
			  var regExp = /^[a-zA-Z0-9]+$/;
			  var ok =regExp.test(pwdVal);
			  if(!ok){
			    pwdSpan.innerText="密码必须由数字字母组成";
			  }
			}
		  }else{
		    pwdSpan.innerText="密码不能为空";
		  }
		};
		pwd.onfocus=function(){
		  if(pwdSpan.innerText){
		    //清空非法密码
			pwd.value="";
			//清空密码非法提示
			pwdSpan.innerText="";
		  }
		};
		//确认密码校验
		var ensureSpan = document.getElementById("ensureSpan");
		var ensurePwd = document.getElementById("ensurePwd");
		ensurePwd.onblur=function(){
		  if(ensurePwd.value!=pwd.value){
		    ensureSpan.innerText="两次密码不一致,请重新确认";
		  }
		};
		ensurePwd.onfocus=function(){
		  if(ensureSpan.innerText){
		    //清空非法确认密码
			ensurePwd.value="";
			//清空提示信息
			ensureSpan.innerText="";
		  }
		};
	  };
</script>
  </head>
  <body>
    <form action="index.html" method="post">
	  用户名&ensp;&ensp;<input type="text" name="username" id="user"/><span id="userSpan"></span><br/>&ensp;&ensp;&ensp;&ensp;<input type="text" name="password" id="pwd"/><span id="pwdSpan"></span><br/>
	  确认密码<input type="text" id="ensurePwd"/><span id="ensureSpan"></span><br/>

	  爱好<br/>
	  &ensp;&ensp;<input type="radio" name="爱好" value="吃饭"/>吃饭<br/>
	  &ensp;&ensp;<input type="radio" name="爱好" value="睡觉"/>睡觉<br/>
	  &ensp;&ensp;<input type="radio" name="爱好" value="打豆豆"/>打豆豆<br/>
	  喜欢的运动<br/>
	  全选&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="firstBox" /><br/>
	  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="checkbox" name="运动" value="篮球"/>篮球<br/>
	  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="checkbox" name="运动" value="足球"/>足球<br/>
	  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="checkbox" name="运动" value="羽毛"/>羽毛<br/>

	  喜欢的城市<br/>
	  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<select>
		<option>北京</option>
		<option>上海</option>
		<option>杭州</option>
		<option>河北</option>
	  </select><br/><br/><br/>
	  <input type="reset" value="reset" onclick="reset()"/>&ensp;&ensp;&ensp;&ensp;<input type="submit" value="submit" onclick="submit()"/>

	</form>
  </body>
</html>		
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值