jQuery开源组件BootstrapValidator使用详解

2019-11-19 16:13:13

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

下一篇：详解webpack 多页面/入口支持&公共组件单独打包