bootstrap-vaildator表单验证插件的使用

在验证时，不需要给提交按钮绑定点击事件 ，在点击提交时会自动提交。

默认不会验证隐藏的input表单，如果需要验证隐藏表单需要打开权限：

 

三参数：禁用的，隐藏的，不可见的不校验，把这个设置为空就行了

exclude:[]

引入文件：

js文件

$(function(){
    /*前端校验功能  bootstrap validator*/
    /*1.完整的表单结构  form   input  submit 这些元素*/
    /*2.表单元素需要对应的名字 name="username" */
    /*3.初始化表单验证组件 插件*/
    /*4.配置组件功能*/
    /*5.配置具体的属性需要的校验规则*/
    $('#login').bootstrapValidator({
        /*提示的图标*/
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        /*属性对应的是表单元素的名字*/
        fields:{
            /*配置校验规则*/
            username:{
                /*规则*/
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    /*设置错误信息 和规则无关 和后台校验有关系*/
                    callback: {
                        message: '用户名错误'
                    }
                }
            },
            password:{
                validators:{
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength:{
                        min:6,
                        max:18,
                        message:'密码在6-18个字符内'
                    },
                    //加的一个验证状态，因为此时密码已经填了，没登陆成功只可能是密码错误
                    callback: {
                        message: '密码不正确'
                    }
                }
            }
        }
        /*7.表单校验成功*/
    }).on('success.form.bv', function(e) {
        /*禁用默认提交的事件 因为要使用ajax提交而不是默认的提交方式*/
        e.preventDefault();
        /*获取当前的表单*/
        var $form = $(e.target);
        /*发送登录请求*/
        $.ajax({
            type:'post',
            url:'/employee/employeeLogin',
            data:$form.serialize(),
            dataType:'json',
            success:function(data){
                if(data.success){
                    /*后台管理员 root 123456*/
                    /*登录成功*/
                    location.href = 'index.html';
                }else{
                    /*登录不成功*/
                    /*8.恢复可提交的按钮*/
                    $form.data('bootstrapValidator').disableSubmitButtons(false);
                    /*9.指定某一个表单元素的错误提示*/
                    /* NOT_VALIDATED没有验证, VALIDATING正在验证, INVALID失败 or VALID成功 */
                    //用户名不存在
                    if(data.error == 1000){
                        //获取要校验的组建
                        //调用更改状态的函数
                        // 校验的表单，改成什么状态，使用的校验规则
                        $form.data('bootstrapValidator').updateStatus('username','INVALID','callback');
                    }else if(data.error == 1001){
                        //密码错误
                        $form.data('bootstrapValidator').updateStatus('password','INVALID','callback');
                    }
                }
            }
        });
    });
    /*重置功能*/
    $('[type="reset"]').on('click',function(){
        /*6.重置验证*/
        $('#login').data('bootstrapValidator').resetForm();
    });

});

 

html表单：form里的表单提交按钮放在了外面，要关联起来：

<div class="modal-body">
                <form class="form-group" id="form">
                    <input type="text" class="form-control" placeholder="请输入一级分类名称" name="firstCategoryName">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary determineAdd" form="form">保存</button>
            </div>

高级点的自定义验证(这个出bug了。。。。ajax提交不到后台，，不知道问题在哪)：

js:

//增加一种校验方法：给bootstrapValidator增加一种自定义的校验函数
    //校验输入的商品库存是否合法
    $.fn.bootstrapValidator.validators.checkNum = {
        validate: function (validate, $field, options) {
            /**
             * 参数：
             * @param {BootstrapValidator} 表单验证实例对象
             * @param {jQuery} $field jQuery 对象
             * @param {Object} 表单验证配置项值
             * @returns {boolean}
             */
            // 获取字段对应的值：
            var text= $.trim($field.val())
            // 验证不能为空：
            if (!text) {
                return {
                    valid: false,
                    message: '请输入商品库存！'
                }
            }
            // 验证必须是大于零的整数
            if (!/^[1-9]\d*$/.test(text)) {
                return {
                    valid: false,
                    message: '请输入合法商品库存！'
                }
            }
            return true
            /**
             *规则：如果返回true,则校验成功
             * 如果返回false,校验失败，并且自定义提示信息：
             *  valid: false,
             *  message: '信息'
             */
        }
    }
    // 校验上传图片
    $.fn.bootstrapValidator.validators.checkPic = {
        validate: function (validate, $field, options) {
            if(picList.length != 3) {
                return {
                    valid: false,
                    message: '请上传三张图片！'
                }
            }
            return true
        }
    }
    // 其他表单的校验：
    $('.addProduct form').bootstrapValidator({
        //隐藏的表单也要校验
        excluded: [],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            proName: {
                validators: {
                    notEmpty: {
                        message: '商品名称不能为空！'
                    }
                }
            },
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '商品描述不能为空！'
                    }
                }
            },
            num: {
                validators: {
                    // 自定校验规则：
                    checkNum: {}
                }
            },
            price: {
                validators: {
                    notEmpty: {
                        message: '商品价格不能为空！'
                    }
                }
            },
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '商品原价不能为空！'
                    }
                }
            },
            size: {
                validators: {
                    notEmpty: {
                        message: '商品码数不能为空！'
                    }
                }
            },
            pic: {
                validators: {
                    // 自定义校验表单
                    checkPic: {}
                }
            }
        }
    }).on('success.form.bv', function(e) {
        //阻止默认事件
        e.preventDefault()
        var $form = $form = $(e.target);
        var proName = $.trim($('[name="proName"]').val())
        var proDesc = $.trim($('[name="proDesc"]').val())
        var num = $.trim($('[name="num"]').val())
        var price = $.trim($('[name="price"]').val())
        var oldPrice = $.trim($('[name="oldPrice"]').val())
        var size = $.trim($('[name="size"]').val())
        /*图片上传的参数名称*/
        /*picName1=picAddr1*/
        /*picName2=picAddr2*/
        /*picName3=picAddr3*/
        /*每次上传成功记录一下  通过数组*/
        var pic = ''
        $.each(picList,function (i,item) {
            pic += '&picName'+(i+1)+'='+item.picName+'&picAddr'+(i+1)+'='+item.picAddr;
        });
        console.log(pic)
        $.ajax({
            url: '/product/addProduct',
            type: 'post',
            data: {
                proName: proName,
                oldPrice: oldPrice,
                price: price,
                proDesc: proDesc,
                size: size,
                num: num,
                pic: pic
            },
            success: function (data) {
                if(data.success){
                    /*关闭模态框*/
                    $('.addProduct').modal('hide');
                    /*渲染第一页*/
                    window.page = 1;
                    render();
                    /*重置表单数据和校验样式*/
                    $form[0].reset();
                    $form.data('bootstrapValidator').resetForm();
                    $form.find('img').remove();
                }
            }
        })
    })