การตรวจสอบ jQuery ไม่เป็นการรบกวนคืออะไร

ฉันรู้ว่าปลั๊กอินการตรวจสอบ jQuery คืออะไร ฉันรู้ว่าไลบรารีการตรวจสอบ jQuery Unobtrusive สร้างโดย Microsoft และรวมอยู่ในกรอบงาน ASP.NET MVC แต่ฉันไม่สามารถหาแหล่งออนไลน์เดียวที่อธิบายว่ามันคืออะไร อะไรคือความแตกต่างระหว่างไลบรารีการตรวจสอบ jQuery มาตรฐานและรุ่น "ไม่เป็นการรบกวน"

แบรดวิลสันมีบทความที่ดีทั้งคู่ในการตรวจสอบไม่สร้างความรำคาญและอาแจ็กซ์สร้างความรำคาญ
มันแสดงให้เห็นเป็นอย่างดีในวิดีโอ Pluralsightนี้ในหัวข้อ "AJAX และ JavaScript"

โดยทั่วไปก็เป็นเพียงการตรวจสอบจาวาสคริปต์ที่ไม่ก่อให้เกิดมลพิษของรหัสที่มาด้วยตัวของมันเองการตรวจสอบรหัส สิ่งนี้ทำได้โดยใช้data-คุณลักษณะใน HTML

ด้วยวิธีที่ไม่เป็นการรบกวน:

• คุณไม่จำเป็นต้องเรียกใช้เมธอด validate ()
• คุณระบุข้อกำหนดโดยใช้แอตทริบิวต์ data (data-val, data-val-required ฯลฯ )

Jquery ตรวจสอบตัวอย่าง :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery ตรวจสอบตัวอย่างที่ไม่สร้างความรำคาญ :

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

สำหรับการชี้แจงนี่เป็นตัวอย่างที่แสดงรายละเอียดเพิ่มเติมเกี่ยวกับการตรวจสอบแบบฟอร์มโดยใช้ jQuery Validation Validation Unobtrusive

ทั้งสองใช้ JavaScript ต่อไปนี้กับ jQuery:

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

ความแตกต่างที่สำคัญระหว่างสองปลั๊กอินคือคุณลักษณะที่ใช้สำหรับแต่ละวิธี

การตรวจสอบ jQuery

เพียงใช้คุณสมบัติต่อไปนี้:

• ตั้งจำเป็นถ้าจำเป็น
• กำหนดประเภทสำหรับการจัดรูปแบบที่เหมาะสม (อีเมลและอื่น ๆ )
• ตั้งค่าคุณสมบัติอื่น ๆ เช่นขนาด (ความยาวต่ำสุด ฯลฯ )

นี่คือแบบฟอร์ม ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

การตรวจสอบ jQuery ไม่เป็นการรบกวน

จำเป็นต้องใช้แอตทริบิวต์ข้อมูลต่อไปนี้:

• data-msg-required = "จำเป็นต้องมี"
• ข้อมูลกฎต้อง = "จริง / เท็จ"

นี่คือแบบฟอร์ม ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

จากตัวอย่างใดตัวอย่างหนึ่งถ้ากรอกแบบฟอร์มที่จำเป็นต้องกรอกข้อมูลและตรงตามเกณฑ์คุณสมบัติเพิ่มเติมจากนั้นข้อความจะปรากฏขึ้นเพื่อแจ้งให้ทราบว่าการตรวจสอบความถูกต้องของเขตข้อมูลฟอร์มทั้งหมด มิฉะนั้นจะมีข้อความอยู่ใกล้กับเขตข้อมูลฟอร์มที่ละเมิดซึ่งระบุถึงข้อผิดพลาด

ข้อมูลอ้างอิง: - การตรวจสอบ jQuery: https://jqueryvalidation.org/documentation/

การตรวจสอบความถูกต้อง jQuery Native ไม่เป็นการรบกวนคือชุดของส่วนขยายตัวช่วย ASP.Net MVC HTML สิ่งเหล่านี้ใช้ประโยชน์จากการสนับสนุนดั้งเดิมของ jQuery Validation สำหรับการตรวจสอบความถูกต้องซึ่งขับเคลื่อนโดยคุณลักษณะข้อมูล HTML 5 Microsoft จัดส่ง jquery.validate.unobtrusive.js กลับมาพร้อม MVC 3 ซึ่งเป็นวิธีการใช้การตรวจสอบความถูกต้องของแบบจำลองข้อมูลกับฝั่งไคลเอ็นต์โดยใช้การรวมกันของ jQuery Validation และแอตทริบิวต์ข้อมูล HTML 5 (นั่นคือส่วน "ไม่เป็นการรบกวน")