一 :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>
1
2
3
4
5
6
7
8
9

二：绑定验证的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');
        });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

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

1.判断字段是否为空

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

2.字段长度判断

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

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

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

4.大小写验证

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

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

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

6.email验证

emailAddress: {
         message: 'The input is not a valid email address'
                   }
1
2
3
4

7.日期格式验证

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

8.纯数字验证

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

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'//请求方式

                     },
1
2
3
4
5
6
7
8

10.复选框验证

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

11.密码确认

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

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

greaterThan: {
                        value: 18
                    },
lessThan: {
                        value: 100
                    }
1
2
3
4
5
6

13.uri验证

 uri: {}
1

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