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实战教程

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

相关文章

  • ie8 不支持new Date(2012-11-10)问题的解决方法

    ie8 不支持new Date(2012-11-10)问题的解决方法

    使用JS的时候也碰到了如下问题,后来经过修改,在IE8环境里,下面的代码是可用的,下面与大家分享下ie8 不支持new Date的解决方法,有类似问题的朋友可以参考下
    2013-07-07
  • js单页hash路由原理与应用实战详解

    js单页hash路由原理与应用实战详解

    本篇文章主要介绍了js单页hash路由原理与应用实战详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 微信小程序自定义带价格显示日历效果

    微信小程序自定义带价格显示日历效果

    这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript中的ubound函数使用实例

    JavaScript中的ubound函数使用实例

    这篇文章主要介绍了JavaScript中的ubound函数使用实例,本文先是讲解了ubound函数的语法,然后给出了用法代码实例,需要的朋友可以参考下
    2014-11-11
  • 理解JavaScript的prototype属性

    理解JavaScript的prototype属性

    JavaScript可以说是最让人初学者难以理解的单一属性。我看了一些资料后,开始明白其实这些困难很大程度来自prototype这个名字本身的二义性
    2012-02-02
  • js动态生成Html元素实现Post操作(createElement)

    js动态生成Html元素实现Post操作(createElement)

    这篇文章主要介绍了js动态生成Html元素实现Post操作(createElement),需要的朋友可以参考下
    2015-09-09
  • js仿360开机效果

    js仿360开机效果

    这篇文章主要为大家详细介绍了js仿360开机效果,并且封装一个带回调函数的缓动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 细品javascript 寻址,闭包,对象模型和相关问题

    细品javascript 寻址,闭包,对象模型和相关问题

    似乎某些程序员的集合是不相交的,就好像JS程序员和玩编译原理和CPU指令的汇编程序员就几乎没有交叉。前些日子讨论的火热的“作用域链”问题,说白了就是寻址问题,不过,这个在C中十分简单的问题却被JS这个动态语言弄得很复杂。
    2009-04-04
  • 纯JavaScript实现的完美渐变弹出层效果代码

    纯JavaScript实现的完美渐变弹出层效果代码

    对于Web项目开发尤其是前台UI的设计而言,用户体验至关重要,因为它直接关系到项目的成败,简洁,平滑,优雅的设计永远能够受到用户的青睐。
    2010-04-04
  • 一文读懂ES7中的javascript修饰器

    一文读懂ES7中的javascript修饰器

    这篇文章主要给大家介绍了关于ES7中javascript修饰器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论