JS组件Form表单验证神器BootstrapValidator

更新时间：2016年01月26日 09:23:21 作者：懒得安分

做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。今天就来看看bootstrapvalidator如何使用，感兴趣的小伙伴们可以参考一下

本文为大家分享了JS组件Form表单验证神器BootstrapValidator，供大家参考，具体内容如下

1、初级用法
来看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: '邮箱地址不能为空'
   }
   }
  }
  }
 });
 });

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

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

验证通过，提交按钮恢复

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

2、中级用法
上面我们知道了非空验证的写法，除此之外肯定还有其他验证方式啊。别急，我们慢慢来看。上面的代码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验证；

还有一个比较常用的就是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页表单验证

按钮验证

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是关于本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

使用JS代码实现俄罗斯方块游戏
这篇文章主要介绍了使用JS代码实现俄罗斯方块游戏,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
HTML5canvas 绘制一个圆环形的进度表示实例
这篇文章主要介绍了HTML5canvas绘制一个圆环形的进度表示实例的相关资料,需要的朋友可以参考下
2016-12-12
省市选择的简单实现(基于zepto.js)
下面小编就为大家带来一篇省市选择的简单实现(基于zepto.js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随想过来看看吧
2016-06-06
JS中准确判断变量类型的方法
这篇文章主要介绍了在js中如何准确的判断一个变量的类型，文中代码非常详细，帮助大家更好的学习，有兴趣的朋友可以了解下
2020-06-06
微信小程序常用视图容器组件使用详解
组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。本文将通过示例详细为大家介绍一下微信小程序中常用的视图容器组件，需要的可以参考一下
2022-03-03
js实现单一html页面两套css切换代码
研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果与大家分享下，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
JavaScript 数组循环引起的思考
Google array.js 程序中建议改进的代码。思考为什么i-- 到了 i为0时while循环结束了？
2010-01-01
測試代碼真方便
測試代碼真方便...
2006-07-07
简单了解three.js 着色器材质
这篇文章主要介绍了three.js 着色器材质的相关资料，文中讲解非常详细，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08
ES6新语法之解构实践指南
所谓解构就是解构聚合数据,下面这篇文章主要给大家介绍了关于ES6新语法之解构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06