JS组件Form表单验证神器BootstrapValidator


Posted in Javascript onJanuary 26, 2016

本文为大家分享了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: '邮箱地址不能为空'
   }
   }
  }
  }
 });
 });

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

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

JS组件Form表单验证神器BootstrapValidator

验证通过,提交按钮恢复

JS组件Form表单验证神器BootstrapValidator

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

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: '邮箱地址格式有误'
   }
   }
  }
  }
 });
 });

加上了重叠验证我们来看效果:

JS组件Form表单验证神器BootstrapValidator

JS组件Form表单验证神器BootstrapValidator

JS组件Form表单验证神器BootstrapValidator

由上面的代码可以看出在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。

颜色验证

JS组件Form表单验证神器BootstrapValidator

Tab页表单验证

JS组件Form表单验证神器BootstrapValidator

按钮验证

JS组件Form表单验证神器BootstrapValidator

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

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

Javascript 相关文章推荐
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 #Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 #Javascript
javascript实现2016新年版日历
Jan 25 #Javascript
基于javascript实现图片左右切换效果
Jan 25 #Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
You might like
php 注释规范
2012/03/29 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php网页病毒清除类
2014/12/08 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python去除所有html标签的方法
2015/05/05 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
python Tkinter模块使用方法详解
2022/04/07 Python
Nginx配置使用详解
2022/07/07 Servers