bootstrapValidator 使用（包含入门demo，常用方法，以及常用的规则）

一   什么是bootstrapValidator？

   -- 一个基于 jquery，boostrap 的表单验证框架....简单实用上手快，页面美观还过得去，不废话了，直接撸。

 

 

二  bootstrapValidator demo

 

　　1.下载相应的 js 和 css 文件 : http://pan.baidu.com/s/1nuLAhLJ

 

      2.在对应需要表单验证的页面导入 js 和 css 文件 , 由于bootstrapValidator是基于 jquey 和 bootstrap 的，所以需要导入 jquery 和 bootstrap .　　          如下:

　　　　css:        <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>

　　　　　　　　     <link rel="stylesheet" href="bootstrapValidator/css/bootstrapValidator.css"/>

　　　　 JS:            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

　　　　　　　　　　<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

　　　　　　　　　　<script type="text/javascript" src="bootstrapValidator/js/bootstrapValidator.js"></script>

　　

　　3.编写自己需要验证的html　

复制代码
  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 
  3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4 <html>
  5   <head>
  6     <title>测试例子</title>
  7     
  8     <!-- 使用bootstrapValidator必须引入的js和css文件 -->
  9     <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
 10     <link rel="stylesheet" href="bootstrapValidator/css/bootstrapValidator.css"/>
 11     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 12     <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
 13     <script type="text/javascript" src="bootstrapValidator/js/bootstrapValidator.js"></script>
 14     
 15     <!-- 一个提示控件 -->
 16     <link rel="stylesheet" href="css/toastr.min.css">
 17     <script type="text/javascript" src="js/toastr.min.js"></script>
 18     <script type="text/javascript" src="js/toastrinit.js"></script>
 19     
 20     <script type="text/javascript">
 21         $(function(){
 22         
 23             /**
 24              *下面就是bootstrapValidator的初始化
 25              *定义你需要的哪些表单需要验证，验证什么内容
 26              **/
 27             $("#defaultForm").bootstrapValidator({
 28                 feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
 29                     valid: 'glyphicon glyphicon-ok',
 30                     invalid: 'glyphicon glyphicon-remove',
 31                     validating: 'glyphicon glyphicon-refresh'
 32                 },
 33                 fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
 34                     username:{
 35                         validators:{//从这里也可以容易的看出可以有多个验证信息
 36                             notEmpty:{//非空验证
 37                                 message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
 38                             },
 39                             stringLength: {//长度限制（中文字符也算一个）
 40                                 min: 4,
 41                                 max: 16,
 42                                 message: "用户名长度只能在4到16位之间！！！"
 43                             }
 44                         }
 45                     },
 46                     password:{
 47                         validators:{
 48                             notEmpty:{
 49                                 message:"请输入密码！！！"  
 50                             }
 51                         }
 52                     },
 53                     confirmPassword:{
 54                         validators:{
 55                             notEmpty:{
 56                                 message:"请输入确认密码！！！"
 57                             },
 58                             identical: {//用来判断制定的字段和当前字段一致与否
 59                                 field: 'password',
 60                                     message: "两次输入的密码不一致！！！"
 61                             }
 62                         }
 63                     }
 64                 }
 65             });
 66             
 67             //点击提交按钮时
 68             $("#btn_submit").click(function(){
 69                 $("#defaultForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
 70                 if($("#defaultForm").data('bootstrapValidator').isValid()){//判断验证是否已经通过
 71                     toastr.success("验证通过！！！");//提示成功信息
 72                     return false;
 73                 }else{
 74                     toastr.error("验证失败！！！");
 75                 }
 76                 
 77             });
 78         });
 79     </script>
 80   </head>
 81   
 82   <body>
 83   <div class="container">
 84       <form id="defaultForm" class="form-horizontal">
 85           <div class="col-sm-offset-2" style="margin-top: 200px;">
 86             <div class="form-group">
 87                 <label class="col-sm-3 control-label">用户名:</label>
 88                 <div class="col-sm-3">
 89                         <input type="text" class="form-control"  name="username" />
 90                    </div>
 91            </div>
 92            <div class="form-group">
 93                 <label class="col-sm-3 control-label">密码:</label>
 94                 <div class="col-sm-3">
 95                     <input type="password" class="form-control"  name="password" />
 96                </div>
 97             </div>
 98             <div class="form-group">
 99                 <label class="col-sm-3 control-label">确认密码:</label>
