jQuery驗證框架（一） 可選項 (jQuery validation)

時間  2019-11-06
標籤 jquery 驗證 框架 可選項 validation 欄目 JQuery 简体版
原文   原文鏈接

jQuery驗證框架

javascript

Html代碼
  1. <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  2. <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function(){  
  5.         $("#textForm").validate();  
  6.     });  
  7. </script>  
  8. <form class="cmxform" id="commentForm" method="get" action="">  
  9.     Name<input id="cname" name="name" size="25" class="required" minlength="2" />  
  10.         <input class="submit" type="submit" value="Submit"/>  
  11. </form>  


此文謹以以上js片斷開始介紹jQuery Validation。
驗證從這個方法開始：validate( [options] )
1、可選項( options )
[1]  debug      類型：Boolean    默認：false
      說明：開啓調試模式。若是爲true，表單不會提交，並且會在控制檯顯示一些錯誤消息（須要Firebug或者Firebug lite）。當要阻止表單默認提交事件，嘗試去開啓它。html

Js代碼
  1. $(".selector").validate({  
  2.    debug: true  
  3. })  



[2]  submitHandler      類型：Callback    默認：default (native) form submit
      說明：當表單經過驗證，提交表單。回調函數有個默認參數formjava

Js代碼
  1. $(".selector").validate({  
  2.    submitHandler: function(form) {  
  3.        // do other stuff for a valid form  
  4.     form.submit();  
  5.    }  
  6. })  



[3]  invalidHandler      類型：Callback
      說明：當未經過驗證的表單提交時，能夠在該回調函數中處理一些事情。該回調函數有兩個參數：第一個爲一個事件對象，第二個爲驗證器（validator）jquery

Js代碼
  1. $(".selector").validate({  
  2.     invalidHandler: function(form, validator) {  
  3.       var errors = validator.numberOfInvalids();  
  4.       if (errors) {  
  5.         var message = errors == 1  
  6.           ? 'You missed 1 field. It has been highlighted'  
  7.           : 'You missed ' + errors + ' fields. They have been highlighted';  
  8.         $("div.error span").html(message);  
  9.         $("div.error").show();  
  10.       } else {  
  11.         $("div.error").hide();  
  12.       }  
  13.     }  
  14.  })  



[4]  ignore      類型：Seletor
      說明：當進行表單驗證時，過濾掉選擇器所選擇的表單。用了jQuery not方法（ not() ）。類型爲submit和reset的表單老是被忽略的。app

Js代碼
  1. $("#myform").validate({  
  2.    ignore: ".ignore"  
  3. })  



[5]  rules      類型：Options    默認：rules are read from markup (classes, attributes, metadata)
      說明：用戶定義的鍵/值對規則。鍵爲一個表單元素的 name屬性（或是一組單選/複選按鈕）、值爲一個簡單的字符串或者由規則/參數對（rule/parameter）組成的一個對象。能夠和 class/attribute/metadata 規則一塊兒使用。每一個規則能夠指定一個依存的驗證前提條件。框架

Js代碼
  1. $(".selector").validate({  
  2.    rules: {  
  3.      // simple rule, converted to {required:true}  
  4.      name: "required",  
  5.      // compound rule  
  6.      email: {  
  7.        required: true,  
  8.        email: true  
  9.      }/* 
  10.      email: { 
  11.          depends: function(element) { 
  12.            return $("#contactform_email:checked") 
  13.          } 
  14.      }*/  
  15.    }  
  16. })  



[6]  messages      類型：Options    默認：驗證方法默認使用的消息
      說明：用戶自定義的 鍵/值 對消息。鍵爲一個表單元素的name屬性，值爲該表單元素將要顯示的消息。該消息覆蓋元素的title屬性或者默認消息。消息能夠是一個字符串或者一個回 調函數。回調函數必須在驗證器的做用域中調用，將規則參數做爲回調函數的第一個參數，將該表單元素做爲回調函數的第二個參數，且必須返回一個字符串類型的 消息。dom

