上一章简单介绍了jQuery前端基本验证(三),如果没有看过，请观看上一章
个人认为，Bootstrap提供的验证框架，是目前前端验证最好，最实用的框架。以后的前端验证，强烈建议均使用bootstrapValidator.js库。
本文参考了:陨落的轨迹前辈的文章:
https://blog.csdn.net/u013938465/article/details/53507109
和黄聪前辈的文章:
https://www.cnblogs.com/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="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:'用户名格式不正确'
}
}
}
$("#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。
可以通过它，对某一个字段进行相关的验证。
谢谢!!!