一.首先引入BootstrapValidator插件

BootstrapValidator插件需要jQuery和Bootstrap 3

引入js和css文件

1 <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
2 <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
3 
4 <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
5 <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
6 <!-- 使用压缩过的版本-->
7 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
8 <!-- 使用包含所有验证器的未压缩版本 -->
9 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>

二.添加验证规则

1.使用HTML添加简单验证

如果想对某一个字段添加验证规则，需要包裹，input标签必须有name值，此值为验证匹配的字段。

1 <div class="form-group">
2     <label for="exampleInputEmail1">Email address</label>
3     <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email" 
4     data-bv-notempty="true" 
5     data-bv-notempty-message="不能为空">
6   </div>

2.使用js添加验证

简述 bootstrapValidator 使用方法。想查看更多可以访问http://bootstrapvalidator.votintsev.ru/getting-started/ 查看文档

 1 $('form').bootstrapValidator({
 2       // 默认的提示消息
 3       message: 'This value is not valid',
 4       // 表单框里右侧的icon
 5       feedbackIcons: {
 6         　　　　　　　　valid: 'glyphicon glyphicon-ok',
 7         　　　　　　　　invalid: 'glyphicon glyphicon-remove',
 8         　　　　　　　　validating: 'glyphicon glyphicon-refresh'
 9       },
10       submitHandler: function (validator, form, submitButton) {
11         // 表单提交成功时会调用此方法
12         // validator: 表单验证实例对象
13         // form  jq对象  指定表单对象
14         // submitButton  jq对象  指定提交按钮的对象
15       },
16       fields: {
17         username: {
18           message: '用户名验证失败',
19           validators: {
20             notEmpty: {
21               message: '用户名不能为空'
22             },
23             stringLength: {  //长度限制
24               min: 6,
25               max: 18,
26               message: '用户名长度必须在6到18位之间'
27             },
28             regexp: { //正则表达式
29               regexp: /^[a-zA-Z0-9_]+$/,
30               message: '用户名只能包含大写、小写、数字和下划线'
31             },
32             different: {  //比较
33               field: 'username', //需要进行比较的input name值
34               message: '密码不能与用户名相同'
35             },
36             identical: {  //比较是否相同
37               field: 'password',  //需要进行比较的input name值
38               message: '两次密码不一致'
39             },
40             remote: { // ajax校验，获得一个json数据（{'valid': true or false}）
41               url: 'user.php',       //验证地址
42               message: '用户已存在',   //提示信息
43               type: 'POST',          //请求方式
44               data: function(validator){  //自定义提交数据，默认为当前input name值
45                 return {
46                   act: 'is_registered',
47                   username: $("input[name='username']").val()
48                 };
49               }
50             }
51           }
52         },
53         email: {
54           validators: {
55             notEmpty: {
56               message: '邮箱地址不能为空'
57             },
58             emailAddress: {
59               message: '邮箱地址格式有误'
60             }
61           }
62         }
63       }
64     });

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

1.判断字段是否为空

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

2.字段长度判断

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

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

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

4.大小写验证

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

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

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

6.email验证

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

7.日期格式验证

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

8.纯数字验证

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

9.ajax验证

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

10.复选框验证

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

11.密码确认

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

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

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

13.uri验证

1 uri: {}

四、callback自定义校验规则

 1  schoolName: {
 2         validators: {
 3             notEmpty: {
 4                 message: '请选择分支机构'
 5             },
 6             callback: {
 7                 message: '请选择分支机构',
 8                 callback: function(value, validator) {
 9                     //这里可以自定义value的判断规则
10                     if (value == 0) {//"请选择"
11                             //错误的参数值
12                             return false;
13                         } else {
14                             //合格的参数值
15                             return true;
16                         }
17                 }
18             }
19         }
20     },

 

 

转自：https://blog.csdn.net/lovesman/article/details/104888690

 

标签：和校验,glyphicon,用户名,name,BootstrapValidator,验证,校验,input,message
来源： https://www.cnblogs.com/strongerPian/p/16480540.html