什么是jQuery Unobtrusive验证？

Question

我知道jQuery Validation插件是什么.我知道jQuery Unobtrusive Validation库是由Microsoft制作的,并且包含在ASP.NET MVC框架中.但我找不到一个解释它是什么的在线资源.标准jQuery Validation库和"unobtrusive"版本之间有什么区别？

Answer 1

Brad Wilson有几篇关于不引人注意的验证和不引人注目的ajax的文章.在"AJAX和JavaScript"部分的Pluralsight视频中
也很好地展示了它.

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

Answer 2

以不引人注目的方式:

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

Answer 3

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

Answer 4

jQuery Validation Unobtrusive Native是ASP.Net MVC HTML帮助扩展的集合.这些使用jQuery Validation对HTML 5数据属性驱动的验证的本机支持.Microsoft将jquery.validate.unobtrusive.js与MVC 3一起发布.它提供了一种方法,使用jQuery Validation和HTML 5数据属性(这是"不显眼"部分)的组合将数据模型验证应用于客户端.