一. bootstrapValidator.js库的引用
在Plugins文件夹下，创建bootstrapValidator.js文件夹，里面放置关于Bootstrap框架所用的验证库。
其中bootstrapValidator.js框架表示的即是验证库。开发中用.js,上线时用.min.js 。
boostrapValidator.min.css表示的是验证的样式。
其中validator文件夹下放置的是系统已经写好的验证，我们可以直接使用。
二.前端基本界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>封装插件+Bootstrap进行验证</title> <!-- 引入网络端的Juqery插件和Bootstrap插件 主要是方便书写 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 引入关于bootstrap的验证 --> <link rel="stylesheet" href="Plugins/bootstrap-validator/bootstrapValidator.min.css"> <script src="Plugins/bootstrap-validator/bootstrapValidator.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h2 class="col-md-10 text-center">Bootstrap+自定义验证</h2> </div> <div class="row"> <!-- 里面是具体的表单 --> <form class="form-horizontal" id="myform" method="post" action="#"> <!-- 第一行用户名 --> <div class="form-group"> <label for="loginName" class="col-md-2 control-label">用户名:</label> <div class="col-md-6 has-feedback"> <input type="text" class="form-control" placeholder="请输入你的用户名" name="loginName" value=""> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> </div> <!-- 第二行密码--> <div class="form-group"> <label for="password" class="col-md-2 control-label ">密码</label> <div class="col-md-6"> <input type="password" class="form-control" id="password" placeholder="密码区分大小写" name="password" value=""><span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> </div> <!-- 第三行邮箱-> <div class="form-group"> <label for="email" class="col-md-2 control-label ">邮箱</label> <div class="col-md-6"> <input type="text" class="form-control" id="email" placeholder="请输入正确的邮箱" name="email" value=""> </div> </div> <!-- 该登录和重置的框了 --> <div class="form-group"> <div class="col-md-3 col-md-offset-3"> <input type="submit" class="btn btn-success btn-block" id="submit" value="登录" style="margin-left: -30px" /> </div> <div class="col-md-2 col-md-offset-1"> <button type="reset" class="btn btn-success btn-sm" style="margin-left: -30px">重置</button> </div> </div> </form> </div> </div> </body> </html>
重启服务器后，展示的页面效果如下:
现在，需要添加一些验证。在jQuery中进行相应的添加。与jQuery的验证框架jquery-validate.js差不多，不懂的可以看第三章。
<!-- 引入具体的验证 --> <script> $(function(){ $("#myform").bootstrapValidator({ //利用fields属性 fields:{ // 具体的input表单名称 loginName:{ //可能存在多个验证器 validators:{ //notEmpty 系统定义好的验证，表示不为空 notEmpty:{ message:'用户名不能为空' } } }, password:{ validators:{ notEmpty:{ message:'密码不能为空' } } } } }); }) </script>
重启服务器，进行相关的测试。
不为空的验证，直接移动出去，是不会显示的。需要先输入内容，然后重置才可以显示。
三 添加多种验证
对密码添加多种验证，添加不为空验证，长度验证。
//省略前面的值 password:{ validators:{ notEmpty:{ message:'密码不能为空' }, stringLength:{ min:5, max:15, message:'密码长度应该在5~15之间' } } }
其中stringLength 为系统定义好的验证，里面有相应的属性，min和max, 表示最小和最大值。
重启服务器，进行相关的测试
四 添加邮箱等更复杂的常用验证
直接在password之后，进行相应的追加即可.
email:{ validators:{ notEmpty:{ message:'邮箱不能为空' }, //具体的邮箱验证，用emailAddress. 这是定义好的验证。 emailAddress:{ memailessage:'邮箱格式不正确' } } }
重启服务器，验证邮箱验证。
五 进行自定义验证
对用户名，添加一个自定义的验证。直接在loginName中进行相关的验证。
loginName:{ //可能存在多个验证器 validators:{ notEmpty:{ message:'用户名不能为空' }, //用系统定义好的，正则验证。regexp regexp:{ regexp:/^[a-zA-z]\w{4,}$/, message:'用户名格式不正确' } } }
重启服务器，进行相关的验证。
六 引入正确与错误图标
在引入新的图标之后，会与原先的图标，如用户的glyphicon-user,和plyphicon-lock图标产生重突。 修改了好多次，定义了几个样式，均不能达到满意的效果。如果有谁有好的方法，及时联系我。
在验证的最开始，添加图标:
$("#myform").bootstrapValidator({ message:'该属性不能为空', feedbackIcons:{ valid:'glyphicon glyphicon-ok', invalid:'glyphicon glyphicon-remove', validating:'glyphicon glyphicon-refresh' }, //利用fields属性 fields:{ //具体的验证 }
其中ok表示正确的图标，remove表示错误的图标，refresh表示刷新的图标，在验证时显示。一般验证比较快，这个图标没有怎么显示。
图标是重合在一起的。 故需要将以前的图标去掉。要想同时显示，没有想到好的办法。将图标放在前面，会影响placeholder的值。
<form class="form-horizontal" id="myform" method="post" action="#"> <!-- 第一行用户名 --> <div class="form-group"> <label for="loginName" class="col-md-2 control-label">用户名:</label> <div class="col-md-6"> <input type="text" class="form-control " placeholder="请输入你的用户名" name="loginName" required value=""> </div> </div> <!-- 第二行密码--> <div class="form-group"> <label for="password" class="col-md-2 control-label ">密码</label> <div class="col-md-6"> <input type="password" class="form-control" id="password" placeholder="密码区分大小写" name="password" value=""> </div> </div> <!-- 第二行密码--> <div class="form-group"> <label for="email" class="col-md-2 control-label ">邮箱</label> <div class="col-md-6"> <input type="text" class="form-control" id="email" placeholder="请输入正确的邮箱" name="email" value=""> </div> </div>
现在，上面 是label显示标签，下面是input输入框。是很干净的写法。
这个时候，重启服务器，进行相关的验证后:
七 添加成功和重置验证
如果验证成功的话，下面的登录按钮才会可用。如果验证不通过的话，下面的登录按钮是不可用的。需要添加这样的方法
在form表单的验证上面 ，添加:
//成功的验证 如果是submit按钮的话， var bootstrapValidator = form.data('bootstrapValidator'); bootstrapValidator.on('success.form.bv', function (e) { alert('成功了吗?'); e.preventDefault(); //提交逻辑 } ); //如果是普通的button铵钮 $("buttonName").on("click", function(){ //获取表单对象 var bootstrapValidator = form.data('bootstrapValidator'); //手动触发验证 bootstrapValidator.validate(); if(bootstrapValidator.isValid()) { //表单提交的方法、比如ajax提交 } }); $('#reset').click(function(){ //取得验证框架 var validator = $("#myform").data('bootstrapValidator'); //重启验证 validator.resetForm(); }) $('input[required]').before('<span style="color:red;position: absolute;margin-left: -18px; margin-top: 4px; font-size: 22px;">*</span>'); $("#myform").bootstrapValidator({ });
八 提示消息的使用
loginName:{ //下面没有写message的话，则用这个用户名验证失败。 //如果写了，则用具体的。相当于局部和全部 message:'用户名验证失败', validators:{ notEmpty:{ message:'用户名不能为空' }, regexp:{ regexp:/^[a-zA-z]\w{4,}$/, message:'用户名格式不正确' } } }
九 去除不可用的验证
如果input标签所用的是disabled,hidden,visible修饰时，这里标签是不可用或者隐藏的，如果有这样的存在，而且给它设置了验证的话，那么验证是无法通过的，是无法正确提交表单的。需要将这些不可用给去除掉。
$("#myform").bootstrapValidator({ //去除不可用的验证 excluded: [':disabled', ':hidden', ':not(:visible)'], fields:{ }
十 添加验证规则
用live添加。 与excluded同级的目录下:
$("#myform").bootstrapValidator({ excluded: [':disabled', ':hidden', ':not(:visible)'], /** * 生效规则（三选一） * enabled 字段值有变化就触发验证 * disabled,submitted 当点击提交时验证并展示错误信息 */ live: 'submitted',
enabled表示随时验证，服务器承受压力大。 submitted,在最后提交时进行验证。
十一 变换验证
通俗理解就是怎么验证，用trigger 与上面的live同级。
trigger:'blur', //focus blur keyup
focus表示获取焦点，blur即鼠标离开,keyup 键盘抬起。
十二 Ajax验证
在fileds后面，添加
submitHandler: function(validator, form, submitButton) { // 实用ajax提交表单 $.post(form.attr('action'), data数据, function(result) { //成功后操作} , 'json'); }
十三 指定提交按钮
在与live,trigger等同级的目录下
/** * 指定提交的按钮，例如：'.submitBtn' '#submitBtn' 有class形式和id形式。 * 里面放置的是$() 可以取出的值。 * 当表单验证不通过时，该按钮为disabled */ submitButtons: 'button[type="submit"]',
很常用的，如同意协议后，注册按钮才可用。
十四 常用事件
- 重置某一字段验证
$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );
- 重置所有字段验证
$(formName).data("bootstrapValidator").resetForm();
3 手动触发验证
//触发全部验证 $(formName).data(“bootstrapValidator”).validate(); //触发指定字段的验证 $(formName).data(“bootstrapValidator”).validateField('fieldName');
4 获取当前验证状态
var flag = $(formName).data(“bootstrapValidator”).isValid();
如果全部验证通过，返回true. 如果有不通过的，返回false.
5 获取验证对象
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');
如果取得了，为相应的jquery对象。如果没有，则返回null。
可以通过它，对某一个字段进行相关的验证。
谢谢!!!
