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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。