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

jQuery-validation

特性

• 动态添加和移除规则
• 自定义验证方法
• 多语言支持（37种）
• 远程验证
• 对单个元素验证
• 对整个表单进行验证
• 重置整个表单

通过这个文档，了解validation plugin 使用

html

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

js

$("#commentForm").validate();

method(方法): 是实现元素验证的逻辑

rule(规则): 验证规则关联element和method，比如input的name "primary-mail" methods"required" 和 "email"

Plugin methods(插件方法)

validate() 验证整个表单所有字段

valid() – 验证选择表单是否有效

rules() – 读取元素规则，也可以动态添加和移除

Custom selectors(自定义的选择器)

这个库也可以扩展jquery的选择器的方法

:blank – 选择全部空值的元素

:filled – 选择全部已经填充值的元素

:unchecked – 选择未选中的元素

Validator(验证器)

validate method 返回的是验证器对象，它包含几个公共的方法，你可以使用它触发验证表单

Validator.form() – 验证表单

Validator.element() – 验证单个元素

Validator.resetForm() – 重置整个表单

Validator.showErrors() – 展示特定的提示

Validator.numberOfInvalids() – 返回无效的字段值

验证器对象上的静态方法

jQuery.validator.addMethod() – 添加自定义的验证方法

jQuery.validator.format() – 使用参数替换占位符

jQuery.validator.setDefaults() – 修改默认设置

jQuery.validator.addClassRules() – 为规则添加class

内置验证方法列表

required – 必填

remote – 请求远程资源验证元素

minlength – 给定定字符串最小长度

maxlength – 给定字符串最大长度

rangelength – 给定字符串值的范围

min – 给定数值的最小值

max – 给定数值最大值

range – 给定数值的范围

step –

email – 电子邮件

url – URL

date – 日期

dateISO – 国际化标准日期

number – 必须是浮点数

digits – 只能是数字

equalTo – 和另一个元素一样

accept –

creditcard – 必须是信用卡数字长度

extension – 必须是指定文件扩展名

phoneUS – 验证美国电话号码

require_from_group – 确定一个组的字段已经完成

可以到github查找带更多附加的方法

使用 $.validator.methods property 自定义规则

当你的name属性像user[name]这样时，请确认你name是否使用了双引号，更加详细查看手册

常见问题

这段代码有太多的递归， $(form).submit()回调submitHandler，会进入无限递归，使用form.submit()代替 $(form).submit()

 $("#myform").validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

下面是正确代码

 $("#myform").validate({
  submitHandler: function(form) {
    form.submit();
  }
 });

Demos

The Marketo sign-up form
The Marketo sign-up form, 第二步

• 自定义展示消息
• 远程验证电子邮件
• 自定义方法检查密码

The Remember The Milk sign-up form

多表单示例