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 相关文章推荐
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue实力踩坑之push当前页无效
Apr 10 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
我常用的几个类
2006/10/09 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
深入探讨前端框架react
2015/12/09 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python+微信接口实现运维报警
2016/08/27 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
小学教师岗位职责
2013/11/25 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
遗产继承公证书
2014/04/09 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
商铺租房协议书范本
2014/12/04 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang