ValidForm5.3.2 忽略表單項校驗詳解


ValidForm 官方文檔

項目的需求是這樣的:一個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 中的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM