什么是jQuery Unobtrusive驗證？

Question

我知道jQuery Validation插件是什么。 我知道jQuery Unobtrusive Validation庫是由Microsoft制作的，並且包含在ASP.NET MVC框架中。 但我找不到一個解釋它是什么的在線資源。 標准jQuery Validation庫和“unobtrusive”版本之間有什么區別？

Answer 1

Brad Wilson有幾篇關於不引人注意的驗證和不引人注目的ajax的文章 。
在“AJAX和JavaScript”部分的Pluralsight視頻中也很好地展示了它。

基本上，它只是Javascript驗證，不會使用自己的驗證代碼污染您的源代碼。 這是通過在HTML中使用data-屬性來完成的。

Answer 2

以不引人注目的方式：

• 您不必調用validate（）方法。
• 您可以使用數據屬性指定需求（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>

Answer 3

為了澄清，這里有一個更詳細的例子，演示了使用jQuery 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/

Answer 4

jQuery Validation Unobtrusive Native是ASP.Net MVC HTML幫助程序擴展的集合。 這些使用jQuery Validation對HTML 5數據屬性驅動的驗證的本機支持。 微軟將jquery.validate.unobtrusive.js與MVC 3一起發布。它提供了一種方法，使用jQuery Validation和HTML 5數據屬性（這是“不顯眼的”部分）將數據模型驗證應用於客戶端。