实用的表单验证插件--jquery Validation

摘要：默认值原生的表单提交类型表单验证通过后提交表单的回调函数。使用去控制这个组的验证信息被放置的位置。例子禁用对焦验证。他的回调函数被传入两个参数类型元素这个元素是当前正在被验证的，是一个元素。此函数的上下午为验证对象本身。

Validation作为表单验证中最常用的插件，为我在开发过程中提供了很多便利的地方。虽然说我很常用，但是我真的不敢说我会用Validation。每次使用都是在菜鸟教程上粘贴代码，修改rule就这么用了。所以自己决定还是从头撸一遍文档，但是没找到中文文档。这就有了翻译这个文档的意愿了，那就开始吧。官方文档的位置

使用下菜鸟教程的cdn，因为依赖jquery，所以必须先引入jquery

根据表单控件的类型和属性进行校验，这样比较不灵活

将校验规则写到js代码中

$("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

每个表单空间多带带的进行配置，配置对象中的rule用于设置校验标准，messages用于设置校验错误的提示信息。

validate是Validation的主函数，用于验证选择的表单。

类型：object

debug（默认值：false）
类型：boolean
允许debug模式。如果他设置为true，表单不会被提交而且验证的错误信息将在控制台被输出。
例子：组织表单进行提交，设置提示验证信息和debug信息。

$("#myform").validate({
  debug: true
});

submitHandler（默认值：原生的表单提交）
类型：function()
表单验证通过后提交表单的回调函数。
例子：当表单验证后使用ajax提交表单。

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

例子：使用回调函数先执行部分操作然后再提交表单。注意：参数中的form对应的是一个DOM元素，而且这里提交不会再次出发此回调函数。

$("#myform").validate({
  submitHandler: function(form) {
    // 表单提交前的操作
    form.submit();
  }
});

此回调有两个参数：

form

类型：DOM元素
当前被验证的form表单元素。

event

类型：事件对象
表单提交的事件

invalidHandle
类型：function()
当表格没有通过验证提交时的回调函数
例子：当用户尝试提交一个验证无效的表单时，在表格内显示一个展示有多少错误信息

$("#myform").validate({
  invalidHandler: function(event, validator) {
// "this" refers to the form
var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? "You missed 1 field. It has been highlighted"
        : "You missed " + errors + " fields. They have been highlighted";
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

此回调函数有两个参数：

event
类型：事件对象

一个自定义事件对象，因为该函数被绑定为一个事件处理程序。

validator
类型：Validator

当前表单验证的实例。

ignore（默认值：ignore）
类型：css选择器
当验证的时候，将选择器元素过滤出来不进行校验。使用jquery的not()方法，所以被过滤的表单空间不进行校验。type值为submit和reset的input元素也被过滤掉，他们都是被被禁的元素。
例子：当校验的时候过滤掉带有“ignore”类名的元素

$("#myform").validate({
  ignore: ".ignore"
});

rules（默认值：校验规则从标签的类名、属性、数据中）
类型：对象
键值对定义用户的校验规则。键对应的元素（或者一组的复选框/单选框）的name属性，值是一个对象含有规则/键值对或字符串组成。可以与类名、属性、数据中的校验规则并用。每个规则都可以定义为一个含有depends属性，用于与符合某些条件的规则。看下面第二个例子能更清楚这种规则定义方式。
例子：定义一个必填的name元素和一个必填的email元素（使用简便方式）和有一个有效的email地址。

$("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

例子：定义一个必填email地址的contact元素，最后取决于一个复选框是否选中来验证email规则

$("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

例子：配置一个规则需要一个参数，且有一个依赖的回调函数

$("#myform").validate({
  rules: {
 // at least 15€ when bonus material is included
 pay_what_you_want: {
   required: true
   min: {
     // min needs a parameter passed to it
     param: 15,
     depends: function(element) {
       return $("#bonus-material").is(":checked");
     }
   }
 }
  }
});

messages(默认值：被使用的验证规则的默认验证信息)
类型：对象
键值对的形式定义自定义信息。键是验证元素的name值，值是这个元素显示出的验证信息。值除了是一个单纯的字符串，也可以是对应此元素每个验证规则的对象。重载一个元素的默认验证信息（通过这个方式）。每message可能是一个字符串或者是一个函数。这个函数被调用在validator的作用域内，这个函数的第一个参数是验证规则中的参数，第二个参数是验证的元素，而且必须返回一个字符串作为验证信息。
例子：定义一个必填的name元素和一个必填的验证email规则的元素。一个简单的信息对应必填的name元素，两个信息对应email元素。

$("#myform").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

例子：校验name元素规则为必填和至少两个字符。提供一个函数信息使用jquery.validataor.format以避免在两个地方指定参数。

$("#myform").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      minlength: jQuery.validator.format("At least {0} characters required!")
    }
  }
});

groups
类型：对象
定义错误信息的组。一个组包含作为键的任意组名和一个用空格分隔的元素name的字符串列表作为值。使用errorPlaement去控制这个组的验证信息被放置的位置。
例子：用一个table布局form元素，放置错误信息在下一个单元input之后。

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});

