Form表单验证神器： BootstrapValidator

前言：作Web开发的咱们，表单验证是再常见不过的需求了。友好的错误提示能增长用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。

1、源码及API地址

介绍它以前，仍是给出它的源码以及API的地址吧。

bootstrapvalidator源码： https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api： http://bv.doc.javake.cn/api/

2、代码以及效果展现

一、初级用法

来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中咱们就能够知道它至少须要jQuery、bootstrap的支持。咱们首先引入须要的js组件

　　 <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Content/bootstrap/js/bootstrap.min.js"></script> <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script> <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" /> 

咱们知道，既然是表单验证，那么咱们在cshtml页面就必需要有一个Form，而且咱们知道Form里面取元素都是经过name属性去取值的，因此，表单里面的元素都要有一个name的属性值。

　　　　　<form>
            <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" /> </div> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" name="email" /> </div> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </form> 

有了表单元素以后，就是咱们的js初始化了。

    $(function () {
        $('form').bootstrapValidator({ 　　　　　　　　message: 'This value is not valid', 　feedbackIcons: { 　　　　　　　　valid: 'glyphicon glyphicon-ok', 　　　　　　　　invalid: 'glyphicon glyphicon-remove', 　　　　　　　　validating: 'glyphicon glyphicon-refresh' 　　　　　　　　 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' } } } } }); }); 

内容应该很容易看懂。来看效果：

验证通不过，提交按钮灰掉不能点击

验证经过，提交按钮恢复

看看效果先感觉下，最大优势：使用简单，界面友好。下面咱们来看看重叠验证。

二、中级用法

上面咱们知道了非空验证的写法，除此以外确定还有其余验证方式啊。别急，咱们慢慢来看。上面的代码cshtml部分不动，js部分咱们稍做修改：

　　$(function () {
        $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { min: 6, max: 18, message: '用户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含大写、小写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } }); }); 

加上了重叠验证咱们来看效果：

由上面的代码能够看出在validators属性对应一个Json对象，里面能够包含多个验证的类型：

notEmpty：非空验证；

stringLength：字符串长度验证；

regexp：正则表达式验证；

emailAddress：邮箱地址验证（都不用咱们去写邮箱的正则了~~）

除此以外，在文档里面咱们看到它总共有46个验证类型，咱们抽几个常见的出来看看：

base64 ：64位编码验证；

between ：验证输入值必须在某一个范围值之内，好比大于10小于100；

creditCard ：身份证验证；

date ：日期验证；

ip ：IP地址验证；

numeric ：数值验证；

phone ：电话号码验证；

uri ：url验证；

更多验证类型详见： http://bv.doc.javake.cn/validators/ 。固然涉及中文的验证可能会有些小问题，园友们若是有须要能够自行下去用代码测试下。

还有一个比较经常使用的就是submitHandler属性，它对应着提交按钮的事件方法。使用以下：

$(function () {
        $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { min: 6, max: 18, message: '用户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含大写、小写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); }); 

在它的Demo里面介绍了不少验证的实例。咱们简单看看它的效果，至于实现代码，其实很简单，有兴趣的能够直接看api。

颜色验证

Tab页表单验证

按钮验证

 

 转自https://blog.csdn.net/freedom_wbs/article/details/54617741