什么是jQuery非侵入式验证?

2020/11/08 23:42 · javascript ·  · 0评论

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?

Brad Wilson has a couple great articles on unobtrusive validation and unobtrusive ajax.
It is also shown very nicely in this Pluralsight video in the section on " AJAX and JavaScript".

Basically, it is simply Javascript validation that doesn't pollute your source code with its own validation code. This is done by making use of data- attributes in HTML.

用不显眼的方式:

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

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

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).

本文地址:http://javascript.askforanswer.com/shenmeshijqueryfeiqinrushiyanzheng.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!