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
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试例子</title> <!-- 使用bootstrapValidator必须引入的js和css文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrapValidator/css/bootstrapValidator.css"/>
<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> <!-- 一个提示控件 -->
<link rel="stylesheet" href="css/toastr.min.css">
<script type="text/javascript" src="js/toastr.min.js"></script>
<script type="text/javascript" src="js/toastrinit.js"></script> <script type="text/javascript">
$(function(){ /**
*下面就是bootstrapValidator的初始化
*定义你需要的哪些表单需要验证，验证什么内容
**/
$("#defaultForm").bootstrapValidator({
feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
username:{
validators:{//从这里也可以容易的看出可以有多个验证信息
notEmpty:{//非空验证
message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
},
stringLength: {//长度限制（中文字符也算一个）
min: 4,
max: 16,
message: "用户名长度只能在4到16位之间！！！"
}
}
},
password:{
validators:{
notEmpty:{
message:"请输入密码！！！"
}
}
},
confirmPassword:{
validators:{
notEmpty:{
message:"请输入确认密码！！！"
},
identical: {//用来判断制定的字段和当前字段一致与否
field: 'password',
message: "两次输入的密码不一致！！！"
}
}
}
}
}); //点击提交按钮时
$("#btn_submit").click(function(){
$("#defaultForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
if($("#defaultForm").data('bootstrapValidator').isValid()){//判断验证是否已经通过
toastr.success("验证通过！！！");//提示成功信息
return false;
}else{
toastr.error("验证失败！！！");
} });
});
</script>
</head> <body>
<div class="container">
<form id="defaultForm" class="form-horizontal">
<div class="col-sm-offset-2" style="margin-top: 200px;">
<div class="form-group">
<label class="col-sm-3 control-label">用户名:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group ">
<button id="btn_submit" type="submit" class="btn btn-sm btn-primary col-sm-offset-4">提交</button>
</div>
</div>
</form>
</div>
</body>
</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，在文末有一个总的简单例子。
在我们日常需要用到的，标红的就已经绰绰有余了。
password:{
validators:{
base64:{
message:"不是基于base64编码的字符串"
},
between:{
message:"输入值不在1到9之间",
//inclusive:false,
min:1,
max:9
},
callback: {
message: "错误格式",
callback: function (value, validator, $field) {
//判断是否为空，
if (value === '') {
return false;
}
if (value.length <) {
return {
valid: false,
message: "长度必须大于8位"
};
}
if (value === value.toLowerCase()) {
return {
valid: false,
message: "至少存在一个大写字母"
}
}
}
},
choice:{
message:"请选择2到4个选项",
min:2,
max:4
},
creditCard: {
message: "无效的 creditCard 号码"
},
cusip:{
message:"无效的 CUSIP 号码"
},
cvv: {
message: "无效的 CVV 号码",
creditCardField: "creditField"
},
date: {
message: "无效的日期格式",
format: "YYYY/MM/DD"
},
different:{
message:"该值 不能和字段1的值相同",
field:"confirmPassword"
},
digits:{
message:"当前含有非数字的字符"
},
ean:{
message:"无效的国际货物编号"
},
emailAddress:{
message:"无效的邮箱地址",
multiple:true
},
/* file: {
extension: "jpeg,png",
type: "image/jpeg,image/png",
maxSize: 2048 * 1024,
message: "选择的文件不符合要求"
}, */
greaterThan:{
inclusive:false,
value: 5,
message:"请输入大于5的值"
},
lessThan:{
inclusive:false,
value: 10,
message:"请输入小于10的值"
},
hex:{
message:"无效的十六进制数"
},
hexColor:{
message:"无效的十六进制颜色值"
},
identical: {
field: "confirmPassword",
message: "两次输入的密码不一致"
},
integer:{
message:"无效的整数类型"
},
notEmpty:{
message:"请输入确认密码"
},
numeric:{
separator:",",
message:"无效的电话号码"
},
phone:{
country:"US",
message:"无效的中国手机号码"
},
regexp: {
regexp: /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/,
message: "密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间"
},
/* threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: "doCheckUsername.do",//验证地址
message: "该用户已存在",//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: "POST"
//自定义提交数据，默认值提交当前input value
data: function(validator) {
return {
username: $("username").val(),
};
}
}, */
stringCase: {
message: "值必须全部大写",
"case": "upper"
},
stringLength:{
message:"长度范围在2到5",
min:2,
max:5
}
},
},
匹配规则如下：
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
bootstrapValidator 使用（包含入门demo，常用方法，以及常用的规则）的更多相关文章
- Linux运维入门到高级全套常用要点
Linux运维入门到高级全套常用要点 目 录 1. Linux 入门篇................................................................. ...
- 【SSH系列】初识spring+入门demo
学习过了hibernate,也就是冬天,经过一个冬天的冬眠,当春风吹绿大地,万物复苏,我们迎来了spring,在前面的一系列博文中,小编介绍hibernate的相关知识,接下来的博文中,小编将继续介绍 ...
- 基于springboot构建dubbo的入门demo
之前记录了构建dubbo入门demo所需的环境以及基于普通maven项目构建dubbo的入门案例,今天记录在这些的基础上基于springboot来构建dubbo的入门demo:众所周知,springb ...
- netty入门demo（一）
目录 前言 正文 代码部分 服务端 客服端 测试结果一: 解决粘包,拆包的问题 总结 前言 最近做一个项目: 大概需求: 多个温度传感器不断向java服务发送温度数据,该传感器采用socket发送数据 ...
- bootstrapValidator常用验证规则总结
bootstrapValidator常用验证规则总结 一 .bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapVa ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- ORM----hibernate入门Demo(无敌详细版)
一.Hibernate(开放源代码的对象关系映射框架)简介: Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全 ...
- storm入门demo
一.storm入门demo的介绍 storm的入门helloworld有2种方式,一种是本地的,另一种是远程. 本地实现: 本地写好demo之后,不用搭建storm集群,下载storm的相关jar包即 ...
- 【Activiti工作流引擎】官方快速入门demo
Activiti官方快速入门demo 地址: https://www.activiti.org/quick-start 0. 版本 activiti 5.22.0 JDK 1.8 1. 介绍 这个快速 ...
随机推荐
- C#小知识点记录，对象的深拷贝
在CSDN中的定义是: public static string CompareExchange( ref string location1, string value, string compara ...
- stm32通过电调带动电机（可按键调速）
这几天在做32通过电调带动电机的实验,上网一查,发现这方面的资料很少,经过自己的亲自实践,总结出以下经验,供大家参考. 论坛上也有很多人说自己在做,但是都遇到了同样的瓶颈.我想他们大多是pwm的频率和 ...
- Linux svn服务的搭建
一.yum安装svn yum -y install subversion 二.查看已安装的svn版本信息 svnserve --version 三.创建一个代码库 1.先创建一个目录 mkdi ...
- SpringMVC结合ajaxfileupload文件无刷新上传
jQuery没有提供ajax的文件上传,我们可以通过ajaxfileupload实现ajax文件的上传.其实ajaxfileupload文件上传特别的简单.下面就演示一下在SpringMVC中实现aj ...
- php头像上传预览
php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...
- SQL Server中关于基数估计如何计算预估行数的一些探讨
关于SQL Server 2014中的基数估计,官方文档Optimizing Your Query Plans with the SQL Server 2014 Cardinality Estimat ...
- poj1159二维树状数组
Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...
- poj2739尺取法+素数筛
Some positive integers can be represented by a sum of one or more consecutive prime numbers. How man ...
- css写出三角形（兼容IE）
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 用java实现大文件分割、排序、合并
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileNotFoundExcepti ...