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