上一章简单介绍了jQuery前端基本验证(三),如果没有看过，请观看上一章
个人认为，Bootstrap提供的验证框架，是目前前端验证最好，最实用的框架。以后的前端验证，强烈建议均使用bootstrapValidator.js库。
本文参考了:陨落的轨迹前辈的文章:
/u013938465/article/details/53507109
和黄聪前辈的文章:
/huangcong/p/5335376.html
一. 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="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="/jquery/3.1.0/jquery.min.js"></script><script src="/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=""> <spanclass="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:'用户名不能为空'},//用系统定义好的，正则验证。regexpregexp:{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" requiredvalue=""> </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:'用户名格式不正确'}}}
$("#myform").bootstrapValidator({//更大的全局验证。如果字段没有写message,则用这一个"该属性未通过验证"message:'该属性未通过验证',//利用fields属性fields:{ }
九 去除不可用的验证
如果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。
可以通过它，对某一个字段进行相关的验证。
谢谢!!!