100                 <div class="col-sm-3">
101                     <input type="password" class="form-control"  name="confirmPassword" />
102                </div>
103             </div>
104             <div class="form-group ">
105                 <button id="btn_submit" type="submit" class="btn btn-sm btn-primary col-sm-offset-4">提交</button>
106             </div>
107         </div>
108     </form>
109   </div>
110   </body>
111 </html>
View Code
复制代码

　　（1）当什么也输入，点击按钮提交时，手动触发验证事件，结果如下：

              

　  （2）当输入的用户名小于4位和大于16位时，两次密码不一样时:

　　

      4.结束，这是一个简单的demo，还有更多的官方定义的匹配规则在下面都有初略介绍，其中可以使用正则来自己定义自己所需要的规则：

　　

复制代码
password:{
    validators:{
           notEmpty:{
               message:"请输入密码！！！"  
                     }
           },
           regexp: {// 自定义的规则 
                regexp: /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
                message: "密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间"
           },
         },
复制代码

 

三 一些常用的方法

　　两种调用api的办法：

　　 ①.$(form).data('bootstrapValidator').methodName(parameters) ；（个人推荐这种，和api的耦合度高，关键看的懂）

　　 ②.$(form).bootstrapValidator(methodName, parameters);  

 

　　 常用的方法：

　　1. enableFieldValidators(field*, enabled*, validator): BootstrapValidator - 启用，禁用给定字段的验证器

　　　　应用场景：需要动态的启动一个验证信息，某些情况下需要此验证，某些情况下不需要

　　               $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',true,'notEmpty') 使验证生效;

　　　　　　　$('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',false,'notEmpty')使验证失效;

　　　　　　　使某一个字段所有的都失效，生效：

               　  $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',true) 使验证生效;

 

　　　　　　  $('#enabledForm').data('bootstrapValidator').enableFieldValidators('password',false)使验证失效;

 

     2. getFieldElements(field)根据指定的name获取指定的元素，返回值是null或一个jQuery对象数组。

　　　　应用场景 ：多用于在callback函数中用于获取其他field的值

 

     3.resetForm(Boolean):参数设为true将把输入也全清空。当你调用这个方法发现不好用的时候，在bootstrapValidator初始化时增加属性： excluded: ':disabled'

　　　　应用场景 ：重置表单中设置过校验的内容，将隐藏所有错误提示和图标。

 　　　　　　

　　4.validate（）

　　　　应用场景 ：手动对表单进行校验，validate方法可用在需要点击按钮或者链接而非提交对表单进行校验的时候。

 

　　5.isValid（）

　　　　应用场景：点击按钮时用于判断是否验证通过，在此之前得手动触发一次validate（）方法

 

      6.updateStatus(field, status, validatorName)

　　　　应用场景：更新指定的字段状态。BootstrapValidator默认在校验某个字段合法后不再重新校验，当调用其他插件或者方法可能会改变字段值时，需要重新对该字段进行校验                                                    $("#defaultForm").data('bootstrapValidator').updateStatus('username', 'NOT_VALIDATED').validateField('username');

 

      7.validateField(field)

　　　　应用场景：对指定字段进行校验

 

　　8.destory（）

　　　　应用场景：如果查看页面和编辑页面是同一个页面，此时，在处于查看时：应当将验证器给destory，不让他显示错误信息（个人因为有用到）

 

　　9.revalidateField(field*)：

　　　　  应用场景：使用于当其它控件改变了当前输入值，重新触发当前字段的校验。官方解释：By default, the plugin doesn't re-validate a field once it is already validated and marked as a valid one. When using with other plugins, the field value is changed and therefore need to be re-validated.

　　　　　等同于：

?
$(form).data('bootstrapValidator')
　　.updateStatus(field, 'NOT_VALIDATED')
　 .validateField(field);
// Or
$(form).bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
　　 .bootstrapValidator('validateField', field);

 

　　

 

 

　　

 

 

 

