What is jQuery Unobtrusive Validation?

What is jQuery Unobtrusive Validation?

本文关键字：Validation Unobtrusive jQuery is What      更新时间：2023-10-26

我知道什么是jQuery Validation插件。我知道jQuery Unobtrusive Validation库是由Microsoft创建的，包含在ASP.NET MVC框架中。但我找不到一个在线来源来解释它是什么。标准的jQueryValidation库和"不引人注目"的版本有什么区别？

BradWilson有几篇关于不引人注目的验证和不引人注目的ajax的文章
它也在这个Pluralsight视频的"AJAX和JavaScript"部分显示得很好。

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

使用不引人注目的方式：

  • 您不必调用validate（）方法
  • 使用数据属性（数据值、所需数据值等）指定需求

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进行表单验证。

两者都在jQuery中使用以下JavaScript：

  $("#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 Validation Unobtrusive

需要以下数据属性：

  • data msg 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是ASP.Net MVC HTML辅助扩展的集合。它们利用了jQueryValidation对HTML5数据属性驱动的验证的原生支持。微软将jquery.validate.uno唐突.js与MVC 3一起推出。它提供了一种使用jQueryValidation和HTML5数据属性组合将数据模型验证应用于客户端的方法（这是"不引人注目"的部分）。
相关文章：