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 EasyUI $.Parser
Jun 02 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
PyQt QCombobox设置行高的方法
2019/06/20 Python
python程序变成软件的实操方法
2019/06/24 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python属于跨平台语言码
2020/06/09 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
理工科学生的自我评价
2013/12/15 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
竞聘书格式及范文
2014/03/31 职场文书
初三学生评语大全
2014/04/24 职场文书
项目合作意向书模板
2014/07/29 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
Python极值整数的边界探讨分析
2021/09/15 Python
java版 联机五子棋游戏
2022/05/04 Java/Android