166

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

4

4 回答 4

142

Brad Wilson 有几篇关于非侵入式验证和非侵入式 ajax的精彩文章。在“AJAX 和 JavaScript”部分的这个Pluralsight 视频
中 也很好地展示了它。

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

于 2012-07-18T06:00:21.197 回答
115

用不显眼的方式：

  • 您不必调用 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>
于 2013-12-03T21:35:46.563 回答
23

为澄清起见，这里有一个更详细的示例，演示了使用 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="这是必需的。"
  • 数据规则要求=“真/假”

这是表格...

<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/

于 2016-11-22T02:01:55.747 回答
7

jQuery Validation Unobtrusive Native 是 ASP.Net MVC HTML 帮助扩展的集合。这些利用了 jQuery Validation 对由 HTML 5 数据属性驱动的验证的原生支持。Microsoft 将 jquery.validate.unobtrusive.js 与 MVC 3 一起返回。它提供了一种使用 jQuery Validation 和 HTML 5 数据属性的组合将数据模型验证应用到客户端的方法（这是“不引人注目的”部分）。

于 2016-05-04T07:15:00.660 回答