• bootstrapValidator对于隐藏域验证和程序赋值即时验证的问题


    问题1:

    如下代码:

    <input type="hidden" name="productId"/>
    复制代码
    $("#addForm").bootstrapValidator({
        fields: {
            productId: {
                validators: {
                    notEmpty: {
                        message: '请选择一个商品'
                    }
                }
            }
        }
    });
    复制代码

    这样的配置并没有在提交的时候对表单元素productId进行验证,那是因为bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不进行验证的。

    解决方法:

    复制代码
    $("#addForm").bootstrapValidator({
        //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
        excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
        fields: {
            productId: {
                validators: {
                    notEmpty: {
                        message: '请选择一个商品'
                    }
                }
            }
        }
    });
    复制代码

    问题2:

    我们往往会有这样的需求,如下图:

    在选择商品之后会在productName里面展示商品名称给用户看,而在productId这个隐藏域里面放一个商品的ID。

    一般情况下这样的操作是由程序来完成的,

    $("input[name='productId']").val(data.productId);
    bootstrapValidator这个插件不能捕获这样的“程序赋值事件”,所以这里不能达到验证的效果,所以我们需要做一个小小的变通:
    复制代码
    $("#addForm").bootstrapValidator({
        //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
        excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
        fields: {
            productId: {
                trigger:"change", //问题2.关键配置
                validators: {
                    notEmpty: {
                        message: '请选择一个商品'
                    }
                }
            }
        }
    });
    复制代码
    //赋值之后触发一次“change”事件
    $("input[name='productId']").val(data.productId).change();

    这样以后bootrapValidator会因为触发了“change”事件,而捕获,达到验证的效果

  • 相关阅读:
    在安卓上用Termux安装sqlmap
    地址转换函数
    字节操作函数
    主机字节序和网络字节序
    20191231 Spring官方文档(Core 1.13-1.14)
    20191230 Spring官方文档(Core 1.12)
    20191230 Tomcat权威指南-读书摘要系列【归档】
    20191230 On Java8【归档】
    20191227 Java8 日期时间API
    20191226 Spring官方文档(Core 1.11)
  • 原文地址:https://www.cnblogs.com/lxl57610/p/13324273.html
Copyright © 2020-2023  润新知