bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件，再也不用手写验证规则啦！
bootstrapValidator官方文档： http://bootstrapvalidator.votintsev.ru/api/
一、举个丽子：
写了一个小例子
先来看一下效果吧！
二、具体实现步骤如下：
1、下载jquery、bootstrap、bootstrapValidator
bootstrapValidator下载地址： https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7
在这里下载后，解压bootstrapValidator-master，里面会有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夹中，bootstrapValidator在src文件夹中。直接复制过来用就可以了，不用单独一个一个下载。在demo文件夹中有很多例子，可以直接拿过来用。
注意：如果bootstrap或jquery是单独下载的，可能会因为版本不一致，导致验证时，不会实时更新状态，最好使用下载后bootstrapValidator-master中的jquery和bootstrap。
2、将jquery、bootstrap、bootstrapValidator引入到文件中(注意引入的顺序)
3、 编写html、css、js
三、下面来介绍我自己写的小例子
写了一个注册表单，其中：
1、用户名必须输入汉字；
2、密码和确认输入的必须一致，长度为6-16位；
3、手机号必须为数字，且是正确的手机号。不满足以上条件会有相应的提示。
四、代码实现：
1、html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>bootstrapValidatorDemo</title> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrapValidator/bootstrapValidator.min.css"> <script type="text/javascript" src="js/jquery/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrapValidator/bootstrapValidator.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h2 class="title">用户注册</h2> </div> <form id="infoForm" class="form-horizontal bv-form" enctype="multipart/form-data"> <div class="row form-group"> <label>用户名:</label> <input type="text" class="form-control" name="username" placeholder="请输入用户名"></input> </div> <div class="row form-group"> <label>密码:</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"></input> </div> <div class="row form-group"> <label>确认密码:</label> <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码"></input> </div> <div class="row form-group"> <label>手机号:</label> <input type="text" class="form-control" name="tel" placeholder="请输入手机号"></input> </div> <div class="row form-group" style="display: flex; justify-content: space-around;"> <button type="submit" class="btn btn-info" id="submit">提 交</button> <button class="btn btn-default" id="reset">重 置</button> </div> </form> </div> </body> </html>
2、css
<style type="text/css"> .container { margin-top: 30px; width: 500px; } .title { font-weight: 700; text-align: center; margin-bottom: 30px; } </style>
3、js
<script type="text/javascript"> $('#reset').click(function(e){ e.preventDefault();//阻止默认事件 $('#infoForm input').val(''); $('#infoForm').data('bootstrapValidator').resetForm(); }); $('#infoForm').bootstrapValidator({ message : '输入的值无效!', feedbackIcons : { valid : 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating : 'glyphicon glyphicon-refresh' }, fields : { username : { validators : { notEmpty : { message : '用户名不能为空！' }, regexp : { regexp : /[\u4E00-\u9FA5]/, message : '请输入汉字！' } } }, password: { validators: { notEmpty: { message: '密码不能为空！' }, different: { field: 'username', message: '密码不能与用户名相同！' }, stringLength: { min: 6, max: 16, message: '密码长度为6~16位！' } } }, confirmPassword: { validators: { notEmpty: { message: '请确认密码！' }, identical: { field: 'password', message: '密码和确认密码不一致！' } } }, tel : { validators : { notEmpty : { message : '手机号不能为空！' }, regexp : { regexp : /^1[34578]\d{9}$/, message : '请输入正确的手机号！' }, stringLength: { min: 11, max: 11, message: '请输入11位手机号码！' } } } } }).on("success.form.bv", function(e) { e.preventDefault();//阻止默认事件 alert('用户注册成功！'); }) </script>
五、需要注意的地方：
1、jquery、bootstrap、bootstrapValidator最好使用下载的bootstrapValidator-mastar中的文件，否则可能会导致验证状态不会实时更新
2、表单中需要验证的元素都必须包裹在有类名form-group的父盒子中，否则验证不起作用
3、验证的图标
这部分是验证时的图标，也可以不加这部分，如果加了，需要将bootstrapValidator-master --> vendor --> fonts文件夹复制到自己的文件目录中，与bootstrap.css的父级同级
这样图标就会显示出来了。
六、bootstrapValidator常用方法：
1. 重置表单 resetForm(),将隐藏所有错误提示和图标。
$(form).data("bootstrapValidator").resetForm();
2. 移除验证项 removeField
$(form).bootstrapValidator('removeField','ifLift');
3. 添加验证项 addField
$(form).bootstrapValidator("addField", "ifLift", {
validators: {
notEmpty: {
message: '电梯不能为空！'
}
}
});
4. 表单验证的字段是否都已通过验证 isValid()，通过返回true,否则返回false
$(form).data('bootstrapValidator').isValid()
5. 手动对表单进行校验validate(), 可用在需要点击按钮或者链接而非提交对表单进行校验的时候。
$(form).data('bootstrapValidator').isValid()
6. 更新某个字段的状态 updateStatus()，BootstrapValidator默认在校验某个字段合法后不再重新校验，当调用其他插件或者方法可能会改变字段值时，需要重新对该字段进行校验。
7. 对指定的字段进行校验。validateField(field)
$(form).data("bootstrapValidator").updateStatus("square", "NOT_VALIDATED", null ).validateField('square');
NOT_VALIDATED 未校验的
VALIDATING 核验中的
INVALID 校验失败的
VALID 校验成功的
如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！
