Validate表單驗證插件之常用參數介紹

Validate常用的一些參數和方法

1.errorElement

修改顯示錯誤提示信息的HTML標簽。默認是<label>，可以指定為<span>...。

	$("#formId").validate({ 
		errorElement:"span"
	});	

　　

2.errorClass

修改顯示錯誤信息的HTML標簽的class屬性。默認是error。

	$("#formId").validate({ 
		errorClass:"errors"
	});

　　

3.errorPlacement

自定義錯誤信息的提示位置。默認是在這個驗證元素的第一個input元素后追加。因為radio和CheckBox會有多個input元素，還有select元素沒有input元素，所以利用這個方法來自定義提示位置。

	$("#formId").validate({ 		
		/*參數error是執行該函數的錯誤信息，element是執行該函數的錯誤信息的元素*/			
		errorPlacement: function (error, element) { /* 指定錯誤信息位置 */
			/* 如果是radio或checkbox */
			if (element.is(':radio') || element.is(':checkbox')||element.is('select')) { 
				error.appendTo(element.parent()); /* 將錯誤信息添加當前元素的父結點后面 */
			} else {
				error.insertAfter(element);
			}
		}	
	});

資源網站搜索大全https://55wd.com

4.errorLabelContainer

指定錯誤信息具體位置。演示二中有演示。

	$("#formId").validate({ 
	    /*將錯誤信息統一放在class屬性為error的div容器中*/
		errorLabelContainer: $("#formId div.error")/*用於演示二中的第一個表單，只用了div作為錯誤信息的容器*/
		/* errorLabelContainer: $("ol", container),  把錯誤信息放到ol中 */
		/*這兩種方式都可以*/
	});

　　

5.errorContainer

指定錯誤信息容器。它適用於演示二中的第二個表單。div是父級元素，用errorContainer指定該元素。而子級元素還有ol li，用errorLabelContainer指定。

	$("#formId").validate({ 
	   /*class屬性為container的div容器*/
	   errorContainer:$('div.container')
	});	

　　

6.wrapper

可以在錯誤信息外用其它HTML標簽包裝一層。

	$("#formId").validate({ 					
		wrapper: 'li' /* 含義是使用li標簽把errorElement包起來 */	
	});	

　　

7.success

每個元素驗證通過后執行的函數。

如果后邊是字符串，默認會當作一個css類。

	$("#formId").validate({
	  success:String,Callback
	});	

　　

還可以是一個函數。

	$("#formId").validate({
		success: function(label) {
	      	    label.html(" ").addClass("checked");
	        }	
	});					
		

　　

8.debug

只驗證，不提交表單。(調試十分方便)

	$("#formId").validate({
	   debug:true
	});	

　　

如果一個頁面多個表單想設置成debug，那么

	$.validator.setDefaults({
	  debug:true
	});	

　　

9.ignore

忽略某些元素不驗證。

	$("#formId").validate({
		ignore:":hidden"
	});					
		

　　

10.showErrors(errorMap,errorList)

處理錯誤的方法，在驗證錯誤后，回調用該方法，通過這個方法顯示錯誤信息。

errorMap:json數據，key:input元素的id屬性,value:message。

errorList:校驗錯誤的元素列表。

 

11.$.validator.setDefaults({});

攔截表單驗證成功后的提交表單事件，執行完函數中的代碼在提交表單。

	$.validator.setDefaults({
		  submitHandler: function() {
			  alert("成功！");/* 提示成功 */
			  $("#formId").val()="";  /* 清空form表單 */
		  }
	});	

　　

12.使用其它方式代替默認的submit

	$(document).ready(function() {
	 $("#formId").validate({
	        submitHandler:function(form){
	            alert("提交事件!");   
	            form.submit();
	        }    
	    });
	});	

　　

13.重置表單

	$(document).ready(function() {
	 var validator = $("#formId").validate({
	        submitHandler:function(form){
	            alert("成功");   
	            form.submit();
	        }    
	    });
	    $("#reset").click(function() {
	        validator.resetForm();
	    });
	
	});	

　　

14.自定義validate驗證規則

實例

	// 電話號碼驗證    
	jQuery.validator.addMethod("isTel", function(value, element,param) {    
	  var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    
	  return this.optional(element) || (tel.test(value));    
	}, "請正確填寫您的電話號碼。");	

　　

說明

addMethod(name,method,message)方法：

參數name 是添加的驗證規則的名字

參數method是一個函數,接收三個參數(value,element,param) value 是元素的值,element是元素本身 param是參數

參數message是自定義錯誤提示信息