什么是 jQuery 非侵入式验证？答案

【问题标题】：What is jQuery Unobtrusive Validation?什么是 jQuery 非侵入式验证？
【发布时间】：2012-07-17 02:34:09
【问题描述】：

我知道 jQuery Validation 插件是什么。我知道 jQuery Unobtrusive Validation 库是由 Microsoft 制作的，并且包含在 ASP.NET MVC 框架中。但我找不到解释它是什么的单一在线资源。标准的 jQuery Validation 库和“不显眼”的版本有什么区别？

【问题讨论】：

不显眼的验证将在 HTML 中添加 data-val-... 属性，因此您甚至可以在 HTML 源代码中读取验证。
我相信您的问题的答案在这里得到了解释：bradwilson.typepad.com/blog/2010/10/… 他解释了 Unobtrusive 打开或关闭时发生的情况之间的区别。

标签： javascript jquery asp.net asp.net-mvc validation

【解决方案1】：

Brad Wilson 在 unobtrusive validation 和 unobtrusive ajax 上有几篇很棒的文章。
在“AJAX 和 JavaScript”部分的 Pluralsight video 中也很好地展示了这一点。

基本上，它只是简单的 Javascript 验证，它不会用自己的验证代码污染您的源代码。这是通过使用 HTML 中的data- 属性来完成的。

【讨论】：

你能告诉我们在 mvc3 中对不显眼的验证所做的改进吗？
视频链接失效。
感谢@MishaMoroshko 指出这一点。我现在在 Pluralsight 上找不到任何替代品，所以我删除了链接。一旦有替代品，我将再次编辑帖子。
一些代码示例会很好。因为您的回复并没有那么有帮助，所以大多数人来这里是为了寻找快速解决方案和代码示例，而不是文章的链接，他们可能会随着时间的推移而中断，在您看到之后，它们通常可以作为参考代码示例。我更喜欢接下来的 2 个答案。

【解决方案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>

【讨论】：

谢谢，我试图按 Ctrl-F 在一些我必须处理的代码中找到 valdiate() 调用。想知道为什么我找不到它
是的，“不引人注目”在这里似乎是“不可发现”的委婉说法。

【解决方案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="这是必需的。"
data-rule-required="true/false"

这是表格...

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

【讨论】：

【解决方案4】：

jQuery Validation Unobtrusive Native 是 ASP.Net MVC HTML 帮助扩展的集合。这些利用了 jQuery Validation 对由 HTML 5 数据属性驱动的验证的原生支持。 Microsoft 将 jquery.validate.unobtrusive.js 与 MVC 3 一起返回。它提供了一种使用 jQuery Validation 和 HTML 5 数据属性的组合将数据模型验证应用到客户端的方法（这是“不引人注目”的部分）。

【讨论】：