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

  • 相关阅读:
    构建之法阅读笔记2
    2020.2.10
    2020.2.9
    2020.2.8
    2020.2.7
    2020.2.6
    2020.2.5
    学习进度——第十三周
    PHPStorm+XAMPP开发php项目
    第一阶段成果建议
  • 原文地址:https://www.cnblogs.com/lhat/p/13064597.html
Copyright © 2020-2023  润新知