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)当什么也输入,点击按钮提交时,手动触发验证事件,结果如下:

bootstrapValidator 使用(包含入门demo,常用方法,以及常用的规则)

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

  bootstrapValidator 使用(包含入门demo,常用方法,以及常用的规则)

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的版本,可以是345 或者 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

上一篇:windows PHP 安装 redis 外加扩展


下一篇:笔记:Spring Cloud Hystrix Command属性