一、導入js庫
注:<%=request.getcontextpath() %>傳回web項目的根路徑。
二、預設校驗規則
三、預設的提示
如需要修改,可在js代碼中加入:
推薦做法,将此檔案放入messages_cn.js中,在頁面中引入
四、使用方式
1、metadata用法,将校驗規則寫到控件中
使用class="{}"的方式,必須引入包:jquery.metadata.js;
可以使用如下的方法,修改提示内容:class="{required:true,minlength:5,messages:{required:'請輸入内容'}}";
在使用equalto關鍵字時,後面的内容必須加上引号,如下代碼:class="{required:true,minlength:5,equalto:'#password'}"。
2、将校驗規則寫到js代碼中
五、常用方法及注意問題
1、用其他方式替代預設的submit
可以設定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());
}
//示例
代碼的作用是:一般情況下把錯誤資訊顯示在<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專門用于維護校驗檔案的樣式
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選項
遠端位址隻能輸出"true"或"false",不能有其它輸出。
9、添加自定義校驗
addmethod:name, method, message
自定義驗證方法
1.要在additional-methods.js檔案中添加或者在jquery.validate.js添加
建議一般寫在additional-methods.js檔案中
2.在messages_cn.js檔案添加:iszipcode: "隻能包括中文字、英文字母、數字和下劃線",
調用前要添加對additional-methods.js檔案的引用。
10、radio和checkbox、select的驗證