bootstrap Validator: функция проверки модального окна, jsp, формы и Ajax-подачи

Эскиз:

如图所示, это функция, выполненная с помощью плагина Validator, эффект очень силен и очень удобен, я рекомендую использовать этот способ, а также кратко介绍一下 оригинальный способ проверки на JavaScript.

Сначала, импортируйте плагин：

<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="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel_add">добавить</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">название компании</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="введите название компании" name="company_name"/> 
        </div> 
        <label class="col-sm-2 control-label" for="company_id">идентификатор компании</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="введите идентификатор компании" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">серверная</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="введите серверную"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">корпус</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="введите корпус"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">тип устройства</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="введите тип устройства"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">имя устройства</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="введите имя устройства"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">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>Предоставить на рассмотрение</button> 
     </div> 
   </div> 
  </div> 
 </div>

У меня нет использования проверки ввода формы, а уже нажата кнопка,Ajax-отправка, обратите внимание.

js：

$(function(){/* Документ загружен, выполняется функция */} 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'Эта стоимость недействительна', 
    feedbackIcons: {/* 输入框不同状态，显示图片的样式 */} 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: {/*проверка*/ 
     company_name: {/*имя ключа username и значение input name должны соответствовать*/ 
      validators: { 
       notEmpty: {/*подсказка по отсутствию*/ 
        message: 'Название компании не может быть пустым' 
       }, 
//       stringLength: {/*подсказка по длине*/ 
//        min: 6, 
//        max: 30, 
//        message: 'Имя пользователя должно быть от 6 до 30 символов' 
//       }/*последний без запятой*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: 'ID компании не может быть пустым' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: 'IP устройства не может быть пустым' 
       }, 
       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: 'IP устройства недопустим' 
         } 
      } 
     }, 
    } 
  }) 
 }); 

$("#btn_reset").click(function(event) { 
  /* Действие на событие */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(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) { 
    /*Дополнительные действия после успеха */ 
    if (textStatus == "success") { 
     // e.preventDefault(); 
     $('#defaultForm').data('bootstrapValidator').resetForm(true); 
     $("#myModal_add").modal('hide'); 
     toastr.success("Успешно отправлено"); 
    }else{}} 
     $("#myModal_add").modal('hide'); 
     toastr.error("Подача失败"); 
    } 
   }); 
  } 
 }); 

OK,至此 завершена проверка модального окна и подача формы~

Ниже приведен исходный 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("IP не легитимно, пожалуйста, введите заново"); 
 $(this).val(""); 
 } 
); 

Указанные выше bootstrap Validator модальное окно, jsp, функции проверки формы и Ajax-подачи, надеюсь, помогут вам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, я отвечу вам в ближайшее время. В этом также выражаю признательность всем пользователям за поддержку сайта呐喊 учебник!

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, материалы предоставлены пользователями Интернета в порядке самостоятельнойcontributions и самостоятельной загрузки, сайт не имеет права собственности, не прошел редактирование人工, не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для подачи жалоб, и предоставьте соответствующие доказательства. Если будет установлено, что материал涉嫌 нарушение авторских прав, сайт немедленно удаляет涉嫌侵权的内容.