项目的需求是这样的:一个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 中的