bootstrap Validator: funcionalidad de validación de cuadro de diálogo, jsp, formulario y Ajax de envío

Efecto visual：

Como se muestra en la imagen, esto es lo que se logra con el complemento Validator, tiene un efecto muy potente y muy conveniente, recomiendo este método, y finalmente,介绍一下原始js验证写法。

Primero, importar el complemento:

<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" rol="diálogo" aria-etiquetadocon="etiquetaLabelAgregar"> 
  <div class="ventana-modal-diálogo" rol="documento"> 
   <div class="ventana-modal-contenido"> 
    <div class="ventana-modal-cabecera"> 
     <botón tipo="botón" class="cerrar" data-desaparecer="ventana-modal" aria-etiqueta="Cerrar"><span aria-oculto="true">×</span></button> 
     <h4 clase="ventana-modal-título" id="etiquetaLabelAgregar">Agregar</h4> 
    </div> 
    <div class="ventana-modal-cuerpo" estilo="altura:680px;"> 
      <formulario id="formulario_por_defecto" class="formulario-horizontal"> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" para="nombre_compania">nombre de la compañía</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="nombre_compania" tipo="text" placeholder="Ingrese el nombre de la compañía" name="nombre_compania"/> 
        </div> 
        <label class="col-sm-2 control-etiqueta" para="id_compania">id de la compañía</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="id_compania" tipo="text" placeholder="Ingrese el id de la compañía" name="id_compania"/> 
        </div> 
       </div> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" para="sala_computadoras">sala de computadoras</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="sala_computadoras" tipo="text" placeholder="Ingrese la sala de computadoras"/> 
        </div> 
        <label class="col-sm-2 control-etiqueta" para="gabinete">armario</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="gabinete" tipo="text" placeholder="Ingrese el armario"/> 
        </div> 
       </div> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" para="tipo_equipo">tipo de equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="tipo_equipo" tipo="text" placeholder="Ingrese el tipo de equipo"/> 
        </div> 
        <label class="col-sm-2 control-etiqueta" para="equipo_nombre">nombre de equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipo_nombre" tipo="text" placeholder="Ingrese el nombre del equipo"/> 
        </div> 
       </div> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" para="equipo_ip">ip de equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_ip" type="text" placeholder="Por favor, ingrese la ip del equipo" name="equipment_ip" /> 
        </div> 
        <label class="col-sm-2 control-etiqueta" for="equipment_brand">marca del equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_brand" type="text" placeholder="Por favor, ingrese la marca del equipo"/> 
        </div> 
       </div> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" for="equipment_model">modelo del equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_model" type="text" placeholder="Por favor, ingrese el modelo del equipo"/> 
        </div> 
        <label class="col-sm-2 control-etiqueta" for="shelf_position">posición de estantería</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="shelf_position" type="text" placeholder="Por favor, ingrese la posición de estantería"/> 
        </div> 
       </div> 
       <div class="form-grupo"> 
        <label class="col-sm-2 control-etiqueta" for="equipment_sn">número de serie del equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_sn" type="text" placeholder="Por favor, ingrese el número de serie del equipo"/> 
        </div> 
        <label class="col-sm-2 control-etiqueta" for="equipment_pn">número de serie del equipo</etiqueta> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_pn" type="text" placeholder="Por favor, ingrese el número de serie del equipo"/> 
        </div> 
       </div> 
      </form> 
      </div> 
     <div class="modol-pie de página" id="button_sub"> 
      <button type="reset" id="btn_reset" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-oculto="true"></span>restablecer</button> 
      <button type="button" id="" name="submit" class="btn btn-enviar revisión principal"><span class="glyphicon glyphicon-disquette-disco" aria-oculto="true"></span>Enviar revisión</button> 
     </div> 
   </div> 
  </div> 
 </div>

Aquí no he utilizado la validación de envío de formulario, y he hecho clic en el botón, envío Ajax, preste atención.

js：

