項目的需求是這樣的:一個checkbox,一個input,選中checkbox的時候,需要校驗input,取消選中的時候,不要校驗input。
<input type='checkbox' id='switchCheckbox' />熬夜超過<input type='text' name='hour' />點,就去喝咖啡
1. 配置ignoreHidden
$(".demoform").Validform({
tiptype:1,
ignoreHidden:false
});
默認為false,當為true時對:hidden的表單元素將不做驗證;
注意::hidden
表單元素 包括type='hidden'
的表單項,也包括未顯示的表單項(display:none)
但是這個配置是全局性的,無法做到靈活的開關
2. ignore 屬性
<input type='text' name='name' datatype='*' ignore='ignore' />
綁定了ignore="ignore"的表單元素,在有輸入時,會驗證所填數據是否符合datatype所指定數據類型,沒有填寫內容時則會忽略對它的驗證;
這個屬性也無法滿足需求
3. ignore(selector) 和 unignore(selector) 方法
ignore(selector)【返回值:Validform】
忽略對所選擇對象的驗證,不傳入selector則忽略所有表單元素。
如demo.ignore("select,textarea,#name"),忽略Validform對象下所有select,textarea及一個id為"name"元素的驗證。unignore(selector)【返回值:Validform】
將ignore方法所忽略驗證的對象重新獲取驗證效果,不傳入selector則恢復驗證所有表單元素。
如demo.unignore("select,textarea,#name"),恢復Validform對象下所有select,textarea及一個id為"name"元素的驗證。
這兩個方法正好可以解決我的需求。
思路:綁定 checkbox 的點擊事件,選中時校驗表單項;取消選中時,忽略校驗表單項。或者,在 beforeCheck 中根據checkbox選中狀態來決定是否校驗表單項(代碼略)
4. data-data-ignore 屬性
該屬性在官方文檔中沒有介紹,原因未知。不過,在源碼中確實使用到了該屬性。
check:function(curform,subpost,bool){
...
//隱藏或綁定dataIgnore的表單對象不做驗證;
if(settings.ignoreHidden && $(this).is(":hidden") || $(this).data("dataIgnore")==="dataIgnore"){
return true;
}
...
}
最終需求代碼
// 捕獲 checkbox 的點擊事件
$("#switchScreenNumberCheck").click(function(){
var $checkbox = $("#switchScreenNumberCheck");
var $e = $("#switchScreenNumber");
// 判斷選中狀態
if ($checkbox.is(":checked")) {
// 選中則不再忽略校驗
$e.data('data-ignore', '');
// 刪除 input 保存的上次值(該步驟也可以放在未選中時)
delete $e.get(0).validform_lastval;
// 接着就校驗 input
$validform.check(false, $e);
} else {
// 未選中則移除input的校驗規則,以及錯誤樣式和文字
$e.data('data-ignore', 'dataIgnore').removeClass('Validform_error');
$e.siblings('.Validform_wrong').text('').removeClass('Validform_wrong');
}
});
// 注意:
// Validform 在表單項值未發生改變的情況下,不會**再次**校驗。
// 也就是說,第一次校驗完后,如果表單項值沒有改變的情況下,不會再次校驗。
// 所以在上面的代碼中,未選中狀態下,我們移除了校驗結果(錯誤樣式和文字);
// 當再次選中時,需要再次校驗(即使值沒有改變)
// 注意:data-data-ignore="dataIgnore"
// 該屬性在官方文檔中沒有體現,但在源碼中是存在的。
// 它的作用是:表單項的該屬性值==='dataIgnore',則忽略對它的校驗
當然,以上邏輯也是可以放到 beforeCheck 中的