bootstrap validate 验证插件

1、需要引入bootstrapValidator.min.js

2、在需要验证的控件中添加 class="form-control"

3、js中写验证的方法

    $('#psasave').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {/*验证*/
            gysqc: {/*键名username和input name值对应*/
                message: '供应商名称为必填项',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: ''
                    }
                }
            },
            gysdzyx: {/*供应商地址邮编*/
                message:'供应商地址不能为空',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: ''
                    }
                }
            } ,
            shmk: {/*审核模块*/
                message:'请选择审核模块',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '请选择审核模块'
                    }
                }
            },
            cpmk: {/*产品模块*/
                message:'请选择产品模块',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '请选择产品模块'
                    }
                }
            } ,
            shcp: {/*审核产品*/
                message:'审核产品不能为空',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '审核产品不能为空'
                    }
                }
            } ,
            shrq: {/*审核日期*/
                message:'审核日期不能为空',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '审核日期不能为空'
                    }
                }
            },
            shy: {/*审核员姓名*/
                message:'审核员姓名不能为空',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '审核员姓名不能为空'
                    }
                }
            },
            shydh: {/*审核员姓名*/
                message:'审核人员电话、邮箱不能为空',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '审核人员电话、邮箱不能为空'
                    }
                }
            }
        }
    });

验证长度、格式那些方法也有，只是没有业务要求，因为电话可能有多个

4、触发验证：

 $("#psasave").data("bootstrapValidator").validate();

5、获取验证结果：（true/false）

var flag = $("#psasave").data("bootstrapValidator").isValid();

参考链接：

https://www.jb51.net/article/99381.htm

6、在html中写验证语句（填写数据就验证，不填写就不验证）:

  <td class="form-group">
                            <input name="gysryxxVos[0].sjhm" required pattern="^1[3-578]\d{9}$"
                                   data-bv-regexp-message="请输入11位电话号码"
                                   class="form-control alldiv tb-span-edit"
                                   style="display: block; border: none;box-shadow: none;">
                        </td>
                        <td class="form-group">
                            <input name="gysryxxVos[0].bgshm"
                                   pattern="^$|(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$"
                                   data-bv-regexp-message="请输入座机"
                                   class="form-control alldiv tb-span-edit" style="border: none;box-shadow: none;">
                        </td>
                        <td colspan="2" class="form-group">
                            <input name="gysryxxVos[0].emilyx" value=""
                                   pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"
                                   data-bv-regexp-message="请输入邮箱"
                                   class="form-control alldiv tb-span-edit" style="border: none;box-shadow: none;">
                        </td>
                        <td>
                            <input name="gysryxxVos[0].zgsrgzwsj" class="form-control alldiv tb-span-edit"
                                   style="border: none;box-shadow: none;">
                        </td>

7、针对日期控件和select 验证问题：

html 代码与其他一样

<td colspan="2" class="form-group">
    <input name="wtfxqy" value="${tbmain.wtfxqy}" id="wtfxqy"
           class="form-control alldiv tb-span-edit"
           style="border: none;box-shadow: none;display: none;">
    <select id="selectwtfxqy"  lay-filter="selectwtfxqy" ><!--主要使用的是layui框架，只是验证控件使用bootstrap--->
        <option value="">请选择</option>
        <option value="内部">内部</option>
        <option value="外部">外部</option>
    </select>
</td>

JS ：Bootstrap  验证代码:使用change 事件监听input值修改

  $('#formdata').bootstrapValidator({
            message: '',
            excluded: [":disabled"],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok-circle',
                invalid: 'glyphicon glyphicon-remove-circle',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                //问题发生日期
                wtfsrq:{
                    trigger: "change", //问题2.关键配置
                    message: '',
                    validators: {
                        notEmpty: {
                            /*非空提示*/
                            message: ''
                        }
                    }
                },
         //问题发现区域
                wtfxqy:{
                    trigger: "change",
                    message: '',
                    validators: {
                        notEmpty: {
                            /*非空提示*/
                            message: ''
                        }
                    }
                },

            }
        });

JS:监听select 选择改变事件，触发input change事件,日期控件也是一样，监听done事件：----这是layui-select  值change事件，

        form.on("select(selectwtfxqy)", function (obj) {
            $("input[name=wtfxqy]").val(obj.value);
            $("input[name=wtfxqy]").trigger('change');
            $('#formdata')
                .data('bootstrapValidator')
                .updateStatus('wtfxqy', 'NOT_VALIDATED', null)
                .validateField('wtfxqy');//必须要执行这个，不然就只会触发一次
        });