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

Validation文档翻译

前言

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

起步

引用

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

<script src =“http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js”> </ script>
<script src =“http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js”> </ script>>

使用方式

将校验规则写到控件中：

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

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

将校验规则写到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([option])

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

option

类型：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）
类型：布尔值

.valid()

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<style>
 
  </style>
</head>
<body>
<form id="myform">
<form id="myform">
  <input type="text" name="name" required>
  <br>
  <button type="button">Validate!</button>
</form>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
  alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>

.rules()

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

rules()
这个方法不用任何参数。读取这个表单元素的验证规则。
rules("add",rules)
- add
  类型：字符串
- rules
  类型：对象
添加的验证规则。接受validate方法中相同格式的验证规则。
rules("remove",rules)
- remove
  类型：字符串
- rules
  类型：对象
设置为用空格隔开的规则名称字符串，则会删除这些规则并返回。如果没有设置的话，移除所有的规则并返回。

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

Validation文档翻译

前言

起步

引用

使用方式

文档

.validate([option])

option

.valid()

.rules()

未完待续……

张淼

引用和评论

如何让你的vue组件更好的被使用（Vue-Styleguidist中文文档）

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具