jQuery Validation 是 jQuery 的一個既強又有彈性的 plugin 套件,主要功能就是用來進行表單驗證。
Using jQuery Validation
jQuery.validate
簡單範例
語法說明
若要驗證欄位,只要將下列驗證規則參數加入 class 屬性中即可,也可以混合使用。
驗證規則參數:(查看完整列表)
- required:必填欄位
- email:格式要符合E-Mail格式
- url:格式要符合網址格式,如:http://www.minwt.com
- number:數字格包含小數點
- digits:數字為正整數
- date:日期格式
- dataISO:日期格式,格式必需為YYYY/MM/DD、YYYY-MM-DD、YYYYMMDD
- equalTo:與某一欄位值相同
- minValue:最小字元長度
- maxValue:最大字元長度
- rangeValue:字元長度區間長度
- minLength:最小字元長度(中文字算一個字符)
- maxLength:最大字元長度(中文字算一個字符)
- rangeLength:字元長度區間長度(中文字算一個字符)
進階範例
語法說明
- rules :定義驗證規則。
- messages :定義訊息文字。
- event :設定觸發驗證的事件,可選用的事件值有 [keyup|blur],若不使用這個參數時就只會在 submit 事件時觸發驗證。
- submitHandler :定義當驗證通過,但尚未送出前所要執行的程式碼。
- debug :定義當驗證失敗時所要執行的程式碼。
Customized validation rule
有的時候,我們需要稍微複雜一點的檢查邏輯,讓 A 欄位的檢查邏輯可以因為其他的輸入欄位而調整。例如:如果在線上購物的時候,使用者有匯款、線上刷卡兩種付款的方式,我們希望如果使用者選擇了線上刷卡,匯款帳號後五碼變成選填,信用卡號變成必填;如果使用者選匯款,檢查的邏輯就顛倒過來,像這樣的功能要怎麼做呢?
$.validator.addMethod("atm_required",
function( value, element){
return ( $('#payment_atm').is(':checked') ) ?
( value != '' && value.length == 5) : true;
}, 'ATM 匯款必填'
);
Customized error message
若要修改驗證結果的訊息文字,有以下做法
修改 jquery.validate.js
這方法可以修改預設的訊息內容,只要開啟 jquery.validate.js ,找到以下區塊,變更文字內容即可。
使用 localization messages
jQuery validation 預設的 message 是英文,如果你想要用其他的語言,可以在 include jquery validation plugin 之後,再多 include locale 的 javascript, 如:
在 messages 中加入 icon
jQuery validation 預設會將 error message 裝在 裡,並放在輸入欄位的後面。 所以你也可以針對這個 class 設定屬於你的 error message 樣式。
label.error{
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
label.success{
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
$(document).ready( function(){
$('#commentForm').validate({
success: function(label) {
label.addClass("success").text("Ok!");
}
});
});