bootstrap validator 使用笔记

  最近做的项目，前台使用的bootstrap框架。对于前台框架来说，验证是必不可少的。对于常用的一些校验规则，如果有一个例子会更好的。虽然有提供validator的API，但是感觉不太好用。所以记录一下常用的几种校验方式。

准备工作

下载：相关的js和css文件 

使用前提，必须是bootstrap框架。然后引入到项目中。

校验类型

客户端前台自校验

       这种校验方式，validator已经封装的很好了。只是在写前台界面的时候要用以下这种结构：

<div class="form-group">    <label class="col-lg-3 control-label">Full name</label>    <div class="col-lg-4">        <input type="text" class="form-control" name="firstName"            placeholder="First name" required            data-bv-notempty-message="firstName不能为空(提示语)"             />    </div></div>
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

       上面的这种结构只需要写相应的校验方式，对data-bv……进行替换 或添加属性即可。

校验常用方式

非空校验

data-bv-notempty-message="XXX不能为空"
1
1

长度限制校验

data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="这个字段长度不得小于6，不得超过30 "
1
1

邮箱校验

type="email" data-bv-emailaddress-message="The input is not a valid email address"
1
1

日期格式校验

data-bv-date="false" data-bv-date-format="YYYY/MM/DD" data-bv-date-message="The birthday is not valid"
1
1

前后台交互校验

       对于前后太交互校验，最常用的是在ajax的回调函数中进行校验。以下是一个例子，可以当作模版使用。

$('#defaultForm').bootstrapValidator({    message: 'This value is not valid',    feedbackIcons: {        //提示图标        valid: 'glyphicon glyphicon-ok',        invalid: 'glyphicon glyphicon-remove',        validating: 'glyphicon glyphicon-refresh'    },    fields: {        firstName: {            validators: {                notEmpty: {        // 非空校验+提示信息                    message: 'The first name is required and cannot be empty'                }            }        },        lastName: {            validators: {                notEmpty: {                    message: 'The last name is required and cannot be empty'                }            }        },        username: {            message: 'The username is not valid',            validators: {                notEmpty: {                    message: 'The username is required and cannot be empty'                },                stringLength: {     //输入　长度限制　　校验                    min: 6,                    max: 30,                    message: 'The username must be more than 6 and less than 30 characters long'                },                regexp: {           //正则校验                    regexp: /^[a-zA-Z0-9_\.]+$/,                    message: 'The username can only consist of alphabetical, number, dot and underscore'                },                remote: {                    url: 'remote.php',                    message: 'The username is not available'                },                different: {                    field: 'password',                    message: 'The username and password cannot be the same as each other'                }            }        },        email: {            validators: {                emailAddress: {     //　　邮箱格式校验                    message: 'The input is not a valid email address'                }            }        },        password: {            validators: {                notEmpty: {                    message: 'The password is required and cannot be empty'                },                identical: {                    field: 'confirmPassword',                    message: 'The password and its confirm are not the same'                },                different: {                    field: 'username',                    message: 'The password cannot be the same as username'                }            }        },        captcha: {            validators: {                callback: {     //提交到后台进行校验                    message: 'Wrong answer',        //提示信息                    callback: function(value, validator) {                        //用ajax提交到后台，进行校验。如果校验失败  return false; 校验成功 return true;                        var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);                        return value == sum;                    }                }            }        }    }});
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

       这种校验方式写法容易理解，只需要在field 下面 写上需要校验的字段并指明校验方式即可。 
       对于有前后台交互的，只需要写上callback方法即可完成校验。

表单提交前校验

这种方式，是对上面一种写法的补充，例子如下：

$('#defaultForm').bootstrapValidator({    message: 'This value is not valid',    feedbackIcons: {        valid: 'glyphicon glyphicon-ok',        invalid: 'glyphicon glyphicon-remove',        validating: 'glyphicon glyphicon-refresh'    },    fields: {        ……        ……    }}).on('success.form.bv', function(e) {    // Prevent form submission    e.preventDefault();    // Get the form instance    var $form = $(e.target);    // Get the BootstrapValidator instance    var bv = $form.data('bootstrapValidator');    // Use Ajax to submit form data    $.post($form.attr('action'), $form.serialize(), function(result) {        console.log(result);    }, 'json');});
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
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

       对于表单提交前验证，这种方式，主要是对上述校验的第二种保护，只需要添加on方法即可。

总结

       对于成熟的框架来说，都会有很方便的写法，这样才会发挥出框架的作用。我们要做的就是学会使用，快速的开发。