$(function(){/* Carga del documento, ejecutar una función*/ 
// $('.submit_review').attr({"deshabilitado":"deshabilitado"}); 
 $('#defaultForm').bootstrapValidator({ 
    mensaje: 'Este valor no es válido', 
    iconosFeedback: {/*diferentes estados de entrada en caja, estilo de imagen de visualización*/ 
     válido: 'glyphicon glyphicon-aceptar', 
     inválido: 'glyphicon glyphicon-eliminar', 
     validando: 'glyphicon glyphicon-refrescar' 
    }, 
    campos: {/*verificación*/ 
     company_name: {/*El nombre clave username y el valor de input name corresponden*/ 
      validadores: { 
       notEmpty: {/*indicación no vacío*/ 
        mensaje: 'El nombre de la empresa no puede estar vacío' 
       }, 
//       stringLength: {/*indicación de longitud*/ 
//        mín: 6, 
//        máx: 30, 
//        mensaje: 'El nombre de usuario está en'6hasta3entre 0 
//       }/*El último no tiene coma*/ 
      } 
     }, 
     company_id: { 
      validadores: { 
       notEmpty: { 
        mensaje: 'El ID de la empresa no puede estar vacío' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validadores: { 
       notEmpty: { 
        mensaje: 'La dirección IP del dispositivo no puede estar vacía' 
       }, 
       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])$/, 
        mensaje: 'La dirección IP del dispositivo no es válida' 
         } 
      } 
     }, 
    } 
  }); 
 }); 

$("#btn_reset").click(function(event) { 
  /* Actuar en el evento */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Actuar en el evento */ 
  $('#defaultForm').bootstrapValidator('validate'); 
  var flag = $("#defaultForm").data('bootstrapValidator').isValid(); 
  if (!flag) { 
   toastr.error("Se han introducido datos incorrectos, por favor rellénalos de nuevo!"); 
  } else { 
   $.post('addEquipmentInfoCheck.action', { 
    "equipoInfoCheck.companyId": $("#id_compañía").val(), 
    "equipoInfoCheck.companyName": $("#nombre_compañía").val(), 
    "equipoInfoCheck.machineRoom": $("#sala_computación").val(), 
    "equipoInfoCheck.equipmentCabinet": $("#gabinete").val(), 
    "equipoInfoCheck.deviceType": $("#equipo_tipo").val(), 
    "equipoInfoCheck.deviceName": $("#equipo_nombre").val(), 
    "equipoInfoCheck.deviceIp": $("#equipo_ip").val(), 
    "equipoInfoCheck.deviceBrand": $("#equipo_marca").val(), 
    "equipoInfoCheck.deviceModel": $("#equipo_model").val(), 
    "equipoInfoCheck.position": $("#ubicación_almacenamiento").val(), 
    "equipoInfoCheck.deviceSn": $("#equipo_sn").val(), 
    "equipoInfoCheck.devicePn": $("#equipo_pn").val(), 
    "estado de comprobación de información de equipo":1 
   }, function(data, textStatus, xhr) { 
    /*cosas opcionales que hacer después de un éxito */ 
    if (textStatus == "success") { 
     // e.preventDefault(); 
     $('#defaultForm').data('bootstrapValidator').resetForm(true); 
     $("#myModal_add").modal('hide'); 
     toastr.success("El envío ha sido exitoso"); 
    }else{ 
     $("#myModal_add").modal('hide'); 
     toastr.error("El envío ha fallado"); 
    } 
   }); 
  } 
 }); 

OK, hasta aquí se ha completado la validación del cuadro de diálogo y el envío.

A continuación, se adjunta la validación original en js:

$("#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("La dirección IP no es válida, por favor ingrese de nuevo"); 
 $(this).val(""); 
 } 
); 

Lo mencionado anteriormente es lo que el editor les ha presentado sobre el módulo de cuadro de diálogo de validador de Bootstrap, jsp, validación de formulario Ajax y envío de solicitud, espero que les haya sido útil. Si tienen alguna pregunta, déjenme un mensaje, el editor les responderá a tiempo. También les agradezco mucho el apoyo a la página web de呐喊教程！

Declaración: Este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w para informar, y proporcione la evidencia relevante.3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w para informar, y proporcione la evidencia relevante. Una vez confirmada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.