jQuery开源组件BootstrapValidator使用详解


Posted in jQuery onJune 29, 2017

本文实例为大家分享了BootstrapValidator使用方法,供大家参考,具体内容如下

github:https://github.com/nghuuphuoc/bootstrapvalidator

参考博客:JS组件系列——Form表单验证神器: BootstrapValidator

参考博客:bootstrapvalidator之API学习

表单HTML,如下:

<form role="form" id="roleForm">
 <div class="box-body">
 <div class="form-group">
 <input type="text" class="form-control" id="inputRoleName"
  name="roleName" placeholder="角色名称" />
  </div>
 <div class="form-group">
  <input type="text" class="form-control" id="inputRoleDescribe"
  name="roleDescribe" placeholder="角色描述" />
  </div>
  <div class="form-group">
  <select class="form-control select2" style="width: 100%;"
  id="selectRoleType">
  </select>
  </div>
  <div class="form-group">
  <select class="form-control select2" style="width: 100%;"
  id="selectUseFlag">
  <option selected="selected" value='Y'>可用</option>
  <option value='N'>不可用</option>
  </select>
  </div>
  <div class="form-group">
  <input type="text" class="form-control" id="inputDisplaySn"
  name="displaySn" placeholder="显示序号" />
  </div>
  </div>
 </form>

js代码如下:

function initForm(){
 $('#roleForm').bootstrapValidator({
 fields : {
 roleName : {
  validators : {
  notEmpty : {
  message : '角色名称不能为空'
  },
  stringLength : {
  min : 1,
  max : 16,
  message : '角色名称长度必须在1到16位之间'
  },
  regexp : {
  regexp : /^[^&@#/"']*$/,
  message : '角色名称不能包含&@#/\"\'等字符'
  }
  }
 },
 roleDescribe : {
  validators : {
  notEmpty : {
  message : '角色描述不能为空'
  },
  stringLength : {
  min : 1,
  max : 64,
  message : '角色描述长度必须在1到64位之间'
  },
  regexp : {
  regexp : /^[^&@#/"']*$/,
  message : '角色名称不能包含&@#/\"\'等字符'
  }
  }
 }
 }
 });
 }

保存前验证代码如下:

function save_click() {
 $('#roleForm').bootstrapValidator('validate');
 var valid = $('#roleForm').data('bootstrapValidator').isValid();
 if(!valid){return;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
基于jQuery封装的分页组件
Jun 26 #jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP安全上传图片的方法
2015/03/21 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python工厂函数用法实例分析
2018/05/14 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
详解django中使用定时任务的方法
2018/09/27 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
python绘制高斯曲线
2021/02/19 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
捐款倡议书范文
2014/02/02 职场文书
社区健康教育实施方案
2014/03/18 职场文书
就业协议书
2014/09/12 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2015年少先队活动总结
2015/03/25 职场文书
会议主持词开场白
2015/05/28 职场文书
经典爱情感言
2015/08/03 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
Python 统计序列中元素的出现频度
2022/04/26 Python