四 官方定义的匹配规则大全  -----> 官方API

 

 　　 都存在参数message，在文末有一个总的简单例子。

      在我们日常需要用到的，标红的就已经绰绰有余了。

 　　　

复制代码
简单的例子大全=====》 
  1                     password:{
  2                         validators:{
  3                             base64:{
  4                                 message:"不是基于base64编码的字符串"  
  5                             },
  6                             between:{
  7                                 message:"输入值不在1到9之间",
  8                                 //inclusive:false,
  9                                 min:1,
 10                                 max:9
 11                                 
 12                             },
 13                             callback: {
 14                                 message: "错误格式",
 15                                 callback: function (value, validator, $field) {
 16                                     //判断是否为空，
 17                                     if (value === '') {
 18                                         return false;
 19                                     }
 20                                     
 21                                     if (value.length < 8) {
 22                                         return {
 23                                             valid: false,
 24                                             message: "长度必须大于8位"
 25                                         };
 26                                     } 
 27                                     
 28                                     if (value === value.toLowerCase()) {
 29                                         return {
 30                                             valid: false,
 31                                             message: "至少存在一个大写字母"
 32                                         }
 33                                     }
 34         
 35                                 }
 36                             },
 37                             choice:{
 38                                 message:"请选择2到4个选项",
 39                                 min:2,
 40                                 max:4
 41                             },
 42                             creditCard: {
 43                                     message: "无效的 creditCard 号码"
 44                             },
 45                             cusip:{
 46                                 message:"无效的 CUSIP 号码"
 47                             },
 48                             cvv: {
 49                                 message: "无效的 CVV 号码",
 50                                 creditCardField: "creditField"
 51                             },
 52                             date: {
 53                                 message: "无效的日期格式",
 54                                 format: "YYYY/MM/DD"
 55                             },
 56                             different:{
 57                                 message:"该值    不能和字段1的值相同",
 58                                 field:"confirmPassword"
 59                             },
 60                             digits:{
 61                                 message:"当前含有非数字的字符"
 62                             },
 63                             ean:{
 64                                 message:"无效的国际货物编号"
 65                             },
 66                             emailAddress:{
 67                                 message:"无效的邮箱地址",
 68                                 multiple:true
 69                             },
 70                            /*  file: {
 71                                 extension: "jpeg,png",
 72                                 type: "image/jpeg,image/png",
 73                                 maxSize: 2048 * 1024,
 74                                 message: "选择的文件不符合要求"
 75                             }, */
 76                             greaterThan:{
 77                                 inclusive:false,
 78                                 value: 5,
 79                                 message:"请输入大于5的值"
 80                             },
 81                             lessThan:{
 82                                 inclusive:false,
 83                                 value: 10,
 84                                 message:"请输入小于10的值"
 85                             },
 86                             hex:{
 87                                 message:"无效的十六进制数"
 88                             },
 89                             hexColor:{
 90                                 message:"无效的十六进制颜色值"
 91                             },    
 92                             identical: {
 93                                 field: "confirmPassword",
 94                                     message: "两次输入的密码不一致"
 95                             },
 96                             integer:{
 97                                 message:"无效的整数类型"
 98                             },
 99                             notEmpty:{
100                                 message:"请输入确认密码"
101                             },
102                             numeric:{
103                                 separator:",",
104                                 message:"无效的电话号码"
105                             },
106                             phone:{
107                                 country:"US",
108                                 message:"无效的中国手机号码"
109                             },
110                             regexp: { 
111                                 regexp: /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
112                                 message: "密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间"
113                             },
114                          /*   threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
115                            remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
116                                  url: "doCheckUsername.do",//验证地址
117                                  message: "该用户已存在",//提示消息
118                                  delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
119                                  type: "POST"
120                                  //自定义提交数据，默认值提交当前input value
121                                  data: function(validator) {
122                                    return {
123                                        username: $("username").val(),
124                                    };
125                                 }
126                                  
127                            }, */
128                            stringCase: {
129                                 message: "值必须全部大写",
130                                 "case": "upper"
131                             },
132                             stringLength:{
133                                 message:"长度范围在2到5",
134                                 min:2,
135                                 max:5
136                             }
137                         },
138                     },
View Code
复制代码

 　　  

　　  匹配规则如下：

　　  1. base64 : 验证是否是base64编码的字符串

　　　　　　　　 参数 ：无

         2. between : 验证输入值是否在（包含或不包含）两个给定数字之间

　　　　　　　　　　　参数 ：inclusive：是否包含边界，如果是false，表示不包括两边边界值，默认是true.

　　　　　　　　　　　　　　 min：最小值.

　　　　　　　　　　   　　    max：最大值.

　　   3. callback : 从回调函数返回验证结果，这个真的好用，它也可以作为自定义规则来使用。

　　　　　　　　 参数：callback：function(value,validator,$field){

　　　　　　　　　　　　　　　　　　　// value 当前字段的值

                                                     // validator 整个bootstrapValidator验证器　

　　　　　　　　　　　　　　　　　　  // $field 当前的字段的jQuery对象

　　　　　　　　　　　　　　　　　　 } 

　　    4.choice : 验证复选框，多选下拉框选中的个数

　　　　　　　　参数 ： min：最小选择个数.

　　　　　　　　　　　　　 　max: 最大选择个数.

　　     5.creditCard: 验证信用卡卡号是否有效（应该是美国等国家的一些信用卡类型，不是很清楚）

　　　　　　　　参数 ：无

         6.cusip：验证 CUSIP 号（用于标识金融中的有价证券的一种字符串，不是很清楚）

       　　　　　　　　参数 ：无

          7.cvv ： 验证 CVV 号 （由卡号、有效期和服务约束代码生成的3位或4位数字，不是很清楚）

 　　　　　　　　　　参数 ：creditCardField 对应5

　      8.date ：日期验证

　　　　　　　　　　 参数：format：日期格式，默认是 MM/DD/YYYY

　　　　　　　　　　　　　 separator:用来分割日期的字符，默认是 "/"

　       9.different : 验证值是否和给定字段的值是否一样，一样则返回false，验证不通过

　　　　　　　　　　 参数：field：指定的字段，（官方api说：如果有多个字段，用 ","分割，没理解什么意思，做测试未成功，可能是版本问题）

　        10. digits：如果值只包含数字，则返回true，验证通过

 　　　　　　　　　　参数 ：无

          11. ean ： 验证EAN（国际货物编号）

 　　　　　　　　　　参数 ：无

          12. emailAddress：验证邮箱格式

　　　　　　　　　　参数：multiple：默认false（官方api说：如果设置为true，可以验证多个邮箱，多个邮箱之间用","或者","分割，做测试未成功，可能是版本问题）

　　　　　　　　　　　　separator：正则，默认是/[,;]/ 多个邮箱之间分割符

           13. file ： 验证上传的文件，包括大小，类型

　　　　　　　参数 : extension ： 文件后缀名，多条件使用","分割

　　　　　　　　　　　　  type：允许的文件类型，多条件使用","分割

　　　　　　　　　　　　  maxSize ：文件的最大size

　　　　　　　　　　　　　minSize ：文件的最小size

　        14. greaterThan ： 验证输入的值是否大于（等于）某个值

　　　　　　　　　参数：inclusive 默认是true，代表是否包含边界值

　　　　　　　　　　　　value 给定的比较值

           15. grid ： 一种格式（不清楚　）

　　　　　　　　 参数 ：无

　      16. hex　：　验证是否是有效的１６进制数

　 　　 　　　参数 ：无

         17. hexColor : 验证是否是有效的代表16进制颜色的数字

　　　　　　  参数 ：无

　        18. iban ： 验证国际银行账户（IBAN）

　　　　　　　　   参数：country：一个国际标准ISO-3166国家对应的code

           19. id ： 验证指定国家的身份证号码是否符合

　　　　　　　　  参数：country：一个国际标准ISO-3166国家对应的code （我大天朝的好像没给验证！！！）

　        20. identical ： 验证值是否和给定字段是否相同，相同验证通过，不同验证不通过，有用于确认密码和新密码一致。

　　　　　　　　 参数 ：field：必填，指定字段的name属性

　        21. imei ： 验证IMEI（国际移动台设备标识）

　　　　　　　　参数：无

　        22. imo  ：验证IMO（国际海事组织）

　　                参数：无

         23. integer : 验证输入的值是否是整数

　　　　　　　  参数：无

         24. ip ： 验证ip地址，支持ipv4和ipv6

　　　　　　　 参数：ipv4 默认是true

　　　　　　　　　　 ipv6 默认是true

         25. isbn :验证ISBN（国际标准图书编号）。支持ISBN 10和ISBN 13

　　　　　　　 参数：无

         26. isin :验证ISIN（国际证卷识别号）

　　　       　  参数：无

　      27. ismn： 验证ISMN（国际标准音乐编号）

　　　　　　　 参数：无

           28. issn ：验证ISSN（国际标准系列号）

　　　　　　　 参数：无

　         29. lessThan： 验证值小于（或等于）给定数，则通过

　　　　　 参数：inclusive:默认为true，是否包含边界值

　　　　　              value:必填

　　   30. mac：验证一个mac地址

　　　　　　  参数：无

          31. meid :验证MEID（移动设备标识符）

　　  　　　　参数：无

         32. notEmpty:验证值是否为空

　　　　　　  参数：无

           33. numeric:验证电话号码

　　　　　　  参数：separator 分割符，默认是 "." (官方api说","可以，但我测试没成功)

           34. phone ：验证手机号码

                  参数：country ：一个国际标准ISO-3166国家对应的code （我大天朝的好像没给验证！！！）

        35. regexp 正则验证，最好使的，可自定义自己规则。

　　　　　　参数：regexp 对应的正则表达式

           36.remote 利用ajax请求远程执行检查。

　　　　　　参数：url：验证地址

　　　　　　　　　delay：设置延迟发送验证ajax时间，毫秒为单位，每输入一个字符发送一个请求对服务器压力太大

　　　　　　　　　type:请求方式

　　　　　　　　　data：传入后台的参数

　　　　37.rtn ：验证RTN（路由传输号码）

　　　　　参数：无

           38.sedol ：验证SEDOL（联邦所每日官方名单）

　　　　　　 参数：无

          39.siren ：验证警报号码

　　　　　　参数：无

          40.siret ： 验证警报编号

　　　　　　参数:无

　　　  41.step：验证该值是否是有效的第一步（不懂什么鬼！！！）

　　　　　　参数：baseValue 基本值，默认为0

　　　　　　　　   step：该步骤，默认为1

          42.stringCase ：验证字符串是大写还是小写（就是输入时只能是全部大写，或者全部大写）

　　　　　　参数 ："case" ：默认是lower ，可以是upper,注意case是关键字赋值时  "case"："upper"

　　　 43.stringLength :验证字符串的长度（包括左右边界）

　　　　　　参数： min:最小长度

　　　　　　　　　 max：最大长度

          44.url ：验证URL地址

　　　　　　参数： allowLocal :包含私有和本地ip，默认是false

　　　　　　　　　protocol:协议，用逗号分隔。默认情况下，它设置为http, https, ftp

         45.uuid ：验证UUID，支持v3，v4，v5

　　　　　　参数 ：version：UUID的版本，可以是3, 4, 5 或者 all，默认是all　　 

         46.vat 验证增值税号

　　　　　　参数：country ：一个国际标准ISO-3166国家对应的code 

　　   47.vin 验证US VIN（车辆标识号）　　

　　　　　　参数：无

　　  48.zipCode 验证邮政编码

　　　　　　参数：　country ：一个国际标准ISO-3166国家对应的code 

 

 

五 结束语 

　  第一次写博客，有点忐忑

     虽然耗费了半天时间，但是学习到的却很多

　  可怜了我女票，就这样被我冷落了一天，tx

     以后就开始慢慢的开始写博客吧，不写多，一周写一篇就好了

     当做学习的总结，也当做积累

　  水平有限，如有错误的地方，希望大家可以友情指出

　 你我共同进步，开开心心的就好

    2017-03-09 21:27:16

posted @   君子如珩~  阅读(5660)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手