BootstrapValidator使用总结

文章目录

• • • （1）基础的字段验证
    • （2）button验证
    • （3）自定义错误提示信息
    • （4）多个字段关联验证
    • （5）数字范围的验证
    • （6）调用接口交互验证
    • 官方文档

（1）基础的字段验证

$('#form').bootstrapValidator({
    excluded: [":disabled"],
    message: '表单校验',
    feedbackIcons: {
        /*input状态样式图片*/
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        code:{
            message: "code字段校验",
            trigger:"change",
            validators: {
                notEmpty: {
                    message: 'XX必须选择'
                }
            }
        },
        name: {
            message: '姓名验证',
            trigger:"change",
            validators: {
                notEmpty: {
                    message: '姓名不能为空'
                },
                regexp: {
                    regexp:/^[\u4e00-\u9fa5]+$/,
                    message: '只能输入汉字'
                },
                stringLength: {/*长度提示*/
                    max: 8,
                    message: '姓名不超过16个字符'
                }
            }
        }
	}
});
	

（2）button验证

按钮的类型为button时,bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。

    var bootstrapValidator = $("#form").data('bootstrapValidator');
    bootstrapValidator.validate();    
   if (bootstrapValidator.isValid()) {
	
	}

（3）自定义错误提示信息

在一些场景下，可能需要不同的输入做一些不同的文字描述提示，比如我们在验证身份证时，可能需要验证合法性，也可能会提取出生日期做一些验证，可能提取性别验证一些信息等等

updateMessage(field*, validator*, message*): BootstrapValidator —更新对应的错误提示信息

         callback: {
                    message: '身份证号码无效！',
                    callback: function (value, validator, $field) {
                        if (!value) {
                            return true
                        } else if (isIdCardNo(value)) {
                            idCardToBirth();
                            if (!checkAge()){
                                validator.updateMessage('idcard', 'callback', '年龄不满足要求')
                                return false;
                            }
                            return true;
                        } else {
                            return false;
                        }
                    }
                },

（4）多个字段关联验证

updateStatus(field*, status*, validator):
更新指定字段的验证状态

当我们在进行字段验证时，可能会遇到一个字段被其他字段所影响，在进行当前字段验证时，如果发现某一个条件则设置另一个字段为验证通过，或者为验证不通过，那么就可以通过

手动设置某个字段不通过
validator.updateStatus('字段名称', 'INVALID',validator);

手动设置某个字段不通过
validator.updateStatus('字段名称', 'VALID',validator);

其中validator表示会更新对应的那一个验证器比如下面的方法，设置更新familyNum字段的notEmpty验证器，那么该字段显示的提示信息就是notEmpty中设置的错误信息
validator.updateStatus(‘familyNum’, ‘INVALID’,‘notEmpty’);

（5）数字范围的验证

                between:{
                    min:1,
                    max:10,
                    message:"输入范围1~10",
                },

（6）调用接口交互验证

对于涉及到接口调用的验证，可以通过remote来处理

                remote:{
                url:"/idcard/exists",
                message: '该身份证已存在,请重新输入',
                type:'post',
                data:function(validate){
                    return{
                        idcard:$("#idcard").val()
                    }
                }
            }

接口的返回值参考：
验证通过{valid:true}
验证失败{valid:true}

官方文档

http://bootstrapvalidator.votintsev.ru/api/