Js代碼
  1. $(".selector").validate({  
  2.    rules: {  
  3.      name: "required",  
  4.      email: {  
  5.        required: true,  
  6.        email: true  
  7.      }  
  8.    },  
  9.    messages: {  
  10.      name: "Please specify your name",  
  11.      email: {  
  12.        required: "We need your email address to contact you",  
  13.        email: "Your email address must be in the format of name@domain.com"  
  14.      }  
  15.    }  
  16. })  



[7]  groups      類型：Options
      說明：指定錯誤消息分組。一個組由一個任意的組名做爲鍵，一個由空白符分割的表單元素name屬性列表做爲值。用errorPlacement定義組消息的存放位置。ide

Js代碼
  1. $("#myform").validate({  
  2.   groups: {  
  3.     username: "fname lname"  
  4.   },  
  5.   errorPlacement: function(error, element) {  
  6.      if (element.attr("name") == "fname"   
  7.                  || element.attr("name") == "lname" )  
  8.        error.insertAfter("#lastname");  
  9.      else  
  10.        error.insertAfter(element);  
  11.    },  
  12.    debug:true  
  13.  })  



[8]  onsubmit      類型：Boolean    默認：true
      說明：提交時驗證表單。當設置爲false時，只能用其它的事件驗證。函數

Js代碼
  1. $(".selector").validate({  
  2.    onsubmit: false  
  3. })  



[9]  onfocusout      類型：Boolean    默認：true
      說明：焦點離開時驗證（單選/複選按鈕除外）。若是表單中沒有輸入任何內容，全部的規則將被跳過，除非該表單已經被標記爲無效的。工具

Js代碼
  1. $(".selector").validate({  
  2.    onfocusout: false  
  3. })  



[10]  onkeyup      類型：Boolean    默認：true
      說明：當鍵盤按鍵彈起時驗證。只要表單元素沒有被標記成無效的，不會有反應。另外，全部的規則將在每次按鍵彈起時驗證。

Js代碼
  1. $(".selector").validate({  
  2.    onkeyup: false  
  3. })  



[11]  onclick      類型：Boolean    默認：true
      說明：鼠標點擊驗證針對單選和複選按鈕。

Js代碼
  1. $(".selector").validate({  
  2.    onclick: false  
  3. })  



[12]  focusInvalid      類型：Boolean    默認：true
      說明：當驗證無效時，焦點跳到第一個無效的表單元素。當爲false時，驗證無效時，沒有焦點響應。

Js代碼
  1. $(".selector").validate({  
  2.    focusInvalid: false  
  3. })  



[12]  focusCleanup      類型：Boolean    默認：false
      說明：若是爲true，當表單獲得焦點時，移除在該表單上的errorClass並隱藏全部錯誤消息。避免與focusInvalid一塊兒使用。

Js代碼
  1. $(".selector").validate({  
  2.    focusCleanup: true  
  3. })  



[13]  meta      類型：String
      說明：若是想使用其它插件來使用元數據驗證規則，得指定相應的元數據對象。

Js代碼
  1. $("#myform").validate({  
  2.    meta: "validate"  
  3. })  
  4. <input type="text" name="email" class="{validate:{ required: true, email:true}}" />  



[14]  errorClass      類型：String    默認："error"
      說明：用此設定的樣式來定義錯誤消息的樣式。

Js代碼
  1. $(".selector").validate({  
  2.    errorClass: "invalid"  
  3. })  



[15]  validClass      類型：String    默認："valid"
      說明：設定當驗證經過時，消息顯示的樣式。

Js代碼
  1. $(".selector").validate({  
  2.    validClass: "success"  
  3. })  



[16]  errorElement      類型：String    默認："label"
      說明：用html元素類型建立錯誤消息的容器。默認的"label"有個優勢就是能在錯誤消息與無效表單之間用for屬性創建有意義的聯繫（一個經常使用的，而無論表單元素是什麼的）。

Js代碼
  1. $(".selector").validate({  
  2.    errorElement: "em"  
  3. })  



[17]  wrapper      類型：Boolean
      說明：用一個指定的元素將錯誤消息包圍。與errorLabelContainer一塊兒建立一個錯誤消息列表很是有用。

Js代碼
  1. $(".selector").validate({  
  2.    wrapper: "li"  
  3. })  



[18]  errorLabelContainer      類型：Selector
      說明：錯誤消息標籤的容器。

Js代碼
  1. $("#myform").validate({  
  2.    errorLabelContainer: "#messageBox",  
  3.    wrapper: "li"  
  4. })  



[19]  errorContainer      類型：Selector
      說明：錯誤消息的容器。

Js代碼
  1. $("#myform").validate({  
  2.    errorContainer: "#messageBox1, #messageBox2",  
  3.    errorLabelContainer: "#messageBox1 ul",  
  4.    wrapper: "li", debug:true,  
  5.    submitHandler: function() { alert("Submitted!") }  
  6. })  



[20]  showErrors      類型：Callback    默認：None,內置的顯示消息
      說明：自定義消息顯示的句柄。該回調函數有兩個參數，第一 個爲errorMap,第二個參數爲errorList，在validator對象的上下文中調用。參數只包含那些通過onblur/onkeyup驗證 的表單元素，也有多是單個元素。除此以外，你還能夠用this.defaultShowErrors()觸發默認的行爲。

Js代碼
  1. $(".selector").validate({  
  2.    showErrors: function(errorMap, errorList) {  
  3.         $("#summary").html("Your form contains "  
  4.                                    + this.numberOfInvalids()   
  5.                                    + " errors, see details below.");  
  6.         this.defaultShowErrors();  
  7.     }  
  8.  })  



[21]  errorPlacement      類型：Callback    默認：緊跟在無效表單後的標籤中
      說明：用戶自定義錯誤標籤的顯示位置。第一個參數：一個做爲jQuery對象的錯誤標籤，第二個參數爲：一個做爲jQuery對象的未經過驗證的表單元素。

Js代碼
  1. $("#myform").validate({  
  2.   errorPlacement: function(error, element) {  
  3.      error.appendTo( element.parent("td").next("td") );  
  4.    },  
  5.    debug:true  
  6.  })  



[22]  success      類型：String,Callback
      說明：若是指定它，當驗證經過時顯示一個消息。若是是String類型的，則添加該樣式到標籤中，若是是一個回調函數，則將標籤做爲其惟一的參數。

Js代碼
  1. $("#myform").validate({  
  2.    //success: "valid",  
  3.      success: function(label) {  
  4.          label.addClass("valid").text("Ok!")  
  5.      }  
  6. })  



[23]  highlight      類型：Callback    默認：添加errorClass到表單元素
      說明：將未經過驗證的表單元素設置高亮。

Js代碼
  1. $(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).fadeOut(function() {  
  4.        $(element).fadeIn()  
  5.      })  
  6.   }  
  7. })  



[24]  unhighlight      類型：Callback    默認：移除errorClass
      說明：與highlight操做相反

Js代碼
  1. $(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).addClass(errorClass);  
  4.      $(element.form).find("label[for=" + element.id + "]")  
  5.                     .addClass(errorClass);  
  6.   },  
  7.   unhighlight: function(element, errorClass) {  
  8.      $(element).removeClass(errorClass);  
  9.      $(element.form).find("label[for=" + element.id + "]")  
  10.                     .removeClass(errorClass);  
  11.   }  
  12. });  



[25]  ignoreTitle      類型：Boolean    默認：false
      說明：設置它用來跳過錯誤消息對title屬性的引用，避免Google工具欄引發的衝突。

Js代碼
  1. $(".selector").validate({  
  2.    ignoreTitle: true  
  3. }) 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程