jQuery.validate 常用方法及需要注意的問題_jquery

1.用其他方式替代默認的SUBMIT

複製代碼 代碼如下:

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){         form.submit ();
        }   
    });
});


使用ajax

程式碼如下:

 $(".selector").validate({      submitHandler: function(form)  submitHandler: function(form) .ajaxSubmit();        }   })

可以設定validate的預設值，寫法如下：

可以設定validate的預設值，寫法如下：



程式碼如下:

$.validator.setDefaults({

 submitHandler: function(form) { alert("submitted!");form.submit(form) { alert("submitted!");form.submit() ); }});如果想提交表單, 需要使用form.submit()而不要使用$(form).submit() 2.debug，只驗證不提交表單

如果這個參數是true，那麼表單不會提交，只進行檢查，調試時十分方便

複製程式碼

程式碼如下:

$().ready(function() {

 $("#signupForm").validate({ debug:true    });});如果一個頁面中有多個表單都想設定變成debug，用

複製程式碼


程式碼如下:

$.validator.setDefaults({

   debug: truetrue) >3.ignore：忽略某些元素不驗證ignore: ".ignore"4.更改錯誤訊息顯示的位置errorPlacement：Callback

 Default: 把錯誤訊息放在驗證的元素後面
指明錯誤放置的位置，預設情況是：error.appendTo(element.parent());即把錯誤訊息放在驗證的元素後面
errorPlacement: function(error, element) { 
    error.appendTo(element.parent()); 
}

//範例：

複製程式碼


程式碼如下:

    姓名
   



   
       
        14/02/07
    : 5px;">
       
  . 14/07
   
    ;


     
   
       

      />
            我已閱讀並接受使用條款。
     tr >

errorPlacement: function(error, element) {
    if ( element.is(":radio") )       . 🎜>    else if ( element.is(":checkbox") )

        error.appendTo ( element.next() );
To .next() ) ;
}




程式碼的作用是：一般情況下把錯誤訊息顯示在

中，如果是radio顯示在中，如果是空格顯示在

中在內容的後面

errorClass：String 預設："error" 指定錯誤提示的css類別名，可以自訂錯誤提示的樣式

errorElement：String 預設：「label」

用什麼標籤標記錯誤，預設是label你可以改成em

errorContainer：選擇器

顯示或隱藏驗證訊息，可以自動實作隱藏有錯誤訊息出現時把Container屬性設為顯示，無錯誤時，用處不大

errorContainer: "#messageBox1, #messageBox2 ”

errorLabelContainer：Selector

把錯誤訊息統一放在一個容器裡面。
wrapper：String
用什麼標籤再包上邊的errorELement

一般這三個屬性同時使用，在一個容器中實現隱藏所有錯誤提示的功能，並且沒有資訊時自動

errorContainer: "div.error",

errorLabelContainer: $("#signupForm div.error"),
包裝器: "li"

5更改錯誤訊息顯示的樣式

設定錯誤提示的樣式，可以增加圖示顯示，在該系統中已經建立了一個validation.css專門用於維護校驗文件的樣式

複製程式碼

程式碼如下：input.error {pred: 1px Solidred; }label.error {  背景：url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  左內邊距：16px；

  底部填滿：2px;

  字體粗細：粗體；

  顏色：#EA5200;

}

label.checked {

  背景：url("./demo/images/checked.gif") no-repeat 0px 0px;

}

}

}
}
}
}
}
}

}}

}
}

6個字段驗證透過執行函數success：String,Callback要驗證的元素通過驗證後的動作，如果跟一個字串，就可以當做一個css類，也可以跟一個函數

複製程式碼程式碼如下：

success: function(label) {
    // set   as text for IE
    label.html(" ").Class("checked");}

新增"valid" 到驗證元素, 在CSS中定義的樣式
success: "valid"
7驗證的觸發方式修改

下面的雖然是boolean型的，但建議除非要改為false,否則別亂添加。

onsubmit：Boolean  Default: true

提交時驗證. 設定唯false就用其他方法去驗證
onfocusout：Boolean  Default: true
失去焦點是驗證(不包含checkboxes/radio buttons)
onkeyup：Boolean  Default: true
keyup時驗證.
onclick：Boolean  Default: true
在checkboxes 和radio 點選時驗證
focusInvalid：Boolean  Default: true focusCleanup：Boolean  Default: false
如果是true那麼當未通過驗證的元素獲得焦點時，移除錯誤提示。避免和 focusInvalid 一起用

複製程式碼 程式碼如下:

// 重設表單

$(). ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
     submitHandler:function(form){
              form.submit( );
        }   
    });
    $("#reset").click(function() {  $("#reset").click(function() {  $("#reset").click(function() { 🎜>
});

8非同步驗證

remote：URL

使用ajax方式進行驗證，預設會提交目前驗證的值到遠端位址，如果需要提交其他的值，可以使用data選項

複製程式碼

程式碼如下:remote: "check-email.php" remote: {

    url: "check-email.php",     //後台處理程序

    type: "post",              //接受資料格式  
    data: {                    的資料        }

    }
}



遠端位址只能輸出 "true" 或 "false"，不能有其它輸出

9新增自訂校驗
addMethod：name, method, message
自訂驗證方法

複製程式碼

程式碼如下:

// 中文字兩個位元組.validator.addMethod("byteRangeLength", function(value, element, param) {    var length = value.length;    for(var i = 0; i 127){            length ;        } ength }, $.validator.format("請確保輸入的值在{0}-{1}個位元組之間(一個中文字算2個位元組)"));

// 郵遞區號驗證  
jQuery.validator.addMethod("isZipCode", function(value, element) {  
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵遞區號");

1.要在additional-methods.js檔案中加入或在jquery.validate.js加入
建議一般寫在additional-methods.js檔案

2.在messages_cn.js檔案新增：isZipCode: "只能包含中文字、英文字母、數字和底線",

呼叫前要加入additional-methods.js檔案的引用。

10radio和checkbox、select的驗證

1.radio的required表示必須選中一個

複製代碼 代碼如下:

 

2.checkbox的required表示必須選取

複製程式碼 程式碼如下:

checkbox的minlength表示必須選取的最小個數,maxlength表示最大的選取數,rangelength:[2,3]表示選取個數區間

複製程式碼


程式碼如下:

    3.select的required表示選取的value不能為空    複製程式碼

複製程式碼
代碼如下:



   

    Buga    Baga    Oi select的minlength表示選取的最小個數（可多選的select）,maxlength表示最大的選取個數,rangelength:[2,3]表示選取個數區間複製程式碼 程式碼如下:    Banana    Apple    Apple    Peach    Turtle