Detailed explanation of jQuery open source component BootstrapValidator-JS Tutorial-php.cn

Detailed explanation of jQuery open source component BootstrapValidator

小云云

Release： 2018-01-06 09:43:24

Original

1763 people have browsed it

This article mainly introduces in detail how to use the jQuery open source component BootstrapValidator. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Reference blog: JS component series - Form form validation artifact: BootstrapValidator

Reference blog: bootstrapvalidator API learning

Form HTML, as follows:

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

Copy after login

js code is as follows:

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

Copy after login

The verification code before saving is as follows:

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

Copy after login

Related recommendations:

Detailed examples of jQuery Validator's method of verifying Ajax form submission and Ajax's method of passing parameters

Detailed explanation of vue and vue- validator implements form validation function

BootStrapValidator verification method

The above is the detailed content of Detailed explanation of jQuery open source component BootstrapValidator. For more information, please follow other related articles on the PHP Chinese website!