什么是jQuery非侵入式验证？

148

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

— 用户名
source

2

非侵入式验证将在HTML中添加data-val -...属性，因此即使在HTML源代码中，您也可以读取验证。

— Preben Huybrechts 2012年

3

我相信您的问题的答案已在此处进行了解释：bradwilson.typepad.com/blog/2010/10/…他解释了打开或关闭“不干扰”时所发生的区别。

— 汤米

123

布拉德威尔逊（Brad Wilson）有两篇不错的文章，内容涉及不干扰的验证和不干扰的Ajax。
在此Pluralsight视频的“ AJAX和JavaScript”部分中，也很好地展示了它。

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

— 伯特
source

您能告诉我们在mvc3中针对非侵入式验证所做的改进吗？

— wwcdwdcw

视频链接已断开。

— Misha Moroshko 2014年

谢谢@MishaMoroshko指出这一点。我目前在Pluralsight上找不到任何替代方法，因此我删除了该链接。一旦有替代者，我将再次编辑帖子。

— bertl 2014年

一些代码示例会很好。因为您的回复并不是真的那么有用，所以大多数来这里的人都是在寻找快速的解决方案和代码示例，而不是文章的链接，它们可能会随着时间的流逝而中断，因此，在您看到之后，它们通常是很好的参考代码示例。我更喜欢接下来的两个答案。

— 欧文

107

用不显眼的方式：

您不必调用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>

— 詹姆斯·劳鲁克
source

4

谢谢，我正在尝试按Ctrl-F在必须处理的一些代码中找到valdiate（）调用。想知道为什么我找不到它

— bio595 2014年

2

是的，在这里“不显眼”似乎是对“无法发现”的委婉说法。

— ReactingToAngularVues

18

为了澄清起见，这是一个更详细的示例，演示使用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/

— 理查德·纳雷辛斯基
source

7

jQuery Validation Unobtrusive Native是ASP.Net MVC HTML帮助程序扩展的集合。这些利用jQuery Validation对HTML 5数据属性驱动的验证的本机支持。Microsoft随MVC 3一起交付了jquery.validate.unobtrusive.js。它提供了一种通过结合使用jQuery Validation和HTML 5数据属性（即“不干扰”部分）将数据模型验证应用于客户端的方法。

— 比马尔
source