[英]What is jQuery Unobtrusive Validation?
I know what the jQuery Validation plugin is. 我知道jQuery Validation插件是什么。 I know the jQuery Unobtrusive Validation library was made by Microsoft and is included in the ASP.NET MVC framework.
我知道jQuery Unobtrusive Validation库是由Microsoft制作的,并且包含在ASP.NET MVC框架中。 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 Validation库和“unobtrusive”版本之间有什么区别?
Brad Wilson has a couple great articles on unobtrusive validation and unobtrusive ajax . Brad Wilson有几篇关于不引人注意的验证和不引人注目的ajax的文章 。
It is also shown very nicely in this Pluralsight video in the section on " AJAX and JavaScript". 在“AJAX和JavaScript”部分的Pluralsight视频中也很好地展示了它。
Basically, it is simply Javascript validation that doesn't pollute your source code with its own validation code. 基本上,它只是Javascript验证,不会使用自己的验证代码污染您的源代码。 This is done by making use of
data-
attributes in HTML. 这是通过在HTML中使用
data-
属性来完成的。
With the unobtrusive way: 以不引人注目的方式:
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>
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: 两者都使用以下JavaScript与jQuery:
$("#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: 只需使用以下属性:
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: 需要以下数据属性:
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/
jQuery Validation Unobtrusive Native is a collection of ASP.Net MVC HTML helper extensions. jQuery Validation Unobtrusive Native是ASP.Net MVC HTML帮助程序扩展的集合。 These make use of jQuery Validation's native support for validation driven by HTML 5 data attributes.
这些使用jQuery Validation对HTML 5数据属性驱动的验证的本机支持。 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.validate.unobtrusive.js与MVC 3一起发布。它提供了一种方法,使用jQuery Validation和HTML 5数据属性(这是“不显眼的”部分)将数据模型验证应用于客户端。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.