bootstrap Validator Modal-Box, jsp, Formularvalidierung Ajax-Übermittlungsfunktion

Effektbild:

Wie im Bild gezeigt, sind dies die Funktionen und Effekte, die durch das Validator-Plugin erreicht werden, sie sind sehr mächtig und einfach zu verwenden. Ich empfehle diese Methode und werde abschließend die ursprüngliche js-Validierungsschreibweise vorstellen.

Zunächst, laden Sie das Plugin:

<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="Schließen"><span aria-hidden="true">×</span></button> 
     <h4 class="modal"-title" id="myModalLabel_add">Neu hinzufügen</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">Firmenname</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="Bitte geben Sie den Firmennamen ein" name="company_name"/> 
        </div> 
        <label class="col-sm-2 control-label" for="company_id">Firmen-ID</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="Bitte geben Sie die Firmen-ID ein" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">Rechenzentrum</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="Bitte geben Sie das Rechenzentrum ein"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">Schrank</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="Bitte geben Sie den Schrank ein"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">Gerätyp</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="Bitte geben Sie den Gerätyp ein"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">Gerätename</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="Bitte geben Sie den Gerätenamen ein"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">Gerät IP</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>Submit review</button> 
     </div> 
   </div> 
  </div> 
 </div>

I have not used form submission validation here, but clicked the button button, Ajax submission, please note.

js：

$(function(){/* Document loading, execute a function*/ 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: {/*Display the style of the image when the input box is in different states*/ 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: {/*verification*/ 
     company_name: {/*The key name username corresponds to the input name value*/ 
      validators: { 
       notEmpty: {/*non-empty hint*/ 
        message: 'The company name cannot be empty' 
       }, 
//       stringLength: {/*length hint*/ 
//        min: 6, 
//        max: 30, 
//        message: 'The username is between'6to3between 0 
//       }/*The last one does not have a comma*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: 'The company ID cannot be empty' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: 'The device IP cannot be empty' 
       }, 
       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: 'The device IP is invalid' 
         } 
      } 
     }, 
    } 
  } 
 }); 

$("#btn_reset").click(function(event) { 
  /* Handle the event */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Handle the event */ 
  $('#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("Übermittlung erfolgreich"); 
    }else{ 
     $("#myModal_add").modal('hide'); 
     toastr.error("Übermittlung fehlgeschlagen"); 
    } 
   }); 
  } 
 }); 

OK, bis hierhin ist die Validierung des Modal-Frame und die Übermittlung abgeschlossen~

Hier ist das ursprüngliche js-Überprüfungscode:

$("#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($.val()); 
 if(!flag){ 
 toastr.error("IP ist ungültig, bitte geben Sie neu ein"); 
 $.val(""); 
 } 
); 

Die oben genannten sind von mir vorgestellten Modal-Frame-Funktionen von bootstrap Validator, jsp, Formularvalidierung Ajax-Übermittlungsfunktion, hoffe, dass es Ihnen hilft. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, ich werde umgehend antworten. Ich danke auch sehr für die Unterstützung der Website呐喊教程!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich fragliche Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, und geben Sie relevante Beweise an. Sobald überprüft, wird die Website die fraglichen urheberrechtlichen Inhalte sofort löschen.)