normalizer
类型：函数
为验证，预处理或转换元素的值。这个放在后面详细说。

onsubmit(默认值：true)
类型：bool
在表单提交的时候进行验证。设置false时只能其他事件引起验证。
设置成函数可以设何时执行验证。
一个布尔值的true不是一个有效值，就是true无需设置。
例子：当表单提交的不验证，允许用户使用自定义的方式提交。包括按键、失去焦点、点击事件等。

$("#myform").validate({
  onsubmit: false
});

onfocusout
类型：布尔或者函数
校验元素（除了checkboxes或者radio按钮）在失去焦点的时候。如果这个元素没有输入任何内容，则跳过所有规则，除非这个元素已经被标记为错误。
设置一个函数去界定何时进行校验。
一个true值不是一个有效的值。
例子：禁用对焦验证。

$("#myform").validate({
  onfocusout: false
});

他的回调函数被传入两个参数：

element
类型：元素

这个元素是当前正在被验证的，是一个dom元素。

event
类型：时间对象

这个失去焦点的事件对象。

onkeyup
类型：布尔值或者函数
验证元素在释放按键的时候。当没有表单元素标记为无效的时候，也不会发生。除上述情况之外，所有的规则将被每次按键事件所引起。设置false将禁止。
设置一个函数去界定何时进行校验。
一个true值不是一个有效的值。
例子：禁止按钮验证

$("#myform").validate({
  onkeyup: false
});

这个回调函数被传两个参数：

元素
类型：元素

这个元素是当前正在被验证的，是一个dom元素。

event
类型：时间对象

这个按键的事件对象。

onkeyup
校验checkboxes、radio按钮，和select元素在click事件。设置false时去禁止。
设置一个函数去界定何时进行校验。
一个true值不是一个有效的值。
例子：禁止点击校验checkboxes、radio按钮和select元素。

$("#myform").validate({
  onclick: false
});

元素
类型：元素

这个元素是当前正在被验证的，是一个dom元素。

event
类型：时间对象

这个点击的事件对象。

focusinvalid
类型：布尔值
聚焦最后一个激活的元素或者第一个验证无效的元素，通过使用validator.focusinvalid()方法。最后一个被激活的元素是表单提交的时候最后一个聚焦的元素，阻止他失去焦点。如果没有一个元素被聚焦他将会获取表单中第一个元素，除非这个配置为false。
例子：禁止聚焦无效的元素。

$("#myform").validate({
  focusInvalid: false
});

focusCleanup（默认值为：false）
类型：布尔值
如果设置为enabled，移除错误信息的css类名和隐藏所有的错误信息，当此元素被聚焦的时候。防止联合focusinvalid一起使用。
例子：在聚焦表单元素的时候，移除错误的css类名和隐藏错误信息。

$("#myform").validate({
  errorClass: "invalid"
});

errorClass（默认值为："error"）
类型：字符串
使用这个类名创建标签，查找错误的标签并添加到错误的元素。
例子：设置错误的类名为"invalid"

$("#myform").validate({
  errorClass: "invalid"
});

validClass（默认值为："valid"）
类型：字符串
这个类名是增加到表单元素，在这个元素被验证认定为有效的之后。
例子：设置有效的类名为"success"

$("#myform").validate({
  validClass: "success"
});

errorElement（默认值为："label"）
类型：字符串
使用这个标签类型去创建错误信息提示。默认的是label，这样的好处是可以用for属性创建一个意思明确的链接在错误信息和字段。
例子:设置错误的标签类型为"em"。

$("#myform").validate({
  errorElement: "em"
});

