تفصيل ميزات التحقق من صحة النموذج في جافا سكربت (modal box, 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">id الشركة</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="من فضلك اكتب id الشركة" 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>

لم أستخدم التحقق من صحة استمارة التسجيل، وأنقرت على زر 'button'، وتقديم طلب 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: {/*اسم المفتاح يتطابق مع اسم المفتاح input*/} 
      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) { 
  /* Act on the event */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Act on 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) { 
    /*مستندات اختيارية لتنفيذها بعد النجاح */ 
    if (textStatus == "success") { 
     // e.preventDefault(); 
     $('#defaultForm').data('bootstrapValidator').resetForm(true); 
     $ (#myModal_add).modal ('hide'); 
     toastr.success("إدخال ناجح"); 
    } else {}} 
     $ (#myModal_add).modal ('hide'); 
     toastr.error ("فشل الإرسال"); 
    } 
   }); 
  } 
 }); 

حسنًا، حتى هنا، تم إكمال التحقق من مودال والتحقق من الإرسال ~

إليك التحقق الأصلي لجافا سكريبت:

$ (#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 ()); 
 إذا (!flag) { 
 toastr.error ("IP غير صالح، يرجى إعادة إدخال"); 
 $ (this).val (" "); 
 } 
); 

ما ذكرناه أعلاه هو ما قدمه المحرر للجميع حول ميزات مودال فيستريدر، jsp، التحقق من صحة النموذج، وإرسال أجاكس، نأمل أن يكون ذلك مفيدًا لجميعكم. إذا كان لديكم أي أسئلة، فلا تترددوا في ترك تعليق، وسأقوم بالرد على أسئلتكم في أقرب وقت. شكرًا جزيلاً أيضًا للجميع على دعم موقع دروس النداء!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، وله حقوق الملكية الأصلية للمالك، تم جمعه من قبل المستخدمين على الإنترنت بشكل طوعي وتحميله، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وقدم الدليل ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم بشكل فوري.