Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der jQuery-Open-Source-Komponente BootstrapValidator

Detaillierte Erläuterung der jQuery-Open-Source-Komponente BootstrapValidator

小云云
Freigeben: 2018-01-06 09:43:24
Original
1763 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung der jQuery-Open-Source-Komponente BootstrapValidator vor. Ich hoffe, dass er jedem helfen kann.

Referenzblog: JS-Komponentenserie – Formularvalidierungsartefakt: BootstrapValidator

Referenzblog: Bootstrapvalidator API-Lernen

Formular-HTML wie folgt:


<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>
Nach dem Login kopieren


js-Code lautet wie folgt:


 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;
  }
  }
 }
 }
 });
 }
Nach dem Login kopieren

Der Bestätigungscode vor dem Speichern lautet wie folgt:


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

Verwandte Empfehlungen:

Beispiel für eine detaillierte Erklärung der jQuery Validator-Methode zur Überprüfung der Ajax-Formularübermittlung und der Methode zur Ajax-Übergabe von Parametern

Detaillierte Erläuterung von Vue und Vue-Validator zur Implementierung der Formularüberprüfungsfunktion

BootStrapValidator-Überprüfungsmethode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Open-Source-Komponente BootstrapValidator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage