Xác thực jQuery không phô trương là gì?

Tôi biết plugin xác thực jQuery là gì. Tôi biết thư viện Xác thực không phô trương jQuery được tạo bởi Microsoft và được bao gồm trong khung ASP.NET MVC. Nhưng tôi không thể tìm thấy một nguồn trực tuyến duy nhất giải thích nó là gì. Sự khác biệt giữa thư viện Xác thực jQuery tiêu chuẩn và phiên bản "không phô trương" là gì?

Brad Wilson có một vài bài viết tuyệt vời về xác nhận không phô trương và ajax không phô trương .
Nó cũng được hiển thị rất độc đáo trong video Pluralsight này trong phần "AJAX và JavaScript".

Về cơ bản, nó chỉ đơn giản là xác thực Javascript mà không gây ô nhiễm mã nguồn của bạn bằng mã xác thực của riêng nó . Điều này được thực hiện bằng cách sử dụng các data-thuộc tính trong HTML.

Với cách không phô trương:

• Bạn không phải gọi phương thức verifyate ().
• Bạn chỉ định các yêu cầu bằng cách sử dụng các thuộc tính dữ liệu (data-val, data-val-required, v.v.)

Ví dụ xác thực Jquery :

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

Jquery Xác thực Ví dụ không phô trương :

<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>

Để làm rõ, đây là một ví dụ chi tiết hơn chứng minh Xác thực mẫu bằng cách sử dụng Xác thực jQuery không phô trương.

Cả hai đều sử dụng JavaScript sau với jQuery:

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

Sự khác biệt chính giữa hai plugin là các thuộc tính được sử dụng cho mỗi cách tiếp cận.

Xác thực jQuery

Chỉ cần sử dụng các thuộc tính sau:

• Đặt yêu cầu nếu được yêu cầu
• Đặt loại cho định dạng phù hợp (email, v.v.)
• Đặt các thuộc tính khác, chẳng hạn như kích thước (chiều dài tối thiểu, v.v.)

Đây là hình thức ...

<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>

Xác thực jQuery không phô trương

Các thuộc tính dữ liệu sau là cần thiết:

• data-dir-required = "Điều này là bắt buộc."
• data-rule-required = "true / false"

Đây là hình thức ...

<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>

Dựa trên một trong hai ví dụ này, nếu các trường biểu mẫu được yêu cầu đã được điền và chúng đáp ứng các tiêu chí thuộc tính bổ sung, thì một thông báo sẽ bật lên thông báo rằng tất cả các trường của biểu mẫu được xác thực. Nếu không, sẽ có văn bản gần các trường mẫu vi phạm cho biết lỗi.

Tham khảo: - Xác thực jQuery: https://jqueryvalidation.org/documentation/

Xác thực jQuery Không phô trương Bản địa là một tập hợp các phần mở rộng của trình trợ giúp HTML MVC MVC. Chúng sử dụng hỗ trợ riêng của Xác thực jQuery để xác thực được điều khiển bởi các thuộc tính dữ liệu HTML 5. Microsoft đã chuyển jquery.validate.unazedrusive.js trở lại với MVC 3. Nó cung cấp một cách để áp dụng xác thực mô hình dữ liệu cho phía máy khách bằng cách sử dụng kết hợp các thuộc tính dữ liệu jQuery xác thực và HTML 5 (đó là phần "không phô trương").