Javascript 什么是 jQuery Unobtrusive 验证？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11534910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is jQuery Unobtrusive Validation?
提问by user1438940
I know what the jQuery Validation plugin is. I know the jQuery Unobtrusive Validation library was made by Microsoft and is included in the ASP.NET MVC framework. But I cannot find a single online source that explains what it is. What is the difference between the standard jQuery Validation library and the "unobtrusive" version?
我知道 jQuery 验证插件是什么。我知道 jQuery Unobtrusive Validation 库是由 Microsoft 制作的，并且包含在 ASP.NET MVC 框架中。但我找不到解释它是什么的单一在线资源。标准 jQuery 验证库和“不显眼”版本之间有什么区别？
采纳答案by bertl
Brad Wilson has a couple great articles on unobtrusive validationand unobtrusive ajax.
It is also shown very nicely in this Pluralsight videoin the section on " AJAX and JavaScript".
Brad Wilson 有几篇关于unobtrusive validation和unobtrusive ajax 的很棒的文章。在“AJAX 和 JavaScript”部分的
这个Pluralsight 视频中也很好地展示了它。
Basically, it is simply Javascript validation that doesn't pollute yoursource code with its own validationcode. This is done by making use of data-attributes in HTML.
基本上，它只是 Javascript 验证，不会用自己的验证代码污染您的源代码。这是通过使用HTML 中的属性来完成的。data-
回答by James Lawruk
With the unobtrusive way:
以不显眼的方式：
- You don't have to call the validate() method.
- You specify requirements using data attributes (data-val, data-val-required, etc.)
- 您不必调用 validate() 方法。
- 您可以使用数据属性（data-val、data-val-required 等）指定需求
Jquery Validate Example:
Jquery 验证示例：
<input type="text" name="email" class="required">
<script>
$(function () {
$("form").validate();
});
</script>
Jquery Validate Unobtrusive Example:
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>
回答by Richard Nalezynski
For clarification, here is a more detailed example demonstrating Form Validation using jQuery Validation Unobtrusive.
为了澄清起见，这里有一个更详细的示例，演示了使用 jQuery Validation Unobtrusive 的表单验证。
Both use the following JavaScript with jQuery:
两者都在 jQuery 中使用以下 JavaScript：
$("#commentForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
alert("This is a valid form!");
// form.submit();
}
});
The main differences between the two plugins are the attributes used for each approach.
两个插件之间的主要区别是用于每种方法的属性。
jQuery Validation
jQuery 验证
Simply use the following attributes:
只需使用以下属性：
- Set required if required
- Set type for proper formatting (email, etc.)
- Set other attributes such as size (min length, etc.)
- 如果需要，设置为 required
- 设置正确格式的类型（电子邮件等）
- 设置其他属性，例如大小（最小长度等）
Here's the form...
这是表格...
<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 Validation Unobtrusive
jQuery 验证不显眼
The following data attributes are needed:
需要以下数据属性：
- data-msg-required="This is required."
- data-rule-required="true/false"
- data-msg-required="这是必需的。"
- 数据规则要求=“真/假”
Here's the form...
这是表格...
<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>
Based on either of these examples, if the form fields that are required have been filled, and they meet the additional attribute criteria, then a message will pop up notifying that all form fields are validated. Otherwise, there will be text near the offending form fields that indicates the error.
基于这些示例中的任何一个，如果所需的表单字段已填写，并且它们满足附加属性标准，则会弹出一条消息，通知所有表单字段都已验证。否则，有问题的表单字段附近会出现指示错误的文本。
References: - jQuery Validation: https://jqueryvalidation.org/documentation/
参考资料： - jQuery 验证：https: //jqueryvalidation.org/documentation/
回答by bimal
jQuery Validation Unobtrusive Native is a collection of ASP.Net MVC HTML helper extensions. These make use of jQuery Validation's native support for validation driven by HTML 5 data attributes. Microsoft shipped jquery.validate.unobtrusive.js back with MVC 3. It provided a way to apply data model validations to the client side using a combination of jQuery Validation and HTML 5 data attributes (that's the "unobtrusive" part).
jQuery Validation Unobtrusive Native 是 ASP.Net MVC HTML 帮助程序扩展的集合。它们利用了 jQuery Validation 对 HTML 5 数据属性驱动的验证的本机支持。Microsoft 随 MVC 3 一起发布了 jquery.validate.unobtrusive.js。它提供了一种使用 jQuery 验证和 HTML 5 数据属性（即“不显眼”部分）的组合将数据模型验证应用于客户端的方法。
