bootstrap插件bootstrapValidator常用验证规则总结

一 :bootstrapValidator引入

在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。

    <!--jquery--> <script type="text/javascript" src="Public/js/jquery-3.2.1.js"></script>    <!--bootstrap-->    <link rel="stylesheet" type="text/css" href="Public/css/bootstrap-theme.min.css">    <link rel="stylesheet" type="text/css" href="Public/css/bootstrap.min.css">    <link rel="stylesheet" type="text/css" href="Public/css/bootstrapValidator.css">    <script type="text/javascript" src="Public/js/bootstrap.js"></script>    <script type="text/javascript" src="Public/js/bootstrapValidator.js"></script>

二：绑定验证的js代码

<form class="form-horizontal center-block" id="form_test">        <div class="form-group">            <label class="col-sm-2 control-label" for="des">用户名</label>            <div class="col-xs-4">                <input type="text"  class="form-control" name="username" id="username" placeholder="username">            </div>        </div>        <div class="form-group ">            <label class=" control-label col-sm-2" ></label>            <div class="col-xs-4">                <button type="submit" class="btn btn-primary">提 交</button>                <button type="reset" class="btn btn-default">清 空</button>            </div>        </div>    </form>  $(document).ready(function() {        $('#form_test').bootstrapValidator({            message: 'This value is not valid',            //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置            excluded: ':disabled',//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证            feedbackIcons: {                valid: 'glyphicon glyphicon-ok',//显示验证成功或者失败时的一个小图标                invalid: 'glyphicon glyphicon-remove',                validating: 'glyphicon glyphicon-refresh'            },            fields: {                username: {                    message: '用户名不能为空',//默认提示信息                    validators: {                        notEmpty: {                            message: '用户名必填不能为空'                        },                        stringLength: {                            min: 6,                            max: 30,                            message: '用户名长度不能小于6位或超过30位'                        },                        regexp: {                            regexp: /^[a-zA-Z0-9_\.]+$/,                            message: '用户名只能由字母、数字、点和下划线组成。'                        },                    }                }            }        }).on('error.form.bv', function(e) {            console.log('error');            // Active the panel element containing the first invalid element            var $form         = $(e.target),                validator     = $form.data('bootstrapValidator'),                $invalidField = validator.getInvalidFields().eq(0),                $collapse     = $invalidField.parents('.collapse');            $collapse.collapse('show');        });    });

三.在validators中一些验证规则的总结

1.判断字段是否为空

 notEmpty: {          message: '用户名必填不能为空'            },

2.字段长度判断

stringLength: {          min: 6,          max: 30,          message: '用户名长度不能小于6位或超过30位'          },

3.通过正则表达式进行验证

regexp: {          regexp: /^[A-Z\s]+$/i,          message: '名字只能由字母字符和空格组成。'                    }

4.大小写验证

stringCase: {          message: '姓氏必须只包含大写字符。',          case: 'upper'//其他值或不填表示只能小写字符                    },

5.两个字段不相同的判断

different: {          field: 'password',          message: '用户名和密码不能相同。'                    }

6.email验证

emailAddress: {         message: 'The input is not a valid email address'                   }

7.日期格式验证

date: {         format: 'YYYY/MM/DD',         message: '日期无效'                    }

8.纯数字验证

 digits: {         message: '该值只能包含数字。'                    }

9.ajax验证

threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}      url: 'exist2.do',//验证地址    message: '用户已存在',//提示消息    delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）    type: 'POST'//请求方式                     },

10.复选框验证

choice: {                        min: 2,                        max: 4,                        message: '请选择2-4项'                    }

11.密码确认

identical: {                        field: 'confirmPassword',                        message: 'The password and its confirm are not the same'                    },

12.判断输入数字是否符合大于18小于100

greaterThan: {                        value: 18                    },lessThan: {                        value: 100                    }

13.uri验证

 uri: {}

其他细节参考 http://www.jb51.net/article/99381.htm