|
這點微軟的驗證控件就做的很好，在微軟的控件里，默認都有ValidationGroup這個屬性，只要把屬性名設(shè)置為相同就可以進行分組驗證了，但是jQuery.Validate自身卻沒提供這個功能，所以我們只能自己擴展了。
來一下具體的場景，在一個頁面里有2個tab頁面，不同tab頁面需要不同的提交按鈕：
這2個就是標(biāo)準的分組驗證情況，如果不設(shè)置分組驗證的情況下，點擊[基本信息提交]和[描述提交]按鈕后頁面上所有的驗證都會被相應(yīng)，這是因為2個按鈕都在一個form表單中，2個按鈕的點擊事件默認都是在客戶端提交表單，然后由服務(wù)器端來分配執(zhí)行代碼，所以問題就出現(xiàn)了。
這時我們就需要引入分組驗證了，這個解決思路是我在一個國外的網(wǎng)站找到的，不過具體地址我找不到了，這個方法有個弊端就是必須是將需要分組的控件必須放入不同的容器中，如div,table等，因為采用的是標(biāo)識class樣式來進行分組驗證。看下具體代碼：
view sourceprint?01 //初始化分組驗證
function InitValidationGroup() {
$('.validationGroup .causesValidation').click(Validate);
$('.validationGroup :text').keydown(function(evt) {
if (evt.keyCode == 13) {
var $nextInput = $(this).nextAll(':input:first');
if ($nextInput.is(':submit')) {
Validate(evt);
}
else {
evt.preventDefault();
$nextInput.focus();
}
}
});
}
function Validate(evt) {
var $group = $(this).parents('.validationGroup');
var isValid = true;
$group.find(':input').each(function(i, item) {
if (!$(item).valid())
isValid = false;
});
if (!isValid)
evt.preventDefault();
}
上面的代碼就是用來進行分組驗證的初始化的，這段代碼會找尋頁面中標(biāo)有validationGroup樣式的元素（分組的容器），然后在這個元素中找?guī)ausesValidation樣式的元素（這個元素是引發(fā)驗證的按鈕），上面代碼實現(xiàn)分組驗證的邏輯就是當(dāng)帶causesValidation樣式的元素引發(fā)驗證后會找尋這個元素的父級validationGroup元素，然后遍歷validationGroup元素下的所有有驗證規(guī)則的元素判斷是否驗證通過。
出處：博客園
責(zé)任編輯：bluehearts
上一頁 使用jQuery.Validate進行客戶端驗證(后篇) 上 [1] 下一頁 使用jQuery.Validate進行客戶端驗證(后篇) 上 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 使用jQuery.Validate進行客戶端驗證(后篇) 上 [2]
