天天看點

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

一、導入js庫

注:<%=request.getcontextpath() %>傳回web項目的根路徑。

二、預設校驗規則

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

三、預設的提示

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

如需要修改,可在js代碼中加入:

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

推薦做法,将此檔案放入messages_cn.js中,在頁面中引入

四、使用方式

1、metadata用法,将校驗規則寫到控件中

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

使用class="{}"的方式,必須引入包:jquery.metadata.js;

可以使用如下的方法,修改提示内容:class="{required:true,minlength:5,messages:{required:'請輸入内容'}}";

在使用equalto關鍵字時,後面的内容必須加上引号,如下代碼:class="{required:true,minlength:5,equalto:'#password'}"。

2、将校驗規則寫到js代碼中

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

五、常用方法及注意問題

1、用其他方式替代預設的submit

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

可以設定validate的預設值,寫法如下:

$.validator.setdefaults({

submithandler: function(form) { alert("submit!"); form.submit(); }

});

如果想送出表單,需要使用form.submit(),而不要使用$(form).submit()

2、debug,隻驗證不送出表單

如果這個參數為true,那麼表單不會送出,隻進行檢查,調試時十分友善

如果一個頁面中有多個表單都想設定成為debug,用

debug: true

})

3、ignore:忽略某些元素不驗證

ignore: ".ignore"

4、更改錯誤資訊顯示的位置

errorplacement:callback

default: 把錯誤資訊放在驗證的元素後面

指明錯誤放置的位置,預設情況是:error.appendto(element.parent());即把錯誤資訊放在驗證的元素後面

errorplacement: function(error, element) {

     error.appendto(element.parent());

}

//示例

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

代碼的作用是:一般情況下把錯誤資訊顯示在<td class="status"></td>中,如果是radio顯示在<td></td>中,如果是checkbox顯示在内容的後面

errorclass:string default: "error"

指定錯誤提示的css類名,可以自定義錯誤提示的樣式

errorelement:string default: "label"

用什麼标簽标記錯誤,預設的是label你可以改成em

errorcontainer:selector

顯示或者隐藏驗證資訊,可以自動實作有錯誤資訊出現時把容器屬性變為顯示,無錯誤時隐藏,用處不大

errorcontainer: "#messagebox1, #messagebox2"

errorlabelcontainer:selector

把錯誤資訊統一放在一個容器裡面。

wrapper:string

用什麼标簽再把上邊的errorelement包起來

一般這三個屬性同時使用,實作在一個容器内顯示所有錯誤提示的功能,并且沒有資訊時自動隐藏

errorcontainer: "div.error",

errorlabelcontainer: $("#signupform div.error"),

wrapper: "li"

5、更改錯誤資訊顯示的樣式

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

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

6、每個字段驗證通過執行函數

success:string,callback

要驗證的元素通過驗證後的動作,如果跟一個字元串,會當做一個css類,也可跟一個函數

添加"valid"到驗證元素, 在css中定義的樣式<style>label.valid {}</style>

success: "valid"

7、驗證的觸發方式修改

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

a.onsubmit:boolean default: true

送出時驗證. 設定唯false就用其他方法去驗證

b.onfocusout:boolean default: true

失去焦點是驗證(不包括checkboxes/radio buttons)

c.onkeyup:boolean default: true

在keyup時驗證.

d.onclick:boolean default: true

在checkboxes 和 radio 點選時驗證

e.focusinvalid:boolean default: true

送出表單後,未通過驗證的表單(第一個或送出之前獲得焦點的未通過驗證的表單)會獲得焦點

f.focuscleanup:boolean default: false

如果是true那麼當未通過驗證的元素獲得焦點時,移除錯誤提示。避免和focusinvalid一起用

8、異步驗證

remote:url

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

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

遠端位址隻能輸出"true"或"false",不能有其它輸出。

9、添加自定義校驗

addmethod:name, method, message

自定義驗證方法

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解

1.要在additional-methods.js檔案中添加或者在jquery.validate.js添加

建議一般寫在additional-methods.js檔案中

2.在messages_cn.js檔案添加:iszipcode: "隻能包括中文字、英文字母、數字和下劃線",

調用前要添加對additional-methods.js檔案的引用。

10、radio和checkbox、select的驗證

用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
用戶端驗證:JQuery Validation PluginjQuery Validate驗證架構詳解
上一篇: JBox使用詳解
下一篇: Freemarker教程