1.概述

这个jQuery插件简化了客户端表单验证，同时还提供了大量的自定义选项。 如果您从头开始构搭建，且尝试将某些内容集成到具有大量现有标记的现有应用程序时，它也是一个不错的选择。 该插件捆绑了一组有用的验证方法，包括URL和电子邮件验证，同时提供API来编写自己的方法。 所有捆绑方法都带有英语的默认错误消息，并翻译成其他37种语言。

该插件最初是由JQuery团队的成员JörnZaefferer编写和维护的，他是jQuery UI团队的首席开发人员和QUnit的维护者。 它始于2006年jQuery的早期阶段，并从那时起进行了更新和改进。

从版本1.15.0开始，Markus Staab于2016年2月接管了代码库的维护。自2016年7月起，Brahim Arkni协助Markus，几个月后，Brahim加入了jQuery Validation核心团队。

当前版本：1.19.0

License: MIT

2.依赖

要求

jquery，用1.7.2、1.8.3、1.9.1、1.11.1、3.1.1进行测试

3.文档

验证您之前从未验证过的表单！
"But doesn't jQuery make it easy to write your own validation plugin?"
当然，但仍有许多细微之处需要注意：您需要一个标准的验证方法库（例如电子邮件，URL，信用卡号）。您需要在DOM中放置错误消息，并在适当时显示和隐藏它们。你想要的不仅仅是提交事件，比如keyup和blur。
根据您在不同项目中使用的服务器端环境，您可能需要不同的方法来指定验证规则。毕竟，你不想重新发明轮子，对吗？

“但是那里已经没有大量的验证插件吗？”
是的，有很多非基于jQuery的解决方案（自从你找到jQuery后就可以避免）和一些基于jQuery的解决方案。这个特别的插件是最古老的jQuery插件之一（始于2006年7月），并在世界各地的项目中证明了自己。还有一篇文章讨论了这个插件如何符合应该验证的解决方案。

不相信？看看这个例子：

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

这不是那么好吗？
单行jQuery选择表单并应用验证插件，并在每个元素上添加一些注释以指定验证规则。

当然，这不是指定规则的唯一方法。您也不必依赖这些默认消息，但在首次为表单设置验证时它们会派上用场。

在进行这个演示时需要注意的一些事项
在尝试提交无效表单后，第一个无效元素被聚焦，允许用户更正该字段。如果另一个无效字段（不是第一个字段）在提交之前被重点关注，那么该字段将被聚焦，允许用户在他或她更喜欢的情况下从底部开始。
在字段被标记为无效之前，验证是惰性的：在第一次提交表单之前，用户可以在不显示恼人消息的情况下通过字段进行选项卡 - 在有机会实际输入正确值之前，它们不会被窃听
一旦字段被标记为无效，它就会得到即刻的验证：一旦用户输入了必填的正确值，就会移除错误消息
如果用户在非标记字段中输入内容，并且标签/点击远离它（模糊字段），则会进行验证 - 显然用户有意输入内容，但未能输入正确的值
当点击验证插件的演示时，这种行为可能会令人恼火 - 它专为不显眼的用户体验而设计，尽可能少地使用不必要的错误消息让用户烦恼。

3.API 文档

validate()方法选项

在整个文档中，经常使用两个术语，因此在验证插件的上下文中了解它们的含义非常重要：

• 方法: 验证方法实现验证元素的逻辑，就像检查文本输入值的正确格式的电子邮件方法一样。 提供了一套标准方法，您可以轻松编写自己的方法。
• 规则: 验证规则将元素与验证方法相关联，例如“使用名称验证输入”主邮件"required" and "email"。

 常见方法

这个库添加了三个jQuery插件方法，主要入口点是validate方法：

 Custom selectors

• validate（） - 验证选定的表单。
• valid（） - 检查所选表单或所选元素是否有效。
• rules（） - 读取，添加和删除元素的规则。

该库还使用三个自定义选择器扩展了jQuery：

• ：blank  - 选择具有空值的所有元素。
• ：filled  - 选择具有填充值的所有元素。
• ：unchecked  - 选择未选中的所有元素。

 Validator

