bootstrapValidator 验证

た入场券 2022-05-16 23:24 192阅读 0赞

1，添加相关js和css

2,初始化验证规则

$("#formAppointment").bootstrapValidator({
            message: '输入值不合法',
            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: '用户名只能由字母、数字、点、下划线和汉字组成 '
                        }
                    }
                }, sid: {
                    validators: {
                        notEmpty: {
                            message: '身份证不能为空'
                        }, regexp: {
                            regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                            message: '身份证号码格式不正确，为15位和18位身份证号码！'
                        }
                    }
                }, phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^1[34578]\d{9}$/,
                            message: '请输入完整手机号码！'
                        }
                    }
                }, Img: {
                    trigger:"change",
                    validators: {
                        notEmpty: {
                            message: '请拍摄照片'
                        }
                    }
                }, content: {
                    validators: {
                        notEmpty: {
                            message: '访问内容不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 500,
                            message: '请输入6到500个字符'
                        }
                    }
                }
                , department: {
                    validators: {
                        notEmpty: {
                            message: '受访部门不能为空'
                        },
                        callback: {
                            message: '请选择受访部门',
                            callback: function (value, validator) {
    
                                if (value == -1) {
                                    return false;
                                } else {
                                    return true;
                                }
    
                            }
                        }
                    }
                }
            }
        });

3，提交时触发验证

$("#okBtn").on('click',function () {
           
            $("#formAppointment").bootstrapValidator('validate');//提交验证，手动对表单进行校检
    
            if ($("#formAppointment").data('bootstrapValidator').isValid()) {
    
                //判断校检是否通过
            }
            
        });