bootstrap：能够增加兼容性的强大框架.
因为移动端项目需要数据验证，就开始学习了bootstrapValidator 。
1.需要引用的文件：
css：
bootstrap.min.css
bootstrapValidator.min.css
js:
jquery-2.1.4.min.js
bootstrap.min.js
bootstrapValidator.min.js
以及：
fonts文件
2.HTML编写
在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹
（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。
注：该值不是绝对的，也可以通过js手动指定错误提示位置和验证的输入框（后续会讲解到）。
demo1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrapValidator.css">
</head>
<style>
</style>
<body>
<header style="text-align: center;">bootstrapvalidator的使用</header>
<div class="container">
<form action="" id="defaultForm" class="form-horizontal">
<!-- 注意：1，下面这个div，类为form-group必须要有，插件根据这个进行添加提示；
2,Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现
水平表单效果，必须满足以下两个条件：
2.1、在<form>元素是使用类名“form-horizontal”
2.2、配合Bootstrap框架的网格系统。
在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。
3，form-horizontal和control-label一起使用，可以让label标签的文字右对齐 -->
<div class="form-group">
<label class="col-lg-3 col-sm-3 control-label">UserName:</label>
<div class="col-lg-5 col-sm-9">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 col-sm-3 control-label">Email address</label>
<div class="col-lg-5 col-sm-9">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 col-sm-3 control-label">Password</label>
<div class="col-lg-5 col-sm-9">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3 col-sm-offset-3">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form>
</div>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='bootstrapValidator.min.js'></script>
<script src='demo2.js'></script>
</body>
</html>
js代码如下：
$(function(){
/**
* 下面是进行插件初始化
* 你只需传入相应的键值对
* */
$('#defaultForm').bootstrapValidator({
message:'This value is not valid',
feedbackIcons:{/*输入框不同状态，显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
username:{//键名username和input name值对应
message:'The username is not valid',
validators:{
notEmpty:{//非空提示
message:'用户名不能为空'
},
stringLength:{//长度提示
min:6,
max:30,
message:'用户名长度必须在6到30之间'
},
/*以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？
如下只要在input相对应的键值中加入一个regexp:{}键值对
只需加此键值对，包含正则表达式，和提示
*/
regexp:{
regexp:/^[a-zA-Z0-9]+$/,
message:'只能是数字和字母'
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
})
})
这是最基本的，例子直接复制到本地，并且导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式。