bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

效果图：

如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。

首先，导入插件：

<link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"> 

<script src="<%=basePath %>bootstrap/js/bootstrapValidator.min.js"></script> 
<script src="<%=basePath %>bootstrap/js/bootstrapValidator.zh_CN.js"></script> 
bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/

jsp：

<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal"-dialog" role="document"> 
   <div class="modal"-content"> 
    <div class="modal"-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">×</span></button> 
     <h4 class="modal"-title" id="myModalLabel_add">Ajouter</h4> 
    </div> 
    <div class="modal"-body" style="height:680px;"> 
      <form id="defaultForm" class="form"-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="company_name">Nom de la société</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="Saisissez le nom de la société" name="company_name"/> 
        </div> 
        <label class="col-sm-2 control-label" for="company_id">ID de la société</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="Saisissez l'ID de la société" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">Salle informatique</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="Saisissez le nom de la salle informatique"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">Rack</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="Saisissez le nom du rack"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">Type de l'équipement</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="Saisissez le type de l'équipement"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">Nom de l'équipement</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="Saisissez le nom de l'équipement"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">IP de l'équipement</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_ip" type="text" placeholder="请输入设备ip" name="equipment_ip" /> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_brand">设备品牌</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_brand" type="text" placeholder="请输入设备品牌"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_model">设备型号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_model" type="text" placeholder="请输入设备型号"/> 
        </div> 
        <label class="col-sm-2 control-label" for="shelf_position">上架位置</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="shelf_position" type="text" placeholder="请输入上架位置"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_sn">设备SN号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_sn" type="text" placeholder="请输入设备SN号"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_pn">设备PN号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_pn" type="text" placeholder="请输入设备PN号"/> 
        </div> 
       </div> 
      </form> 
      </div> 
     <div class="modol-footer" id="button_sub"> 
      <button type="reset" id="btn_reset" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button> 
      <button type="button" id="" name="submit" class="btn btn-primary submit_review"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>Soumettre à l'examen</button> 
     </div> 
   </div> 
  </div> 
 </div>

Je n'utilise pas de validation de soumission de formulaire ici, mais j'ai cliqué sur le bouton, soumission Ajax, attention.

js：

$(function(){/* Chargement du document, exécution d'une fonction*/ 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'Cette valeur n'est pas valide', 
    feedbackIcons: {/*Styles d'images affichées pour les différents états de la zone de saisie*/ 
     valid: 'glyphicon glyphicon'-ok', 
     invalid: 'glyphicon glyphicon'-remove', 
     validating: 'glyphicon glyphicon'-refresh' 
    }, 
    fields: {/*validation*/ 
     company_name: {/*Le nom clé username correspond à la valeur input name*/ 
      validators: { 
       notEmpty: {/*indication de non remplissage*/ 
        message: 'Le nom de l'entreprise ne peut pas être vide' 
       }, 
//       stringLength: {/*indication de la longueur*/ 
//        min: 6, 
//        max: 30, 
//        message: 'Le nom d'utilisateur est entre'6et3entre 0 
//       }/*Le dernier n'a pas de virgule*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: 'L'ID de l'entreprise ne peut pas être vide' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: 'L'IP de l'équipement ne peut pas être vide' 
       }, 
       regexp: { 
        regexp: /^(\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) $/, 
        message: 'L'IP de l'équipement n'est pas valide' 
         } 
      } 
     }, 
    } 
  } 
 }); 

$("#btn_reset").click(function(event) { 
  /* Agir sur l'événement */ 
  $ (#defaultForm).data ('bootstrapValidator').resetForm (true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Agir sur l'événement */ 
  $('#defaultForm').bootstrapValidator('validate'); 
  var flag = $("#defaultForm").data('bootstrapValidator').isValid(); 
  if (!flag) { 
   toastr.error("填写有误，请重新填写！"); 
  } else { 
   $.post('addEquipmentInfoCheck.action', { 
    "equipmentInfoCheck.companyId": $("#company_id").val(), 
    "equipmentInfoCheck.companyName": $("#company_name").val(), 
    "equipmentInfoCheck.machineRoom": $("#computer_room").val(), 
    "equipmentInfoCheck.equipmentCabinet": $("#cabinet").val(), 
    "equipmentInfoCheck.deviceType": $("#equipment_type").val(), 
    "equipmentInfoCheck.deviceName": $("#equipment_name").val(), 
    "equipmentInfoCheck.deviceIp": $("#equipment_ip").val(), 
    "equipmentInfoCheck.deviceBrand": $("#equipment_brand").val(), 
    "equipmentInfoCheck.deviceModel": $("#equipment_model").val(), 
    "equipmentInfoCheck.position": $("#shelf_position").val(), 
    "equipmentInfoCheck.deviceSn": $("#equipment_sn").val(), 
    "equipmentInfoCheck.devicePn": $("#equipment_pn").val(), 
    "equipmentInfoCheck.state":1 
   }, function(data, textStatus, xhr) { 
    /*optional stuff to do after success */ 
    if (textStatus == "success") { 
     // e.preventDefault (); 
     $ (#defaultForm).data ('bootstrapValidator').resetForm (true); 
     $ (#myModal_add).modal ('hide'); 
     toastr.success ("Soumission réussie "); 
    } else { 
     $ (#myModal_add).modal ('hide'); 
     toastr.error ("Échec de soumission "); 
    } 
   }); 
  } 
 }); 

OK, jusqu'à présent, la validation modal box et la soumission sont terminées~

Voici le code de validation js original :

$ (#equipment_ip).blur (function () { 
 var reg = /^(\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) . (\d {1,2|1\d \d |2[0-4] \d |25[0-5]) $/ ;  
 var flag = reg.test ($ (this).val ()); 
 if (!flag) { 
 toastr.error ("IP non légal, veuillez réinsérer "); 
 $ (this).val (" "); 
 } 
); 

Les fonctionnalités de validation modal box, jsp, validation de formulaire Ajax et soumission Ajax décrites ci-dessus sont présentées par l'éditeur à tous. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message, je vous répondrai à temps. Je tiens également à remercier chaleureusement tous ceux qui soutiennent le site de tutoriels d'extinction !

Déclaration : le contenu de cet article est来源于网络，et appartient à ses auteurs respectifs. Le contenu est fourni par les utilisateurs d'Internet et téléversé spontanément. Ce site n'appartient pas à la propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w.3codebox.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, fournissez des preuves pertinentes, et une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.).