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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现穿梭框效果
Jan 19 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
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
React服务端渲染(总结)
2017/07/01 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
Python中replace方法实例分析
2014/08/20 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python如何安装下载后的模块
2020/07/03 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android