wrapper（默认值为：window）
类型：字符串
包裹错误标签用此属性定义的标签。结合errorLabelContainer属性创建一个错误信息列表。
例子：包裹每个错误元素使用li标签，创建一个错误信息列表。

$("#myform").validate({
  wrapper: "li"
});

errorLabelContainer
类型：css选择器
隐藏和展示验证时的容器
例子：所有的错误的标签被展示在一个id为‘messageBox’无序列表,通过errorContainer选项传递的选择器指定元素中。所有的错误元素被包裹在一个li元素中，制成一个信息列表。

$("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

errorContainer
类型：css选择器
隐藏和展示验证时的容器
例子：使用一个额外的容器包裹错误信息。当验证错误的时候，这个元素将所有的错误信息显示和隐藏。然而，错误标签本身被添加到作为errorLabelContainer给出的元素，这里是无序列表。 因此，错误标签也被包装到li元素（包装选项）中。

$("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

showErrors
类型：函数
一个自定义信息展示的回调函数。获取错误信息的对象作为第一个参数，一个错误信息的数组作为第二个。此函数的上下午为验证对象本身。这些参数只包含当前已经验证过的元素，当在focusout或keyup上进行验证时，它们可以是单个元素。可以通过调用this.defaultShowErrors（）来触发（除了自己的消息）默认行为。
例子：每次一个错误信息呢被展示的时候更新无效元素的数量。伴随着默认的错误信息的展示。

$("#myform").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});

errorMap
类型：对象

键值对，对象的键是校验的input元素name，而值是显示的校验信息。

errorList
类型：数组

一个包含当前已经被校验过的元素的数组。包含的对象有两个属性

- message
类型：字符串
input元素展示的验证信息
- element
类型：元素
此条目的dom节点

errorPlacement （默认值为：放置错误信息的标签在无效的input元素后面）
类型：函数
自定义产生的错误验证标签的位置。第一个参数产生的验证错误信息的jquery对象。第二个参数是验证无效的input元素的jquery对象。
例子：使用一个table来布局form表单，防止错误信息在input后的td里。

$("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
  }
});

这个回调函数有两个参数：

error
类型：jquery对象

要插入DOM中的错误标签。

element
类型：jquery对象

验证信息对应的已经验证input元素，用于error的定位。

success
类型：字符串或函数
如果已经定义，将产生一个对有效input元素的验证信息。如果是赋值的是字符串，则将给这个验证信息的标签加上一个class类名。如果赋值是函数，这个验证信息标签的jquery是第一个参数，第二个参数是被验证的input元素（注意是dom元素）。可以对验证信息进行修改文字。
例子：添加一个"valid"类名到验证信息的元素，使用css控制样式。

$("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

例子：添加一个"valid"类名到验证信息的元素，通过css控制演示，并且添加文字‘ok！’

$("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

这个回调函数传入两个参数：

label
类型：jquery

验证信息标签，使用它可以添加class类名和替换文本内容。

element
类型：dom元素

当前验证通过的表单元素对应的dom元素。

highlight（默认值：添加errorClass（在option中设置）到表单元素）
类型：函数
设置无效表单元素如何高亮。
例子：通过先淡出再淡入的效果高亮一个验证无效的元素。

$("#myform").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

例子：添加一个error class到他的验证无效元素和验证信息

$("#myform").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

这个回调函数传入三个参数：

element
类型：DOM元素

当前验证无效的表单元素。

errorClass
类型：字符串

option中errorClass当前值。

validClass
类型：字符串

option中validClass当前值。

unhighlight（默认值：移除errorClass）
类型：函数
设置失去聚焦的回调函数，参数与highlight相同。

ignoreTitle（默认值：false）
类型：布尔值

检查是否符合验证规则，使用这个方法的之前必须对form元素执行validate()。
例子：设置一个form表单的验证规则，然后检查表单是否符合验证规则在点击按钮之后。

  
  

  Validate!

读取、添加和移除一个元素的规则。

rules()
这个方法不用任何参数。读取这个表单元素的验证规则。

rules("add",rules)

add
类型：字符串

rules
类型：对象

添加的验证规则。接受validate方法中相同格式的验证规则。

rules("remove",rules)

remove
类型：字符串

rules
类型：对象

设置为用空格隔开的规则名称字符串，则会删除这些规则并返回。如果没有设置的话，移除所有的规则并返回。