bootstrapValidator 隐藏域验证

最新推荐文章于 2022-12-07 15:57:11 发布

怒彬

最新推荐文章于 2022-12-07 15:57:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/shenwb110/article/details/81383328

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在使用bootstrapValidator时如何处理隐藏域的验证问题。通过设置excluded配置和在程序赋值后手动触发change事件，确保隐藏域的数据能够通过验证。具体实现包括：给隐藏域赋值后调用.change()方法以及在验证配置中添加trigger: 'change'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，设置excluded配置

 $("#formAppointment").bootstrapValidator({
        message: '输入值不合法',
        //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
        excluded: [":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            appointmentName: {
                message: '主访人不合法',
                validators: {
                    notEmpty: {
                        message: '主访人不能为空'
                    },
                    stringLength: {
                        min: 3,
                        max: 30,
                        message: '请输入3到30个字符'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                        message: '用户名只能由字母、数字、点、下划线和汉字组成 '
                    }
                }
            }
    });

2，对隐藏域赋值时，如 $("input[name='currentImg']").val(data);

bootstrapValidator这个插件不能捕获这样的“程序赋值事件”，所以无法通过验证，需要手动触发change事件。

1> $("input[name='currentImg']").val(data).change();

2>还需要修改bootstrapValidator验证配置，添加 trigger:"change"

$("#formAppointment").bootstrapValidator({
        message: '输入值不合法',
        excluded: [":disabled"],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            Img: {
                trigger:"change",//关键配置
                validators: {
                    notEmpty: {
                        message: '请拍摄照片'
                    }
                }
            }
        }
    });