jqueryvalidation学习总结

最近一段时间忙着项目，没怎么更新博客，现在抽空总结下项目中用到的插件和碰到的问题，先说说jqueryvalidation

debug

是否开启danebug模式，如果开启的话，那么表单不会提交，只进行检查，然后某些错误将会打印在控制台上面

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

submitHandler

type:function
当表单验证完成之后执行的函数，获取表单作为唯一的参数

$(".selector").validate({
  submitHandler: function(form) {
    console.log("done");
  }
});

invalidHandler

type:function
当表单验证完成之前执行的函数，调用事件对象作为第一个参数，第二个为验证器（validator）

$(".selector").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();
    }
  }
});

ignore

type: 元素
验证时忽略的元素，也就是不会被验证的元素，这里默认：hidden，readyonly的元素是不会被验证的

//拥有ignore这个class的元素不会被验证
$("#myform").validate({
  ignore: ".ignore"
});

rules

type: 对象
这里会接受一组规则，规则里面有各种方法，jqueryvalidation自带默认方法，例如required，min，number，range等等

html 部分

<input name="name" type="text"/>
<input name="email" type="email"/>
<input name="checkbox" type="checkbox" id="checkbox" />
<input name="tel" type="tel"/>

js部分

$(".selector").validate({
  rules: {
    //rules里面是根据name来做规则的
    name: "required",
    email: {
      required: true,
    //这里的email是单独写的验证方法，为ture是表示采用这个方法	
      email: true
    },
    tel:{
    //依赖关系
      depends: function(element) {
          return $("#checkbox").is(":checked");
       }
    }	
  }
});

messages

type: 对象
这里会接受一组对象，里面是对错误信息的语言提示，默认自带英文提示，可以引入语言包来替换成中文，也可以自己定义

$(".selector").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"
    }
  }
});

groups

type: 对象
指定错误消息分组。一个组由一个任意的组名作为键，一个由空白符分割的表单元素name属性列表作为值。用errorPlacement定义组消息的存放位置。

$("#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);
    }
  }
});

focusCleanup

type: Boolean
默认为false，如果为true，则当验证元素获得焦点时，移除错误class，并且隐藏错误信息。

$(".selector").validate({
  focusCleanup: true
});

errorElement

type: String
存放错误信息的元素，默认是label

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

wrapper

type: String
包裹错误信息的元素，默认是window

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

errorLabelContainer

type: Selector
错误消息标签的容器，当验证的时候，显示和隐藏这个容器

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

errorContainer

type: Selector
错误消息的容器，当验证的时候，显示和隐藏这个容器

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

showErrors

type: Function()
自定义消息显示的句柄。该回调函数有两个参数，第一个为errorMap,第二个参数为errorList，在validator对象的上下文中调用。参数只包含那些经过onblur/onkeyup验证 的表单元素，也有可能是单个元素。除此之外，你还可以用this.defaultShowErrors()触发默认的行为。

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

errorMap，type:Object,键/值对，key是未通过验证的元素的name值,value是错误提示信息
errorList，type:Array，errorList有两个属性,一个是message(错误提示信息)，另外一个是element(对应的未通过验证的DOM元素)。

errorPlacement

type: Function()
用户自定义错误标签的显示位置。第一个参数：一个作为jQuery对象的错误标签，第二个参数为：一个作为jQuery对象的未通过验证的表单元素。

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

highlight, unhighlight

type: Function()
将未通过验证的表单元素设置高亮或者取消高亮。

$(".selector").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);
  }
});

ignoreTitle

type: Boolean
将未通过验证的表单元素设置高亮或者取消高亮。

$(".selector").validate({
  ignoreTitle: true
});

require_from_group

remote