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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:39 PM

jqueryvalidate

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不能為空複製程式碼

複製程式碼
代碼如下: