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>
（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 },
匹配规则如下：
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，验证通过
参数 ：无
参数 ：无
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
参数：无
参数：无
27. ismn： 验证ISMN（国际标准音乐编号）
参数：无
28. issn ：验证ISSN（国际标准系列号）
参数：无
29. lessThan： 验证值小于（或等于）给定数，则通过
参数：inclusive:默认为true，是否包含边界值
value:必填
30. mac：验证一个mac地址
参数：无
参数：无
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
本文来自博客园，作者：君子如珩~，转载请注明原文链接：https://www.cnblogs.com/shulipeng/p/6534755.html
