Explication détaillée du composant open source jQuery BootstrapValidator

Cet article présente principalement en détail comment utiliser le composant open source jQuery BootstrapValidator. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Blog de référence : série de composants JS - Artefact de validation de formulaire : BootstrapValidator

Blog de référence : apprentissage de l'API bootstrapvalidator

Formulaire HTML, comme suit :

<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>

Le code js est le suivant :

 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 : '角色名称不能包含&@#/\"\'等字符'
  }
  }
 }
 }
 });
 }

Le code de vérification avant l'enregistrement est le suivant :

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

Recommandations associées :

Exemple d'explication détaillée de la méthode jQuery Validator de vérification de la soumission du formulaire Ajax et de la méthode de transmission des paramètres Ajax

Explication détaillée de vue et vue-validator pour implémenter la fonction de vérification de formulaire

Méthode de vérification BootStrapValidator

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!