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 中的

原文地址:https://www.cnblogs.com/lhat/p/13064597.html