最简单表单验证的实现方式

表单验证一直是一些前端掌握不精确的人的痛处，我也试了很多方法，不生效是很难受的过程，碰过很多壁，才搞出来的，给大家分享一下心得。

<body>中是这么写的

                <div class="form-group">
                    <label for="exampleInputEmail1" class="col-sm-2 control-label">账号：</label>
                 	<div class="col-sm-10">
                    <input class="form-control" id="admin" placeholder="请输入用户账号" type="text" name="userAccount" autocomplete="off" onBlur="checkUserName()" oninput="checkUserName()">  
                    <span class="default" id="nameErr"></span> 						
                	<br />
                	</div>
                </div> 
                  
                <div class="form-group">
    			 	<label for="exampleInputPassword1" class="col-sm-2 control-label">密码：</label>
    			 	<div class="col-sm-10">
                    <input class="form-control" type="password" id="password" placeholder="请输入用户密码" name="userPassword" onBlur="checkPassword()" oninput="checkPassword()">  
                	<span class="default" id="passwordErr"></span> 
                	<br />
                	</div>
                </div>
                 
                <div class="form-group">
                    <label for="exampleInputEmail1" class="col-sm-2 control-label">昵称：</label>
                    <div class="col-sm-10">
                    <input class="form-control" type="text" id="name" name="userEname" placeholder="请输入用户昵称"  autocomplete="off" onBlur="checkName()" oninput="checkName()">  
                	<span class="default" id="nameName"></span>                 
                	</div>
                </div>

然后最关键的JS是这么写的

	//用户账号验证
    function checkUserName(){ 
		  var username = document.getElementById('admin'); 
		  var errname = document.getElementById('nameErr');  
		  var pattern = /^[1][3,4,5,7,8][0-9]{9}$/;  //请输入正确的手机号格式
		  if(username.value.length == 0){ 
		    errname.innerHTML="账号不能为空"
		    errname.className="error"
		    return false; 
		    } 
		  if(!pattern.test(username.value)){ 
		    errname.innerHTML="请输入正确的账号(手机号)格式"
		    errname.className="error"
		    return false; 
		    }else{ 
		     errname.innerHTML="";
		     errname.className="success"; 
		     return true; 
		     } 
		  } 
	//密码验证
	function checkPassword(){ 
	  var userpasswd = document.getElementById('password'); 
	  var errPasswd = document.getElementById('passwordErr'); 
	  var pattern = /^\w{6,12}$/; //密码要在6-8位 
	  if(!pattern.test(userpasswd.value)){ 
	    errPasswd.innerHTML="密码的范围应在6-12位"
	    errPasswd.className="error"
	    return false; 
	    } 
	   else{ 
	     errPasswd.innerHTML="";
	     errPasswd.className="success"; 
	     return true; 
	     } 
	  } 
	
	//名称验证
	function checkName(){ 
      var name = document.getElementById('name'); 
	  var nameName = document.getElementById('nameName'); 	  
	  if(name.value.length == 0){ 
		  	nameName.innerHTML="名称不能为空"
			nameName.className="error"
			nameName.className="success"; 
		  	
		    /* var oBtn = document.getElementById('daxigua'); 
		    oBtn.disabled = true; */ 
		    
		    return false; 
		    }else{ 
		   	nameName.innerHTML=""
			nameName.className="success"; 
		    
		   	/* var oBtn = document.getElementById('daxigua'); 
		    oBtn.disabled =false;  */
		    
		    return true; 
		 }  

	}

每一个input框对应一个function方法函数，然后最最最最最最最最关键的地方来了，因为三个函数返回的结果都是true,那么就在提交表单的按钮上写函数是这样婶的，

	function tianjia(){ 
		var result = $("#userModal02 form").serialize();  这是获取表单的数据


		if(checkUserName()&&checkPassword()&&checkName()){ 这是判断表单是否返回true

			$.post("tbuser/add",result,function(data){  
				$table.bootstrapTable("refresh");
				$("#userModal02 input").val("");    着是提交的异步方法
				$("#userModal02").modal("hide");
			});


		}else{
			return false;
		}  
	}

然后就没了，亲测可用，然后小弟我初来乍到，写的不好，请哥哥姐姐（不对，这个行业好像没有女程序猿），好吧请各位哥哥们多多指点迷津。

最简单表单验证的实现方式

猜你喜欢