jQuery Validate 插件[表單驗證]

　　在客戶端添加信息提交表單時咱們常常須要作一些驗證，好比驗證不能爲空，驗證客戶輸入手機格式，驗證客戶輸入email，url等的格式，咱們能夠經過EL表達式結合js 進行自主驗證，今天總結一個JQuery 插件，進行簡單的驗證

     首先咱們來看一個簡單的例子,咱們須要自動驗證是否爲空及格式是否正確

<form class="form-horizontal" id="userBaseForm" method="post">
　　　　<div class="form-group form-md-line-input" >
        <label class="col-sm-2 col-xs-2 control-label" for="form_control_1"><b>用戶帳號</b></label>
	<div class="col-sm-10 col-xs-10">
	　　<input id="userNo" name="userNo" placeholder="請填寫用戶帳號(小寫字母和數字組合)，不能超過14個字符！" class="form-control" />
	　　<div class="form-control-focus"></div>
	　　<span class="help-block">請填寫用戶帳號!</span>
	</div>
       </div>
       <div class="form-group form-md-line-input" >
         <label class="col-sm-2 col-xs-2 control-label" for="form_control_1"><b>用戶名稱</b></label>
	 <div class="col-sm-10 col-xs-10">
	   　<input id="userName" name="userName" placeholder="請填寫用戶名稱，不能超過8個字符！" class="form-control" />
	 　　<div class="form-control-focus"></div>
	 　　<span class="help-block">請填寫用戶名稱!</span>
	 </div>
       </div>
       <div class="form-group form-md-line-input" >
	<label class="col-sm-2 col-xs-2 control-label" for="form_control_1"><b>角色</b></label>
	<div class="col-sm-10 col-xs-10">
	 　　<select class="form-control" data-live-search="true" name="ext1Int" id="ext1Int">
	　　　　<c:forEach items="${roles}" var="role" >
	　　　　<option value="${role.roleId}" <c:if test="${role.roleId==9}">
		selected = selected
		</c:if> >${role.roleName}</option>
	　　　　</c:forEach>
	　　</select>
	</div>
　　　　</div>
       <div class="form-group form-md-line-input" >
	<label class="col-sm-2 col-xs-2 control-label" for="form_control_1"><b>聯繫電話</b></label>
	<div class="col-sm-10 col-xs-10">
	　　<input id="userTel" name="userTel" placeholder="請填寫聯繫電話名稱，不能超過11個字符！" class="form-control"/>
	　　<div class="form-control-focus"></div>
	　　<span class="help-block">請填寫聯繫電話!</span>
        </div>
       </div>
       <div class="form-group form-md-line-input" >
	<label class="col-sm-2 col-xs-2 control-label" for="form_control_1"><b>電子郵箱</b></label>
	<div class="col-sm-10 col-xs-10">
	　　 <input id="userEmail" name="userEmail" placeholder="請填寫電子郵箱名稱，不能超過20個字符！" class="form-control" />
	 　　<div class="form-control-focus"></div>
	　　<span class="help-block">請填寫電子郵箱!</span>
        </div>
       </div>
</form>

　　而後js用validate

	<script type="text/javascript">
	   $(function(){
		   $("#userBaseForm").validate({
	   			  errorElement（用什麼標籤標記錯誤，默認是 label，咱們設置爲span）: 'span',

	   			  errorClass（指定錯誤提示的 css 類名，能夠自定義錯誤提示的樣式。）:'help-block help-block-error',

	   			  focusInvalid（提交表單後，未經過驗證的表單（第一個或提交以前得到焦點的未經過驗證的表單）會得到焦點。）: false,
　　　　　　　　　　　　　　　　　　　　 ignore(忽略某些信息不驗證): '',

	   			  rules（要求）: {userNo: {required（必填字段）: true,pattern（驗證格式）:/^[a-z\d]{5,15}$/,remote（異步驗證）:{type:'post',url:CONSTANT_PATH+'/user/nameVaild',data: {userNo:function(){return $("#userNo").val();}},dataType: "json",dataFilter:function (data){return data;}}},
	   				      userName:{required: true,pattern:/^[\u4e00-\u9fa5]{2,10}$/},userTel:{required: true,mobileCN:true},userEmail:{required: true,email:true}},
	   			  messages（不符合規則是顯示的信息）:{userNo:{pattern（驗證格式不經過時顯示的信息）:'用戶帳號格式非法!',remote（異步驗證不成功時顯示的信息）:'該帳號已經存在！'},userName:{pattern:'真實用戶名格式非法，必須是中文!'}},
	   			  errorPlacement: function(error,element){error.insertAfter(element);},
	    		          highlight: function(element) {$(element).closest('.form-group').addClass('has-error');},
				  unhighlight: function(element) {$(element).closest('.form-group').removeClass('has-error');},
				  success（成功後對應操做）: function(label) {label.closest('.form-group').removeClass('has-error');},
	   			  submitHandler（提交對應操做）:function(form){（用ajax方式提交form表單）
	   				 $.ajax({url:CONSTANT_PATH+"/user/addUserBase",type:"POST",data:$("#userBaseForm").serialize(),
	   					     beforeSend:function(){layer.load();},
	   					     success:function(data){
	   					    	 if(data.flg) {
	   					    		parentSucc();
	   					    		window.parent.reloadFrame();
	   					    		closeParentDialog();
	   					          } 
	   					    	 else{
	   					    		parentError(data.errorMsg); 
	   					    	 }
	   					     }});
	   			      return false;
	   			  }});
	   });
	   function uptInfoForm(){
	      $("#userBaseForm").submit();
	   }
	</script>

　　這樣即可實現以下操做

 

下一篇見詳細介紹validate，該插件可在官網下載https://jqueryvalidation.org/