bootstrap+bootstrapValidator做的登陆界面在线演示
第一步：引入bootstrapValidator插件的js文件和css样式：
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
PS：因为bootstrapValidator插件和bootstrap插件是融合的非常完美的插件，并且bootstrap插件也是一款非常棒的网页前台插件，所以在使用的时候，一般都是两个插件同时使用的。
第二步：部署HTML代码，就是你自己的表单项：
<form id="AngelForm" class="form-horizontal" onsubmit="return false">
<Div class="form-group row">
<label class="col-xs-3 control-label text-right">用户名:</label>
<div class="col-xs-6">
<input name="UName" type="text" class="form-control">
</div>
</Div>
<Div class="form-group">
<label class="col-xs-3 control-label text-right">密码:</label>
<div class="col-xs-6">
<input name="UPassWord" type="password" class="form-control">
</div>
</Div>
<Div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<button id="Login" type="submit" class="btn btn-primary">登陆</button>
<label id="info" class="text-danger"></label>
</div>
</Div>
</form>
PS：
上面的内容是基于bootstrap插件来布置，如果想要了解更多关于bootstrap插件的使用方法和实例，可以关注本站的bootstrap插件栏目。
上面HTML代码中，form表单里，站长添加了一个 onsubmit="return false" 的属性，意思是为了阻止表单的提交，这样写的好处就是当我们的网页相关的JS文件没有加载完成时，点击提交按钮，表单就不会提交。
第三步：开始编写具体的验证代码，
注意，官网里有具体的把相关代码写到HTML各标签的属性里的方法，但是站长从不这样来用，因为这样写对后期网站的维护非常麻烦，我们把所有的代码都写到一个单独的JS文件里，HTML只是用来展示内容和页面，分工具体，后期维护起来也简单。
<script language="JavaScript">
$(function() {
$("#AngelForm").bootstrapValidator({
live: 'enabled',
trigger: 'blur keyup',
verbose: false,
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
container: "#info",
submitButtons: "#Login",
fields: {
UName: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength:{
min:"4",
max:"10",
message:"最短为4,最长为10"
},
regexp: {
regexp: /^[a-zA-Z0-9_]{4,10}$/,
message: '只能为字母数字，最短4，最长10！'
},
callback: {}
}
},
UPassWord: {
validators: {
notEmpty: {
message: '密码不能为空！'
},
regexp: {
regexp: /^[a-zA-Z0-9_]{1,20}$/,
message: '只能为字母数字，最短1，最长20！'
},
callback: {}
}
}
}
});
});
</script>
第四步：当上面我们配置的各种验证项都通过时，就要提交表单了，我们可以直接使用bootstrapValidator插件给我们提供的表单验证成功事件来提交表单：
$("#AngelForm").on('success.form.bv', function(e) {
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
var action ="/Html/aijquery/ajax.asp";
$.post(action,$form.serialize(),function(result){
console.log(result);
},"json");
});
PS：更多的关于bootstrapValidator插件的事件，请看：
好了，到这里，我们就已经完成了，通过上面的这四个步骤，大家可以发现，难点就在第三步里，下面站长就来仔细的和大家分析一下第三步里的代码。
首先，我们先来看使用bootstrapValidator插件来写具体的验证规则时的大致框架：
$("#表单ID").bootstrapValidator({
[a.统一配置项或验证规则的主题配置]，
fields:{
form项的name:{
[b.验证本表单项时，所有规则的统一配置]
validators:{
[c.具体的验证规则]
}
}
}
});
这样一看，是不是就清楚多了？我们在使用bootstrapValidator插件的时候，框架都是上面这样的，如果我们要动手自己写代码的时候，可以直接先把上面的框架复制过去，然后再把中括号去掉，换成自己需要的内容，这样一清二楚，明明白白。
下面站长来具体说说上面框架里各个部分里常用的属性，及其作用和介绍：
[a.统一配置项或验证规则的主题配置]：
顾名思义，这一区域的各种属性针对的是整个验证过程当中的，如我们可以定义统一的验证规则的触发方式，验证出错时统一的提示信息，提示信息的显示位置等，下面站长来说下具体的属性内容：
$("#表单ID").bootstrapValidator({
excluded: [':disabled', ':hidden', ':not(:visible)'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
live: 'enabled',//或disabled,submitted
trigger: 'blur keyup',
message: '输入的值格式不正确',
submitButtons: '#Login',
submitHandler: function(validator, form, submitButton) {
$.post(form.attr('action'),form.serialize(),function(result) {
//具体的代码内容
}, 'json');
}，
trigger:null,
verbose：false,
fields:{
form项的name:{
[b.验证本表单项时，所有规则的统一配置]
validators:{
[c.具体的验证规则]
}
}
}
});
下面站长来给大家详细说说上面的各项属性的含义：
1.excluded:
excluded: [':disabled', ':hidden', ':not(:visible)']
excluded是用来设置不验证的表单项，上面写出的值就是excluded的默认值，一般我们不需要配置此项，
但如果你在实际当中需要不验证某个表单项，可以直接把表单项的ID添加进去，如：
excluded: [':disabled', ':hidden', ':not(:visible)','#UName'],
PS：在文章最上面的在线实例演示里，大家可以把这句代码加进去，查看效果！
2.feedbackIcons:
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
feedbackIcons是用来设置表单项处在不同验证状态[分别是正确、失败和等待]时所显示的图标，因为bootstrapValidator插件就是在bootstrap插件的结构上来写的，所以所用到的都是根据bootstrap插件[大于3.1，小于4.0的版本]的样式及名称，当然，这并不表示我们不能自己修改它的样式：
feedbackIcons: {
valid: 'zhengque',
invalid: 'shibai',
validating: 'dengdai'
},
如上，我们定义好了不同验证状态所要显示的样式名称，并且在样式表里写好具体的样式内容后，还需要修改一下默认的样式属性来替代原来的样式，来看下面的截图：
image.png
截图里，圈起来的三个属性是关键的属性，在bootstrapValidator插件里，默认的属性如下：
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
我们可以根据自己的需要来具体的调整改写我们自己所要的样式。
当然，如果我们不想让它显示图标的话，只需要把它设为false就行了：
1
feedbackIcons:false,
3.live：
live: 'enabled',//或disabled,submitted
live用来设置触发验证规则的方式，enabled表示值有变化时就触发，disabled和submitted的效果一样，就是当要提交表单时再触发验证，具体的大家可以在文章最上面站长给的在线实例演示里，自己去测试。
4.trigger:
trigger: 'blur keyup',
trigger:用来设置具体的触发验证规则的方式，只有上面的live设置为enabled时，trigger才有效，可以为多个值，中间用空格隔开，具体的大家可以在上面站长提供的在线实例演示里自己动手测试。
5.message:设置所有验证规则里出错时的提示信息；
这个没什么好说的，一般我们都设置在具体的每个验证规则里，一般不在这里验证，但如果哪个验证规则里没有设置要验证的信息，那么就会显示这里设置的内容。
6.submitButtons
submitButtons: '#Login',
submitButtons用来设置表单里的提交按钮，设置的规则参考的是jquery里的规则，所以也可以这样写：
submitButtons: 'button[type="submit"]',
7.submitHandler：
submitHandler: function(validator,form,submitButton) {
$.post(form.attr('action'),form.serialize(),function(result) {
//具体的代码内容
}, 'json');
}
submitHandler用来设置表单提交的操作，自带的三个参数的含义如下：
- validator: 表单验证实例对象
- form jquery对象 指定表单对象
- submitButton jquery对象 指定提交按钮的对象
站长一般不习惯在这里设置表单提交，而是在success.form.bv事件里，所以如果你也不想在这里提交表单的话，可以不写这个配置项，也可以这样来写：
submitHandler:null,
8.verbose:
verbose:false,
verbose的值为true时，那么将显示表单项里所有不符合的错误提示信息，为false时，则只显示一条信息；
如上面站长给的在线实例里，验证用户名时，有两个验证规则是重复的，stringLength和regexp，一个是bootstrapValidator插件提供的用来验证值的长度的规则，一个是我们自己写的正则验证规则，如果我们把verbose设为true时，那么在用户名验证不通过时，就会显示所有的验证提示信息。
[b.验证本表单项时，所有规则的统一配置]：
这个区域设置的验证表单里某个表单项时的一些规则和配置，比如上面实例里，我们在验证用户名，也就是表单项：UName时，我们为它指定了很多的验证规则，有不能为空，判断字符长度和自定义的正则验证规则，那么我们就可以在这里给这些规则配置一下统一的要求，比如统一的错误提示信息，错误提示信息显示的位置，和触发验证规则的方式等，看下面具体的一些配置属性：
$("#表单ID").bootstrapValidator({
[a.统一配置项或验证规则的主题配置]，
fields:{
UName:{
container:"#ErrInfo",
message:"用户名格式不正确",
trigger:"focus keyup",
selector:"#UName",
validators:{
[c.具体的验证规则]
}
}
}
});
下面站长来具体说下这些属性：
1.container:
container:"#ErrInfo"//或者用css属性 ".ErrInfo"
container用来设置错误信息的显示位置，这个不用多作解释，大家应该都能明白。
2.message:
message:"用户名格式不正确",
message:用来设置错误提示信息，如果具体的验证规则里没有指定提示信息，就会显示这里设置的信息。
3.trigger:
trigger:"focus keyup",
trigger和上面站长说的a区域里的trigger是一样的，这里如果设置了trigger触发验证的方式，那么就会用这里设置的方式，如果这里没设置，就会用上面a区域里设置的方式。
4.selector:
selector:"#UName",
selector用来设置和定义要验证的节点，一般情况下我们都不会用到这个配置项，但如果我们的表单里，有多个相同属性的表单，它们的验证要求也都是一样的，那么这个属性就会非常有用了，比如有时表单里可能会需要输入两个名字，现用名和曾用名，那么我们就可以用selector来统一给他们验证，给它们加上同样的CSS样式，然后这样写就行：
selector:".UserName",
[c.具体的验证规则]:
这个区域里就是具体的验证规则了，下面站长给大家介绍一下一些常用的规则：
$("#表单ID").bootstrapValidator({
[a.统一配置项或验证规则的主题配置]，
fields:{
form项的name:{
[b.验证本表单项时，所有规则的统一配置]
validators:{
notEmpty: {message: '用户名不能为空'},
stringLength:{min:"4",max:"10",message:"最短为4,最长为10"},
regexp: {regexp: /^[a-zA-Z0-9_]{4,10}$/,message: '只能为字母数字，最短4，最长10！'},
callback:{
callback:function(value,validator,$field){
if(value.length > 0) {
var v=value.replace(/，/g,",");
$field.val(v);
}
return true;
}
}，
remote:{
type: 'POST',
url: 'check.asp',
message: '用户名被占用',
delay: 1000
},
between:{
min:1,
max:99,
message:"输入的值必须在1-99之间"
}
}
}
}
});
- notEmpty:很简单，意思就是不能为空；
notEmpty: {
message: '用户名必填不能为空'
},
- stringLength：值的长度，min设置最短，max设置最长；
stringLength: {
min: 6,
max: 30,
message: '用户名长度不能小于6位或超过30位'
},
- regexp：正则验证，
regexp: {
regexp: /^[A-Z\s]+$/i,
message: '名字只能由字母字符和空格组成。'
}
- callback:自定义校验，用来对输入的值进行一些操作，比如上面代码里的，就是把输入的中文逗号换成英文的。
callback:{
callback:function(val,validate,field){
return true
}
message:'自定义校验'
}
- between：输入的值必须在指定的数值之间；
- greaterThan ：数值大于等于
- lessThan：数值小于等于
greaterThan: {
value: 18
},
lessThan: {
value: 100
}
- 密码确认
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
- 复选框验证
choice: {
min: 2,
max: 4,
message: '请选择2-4项'
}
- remote：在进行类似“用户名是否被占用时非常的有用”，
threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {
## ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
},
- 纯数字验证
digits: {
message: '该值只能包含数字。'
}
- 日期格式验证
date: {
format: 'YYYY/MM/DD',
message: '日期无效'
}
- 邮箱验证
emailAddress: {
message: 'The input is not a valid email address'
}
- 两个字段不相同的判断
different: {
field: 'password',
message: '用户名和密码不能相同。'
}
- 大小写验证
stringCase: {
message: '姓氏必须只包含大写字符。',
case: 'upper'//其他值或不填表示只能小写字符
},
摘自 爱jQuery：http://www.aijquery.cn/Html/bootstrapValidator/54.html
网友评论