validate方法返回一个Validator对象，该对象具有一些可用于以编程方式触发验证或更改表单内容的公共方法。 验证器对象有更多方法，但只有这里记录的方法可供使用。

• Validator.form（） - 验证表单。
• Validator.element（） - 验证单个元素。
• Validator.resetForm（） - 重置受控表单。
• Validator.showErrors（） - 显示指定的消息。
• Validator.numberOfInvalids（） - 返回无效字段的数量。
• Validator.destroy（） - 销毁验证器的这个实例。

还如如下几个静态方法：

• jQuery.validator.addMethod（） - 添加自定义验证方法。
• jQuery.validator.format（） - 用参数替换{n}个占位符。
• jQuery.validator.setDefaults（） - 修改验证的默认设置。
• jQuery.validator.addClassRules（） - 添加复合类方法。

 内置验证方法列表：

提供如下标准的验证方法：

• required  - 使元素成为必需元素。
• remote  - 请求资源检查元素的有效性。
• minlength  - 使元素需要给定的最小长度。
• maxlength  - 使元素需要给定的最大长度。
• rangelength  - 使元素需要给定的值范围。
• min  - 使元素需要给定的最小值。
• max  - 使元素需要给定的最大值。
• range  - 使元素需要给定的值范围。
• step  - 使元素需要给定的步骤。
• 电子邮件 - 使元素需要有效的电子邮件
• url  - 使元素需要有效的url
• date  - 使元素需要一个日期。
• dateISO  - 使元素需要ISO日期。
• number  - 使元素需要十进制数。
• digits  - 使元素仅需要数字。
• equalTo  - 要求元素与另一个元素相同

还有一些方法作为附件提供，目前包含在下载包中的additional-methods.js中。 并非所有这些都记录在这里：

• accept  - 使文件上载仅接受指定的mime-types。
• creditcard  - 使元素需要信用卡号。
• extension  - 使元素需要特定的文件扩展名。
• phoneUS  - 验证有效的美国电话号码。
• require_from_group  - 确保组中给定数量的字段完整。

可以使用$ .validator.methodsproperty重新定义内置规则的实现。

 Fields with complex names (brackets, dots)

When you have a name attribute like user[name], make sure to put the name in quotes. More details in the General Guidelines.

 Too much recursion

Another common problem occurs with this code:

This results in a too-much-recursion error: $(form).submit() triggers another round of validation, resulting in another call to submitHandler, and voila, recursion. Replace that with form.submit(), which triggers the native submit event instead and not the validation.

So the correct code looks slightly different:

 Demos

 The Marketo sign-up form

 The Marketo sign-up form, step 2

Based on an old version of the marketo.com sign-up form. The custom validation was once replaced with this plugin. Thanks to Glen Lipka for contributing it!

Notable features of the demo:

• Customized message display: No messages displayed for the required method, only for typing-errors (like wrong email format); A summary is displayed at the top ("You missed 12 fields. They have been highlighted below.")
• Remote validation of email field. Try to enter eg. [email protected]
• Integration with masked-input plugin, see Zip and Phone fields and Credit Card Number on step 2
• A custom method for making the billing address on step 2 optional when "Same as Company Address" is checked
• A custom method for checking the password: Checks that the password contains at least one number and one character and that it is at least 6 characters long. If the user blurs the field with an invalid value, the input is emptied and gets focus again.

 The Remember The Milk sign-up form

The sign-up form from rememberthemilk.com (based on an older version). The custom validation was replaced using this plugin. Thanks to RTM for contributing!

Notable features of the demo:

• Custom message display, based on the original table layout, using success option to display a checkmark for valid fields
• Remote validation of username, to check if it is already taken (try "Peter", "asdf" or "George")

 A multipart "buy&sell a house" form

Contributed by Michael Evangelista, showing a multipart form for buying and selling houses.

Notable features of the demo:

• Multipart, implemented using the jQuery UI accordion and a custom method to check if an element is on the current page when validated
• Integration with masked-input plugin, see Phone and Zip fields

 Using remote validation to help with captchas

Features remote validation for helping the user to fill out captchas.

Notable features of the demo:

• Remote validation to check if the user entered the correct captcha, without forcing him to submit the form first