BootStrapValidator校验方式


Posted in Javascript onDecember 19, 2016

做输入校验的时候如果你前端框架用的是bootstrap的话,首推bootstrapValidator校验方式,具体流程如下:

一、下载,导入js文件

<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
<script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>

二、

$(表单id:)({
  message:'这里写默认提示信息';
  feedbackIcons:{
          valid:'glyphicon glyphicon-ok',
          invalid:'glyphicon glyphicon-remove',
          validating:'glyphicon glyphicon-refresh'
        },
   fields: {
            inputName: {
            validators: {
              notEmpty: {
                message: '时间不能为空'
              },
              regexp: {
                 regexp: /^[0-9]+$/ ,
                 message: '时间由数字组成'
               },
                 stringLength: {
                min: 1,
                max: 20,
                message: '角色名长度必须在1到20之间'
              }
          }
      }
   }
   )

网上有各种验证,当然有自定义验证,如上例中的时间由数字组成。

以上所述是小编给大家介绍的BootStrapValidator校验方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JScript中的条件注释详解
Apr 24 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 #Javascript
JavaScript中this的用法实例分析
Dec 19 #Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 #Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 #Javascript
快速入门Vue
Dec 19 #Javascript
javascript中call,apply,bind函数用法示例
Dec 19 #Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 #Javascript
You might like
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python写程序统计词频的方法
2019/07/29 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python自动发微信监控报警
2019/09/06 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
安全教育心得体会
2013/12/29 职场文书
装修五一活动策划案
2014/01/23 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
开工典礼策划方案
2014/05/23 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
授权收款委托书范本
2014/10/10 职场文书
甲午大海战观后感
2015/06/02 职场文书
创业计划书之书店
2019/09/10 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
python的html标准库
2022/04/29 Python