一 什么是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 : 验证是否是有效的16进制数
参数 :无
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