jQuery Tools Validator 表单验证插件工具用法详解

网页中经常需要用到表单验证功能，以往需要写大量的代码来验证表单字段，而jQuery Tools提供了一套方便的表单验证工具，熟悉之后可以节省大量的开发时间。

一、validator基本使用方法
jQuery Tools validator插件为input元素新增了几种类型：email、number、url，将自动按照电子邮件格式，整数格式和URL格式来验证input输入框，同时还支持max,min,pattern,required属性，这些都是HTML5标准的属性和类型，即使浏览器不支持HTML5，jQuery tools validator也会自动识别。
示例：定义简单验证规则

$("input[name='email']").validator();

二、validator配置参数详解

属性	默认值	说明
effect	'default'	错误消息显示效果
errorClass	'invalid'	验证失败时给表单元素添加一个醒目的样式
errorInputEvent	'keyup'	当验证有错误（处于错误状态中），触发单项验证的事件名称，还可以使用change,blur 或 null
formEvent	'submit'	表单整体验证时机，将对所有项目进行一次验证
grouped	false	是否将多种错误合并显示.
inputEvent	null	正常状态下触发单项验证的事件名称，优先级低于errorInputEvent，也就是说当发生错误时，优先执行errorInputEvent而忽略本项，还可以使用change,blur 或 null
lang	'en'	错误信息语种
message	'<div/>	错误信息的外部元素
messageAttr	'data-message'	错误信息属性名称，如果给表单元素添加了此属性，则发生错误时显示此属性的值
messageClass	'error'	错误信息的CSS样式
offset	[0, 0]	错误信息显示位置的偏移量
position	'center right'	错误信息显示位置，默认在表单元素右侧，上下居中
singleError	false	是否每次只显示一个错误信息
speed	'normal	错误信息渐显速度

示例：初始化validator并传入配置参数

$("form.vali").validator({
    messageClass:"yellow",
    position:"bottom left",
    errorClass:"errorClass"
});

三、定义默认错误提示

$.tools.validator.localize("cn", {
  ':email'  		: '请输入电子邮件地址',
  ':number' 		: '请输入整数',
  '[max]'	 		: '做多可以输入$1个字符',
  '[min]'	 		: '请至少输入$1个字符',
  '[required]' 	    : '该项为必填项目！'
  });
$("#myForm").validator({lang: 'cn'});

以上代码定义了一系列语种名称为'cn'的默认错误提示信息。如果仅需要对某些单独的字段设置多语种版本，可以使用以下方法

$.tools.validator.localizeFn("[type=time]", {
  en: 'Please supply a valid time',
  cn: '请输入正确的时间格式'
});

四、自定义验证规则

//简单用法
$.tools.validator.fn("[type=time]", function(el, value) {
  return /\d\d:\d\d/.test(value) ? true : "错误的事件格式";
});
//高级用法
$.tools.validator.fn(
    "[type=range]",
    "请输入介于 $1 至 $2 之间的值",
    function(el, v) {
        // 获取min属性和max属性的值
        var min = el.attr("min"), max = el.attr("max"), value = parseFloat(v);
        // 如果符合规则返回true，否则返回一个对象，可用于错误提示中替换占位符
        return  value >= min && value <  max  true  min maxbr>    }
);
//高级用法2
$.tools.validator.fn(
  // 第一个参数用于检测是否适用本验证规则，如果匹配则返回true
  function() {
    return $(this).parents("form.register").length > 0;
  // 第二个参数为验证函数
  }, function(el, v) {
    // 如果验证通过则返回true
    return true;
  }
);

//高级用法3

// 定义匹配函数
function myMatcher() {
  return $(this).parents("form.register").length > 0;
}
 
// 作用对象
myMatcher.key = "register-input";
 
// 使用指定的匹配函数
$.tools.validator.fn(myMatcher, "请填写正确的值", function(el, v) {
  // 验证通过返回true
  return true;
});

五、使用服务端远程ajax验证

// 初始化 validator 并自定义的表单提交事件处理办法
$("#myform").validator({ position: 'center right' }).submit(function(e) {

  var form = $(this);
 
  // 客户端验证已通过的情况下再使用远程验证
  if (!e.isDefaultPrevented()) {
 
  // 使用AJAX提交表单数据，你也可以使用post或其他方式提交表单
  $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {
      // 远程验证通过时返回true
      if (json === true)  {
        form.load("success.php");//具体成功后怎么处理随你
      } else {
        // 远程验证失败. 使用 invalidate() 显示错误信息
        form.data("validator").invalidate(json);
      }
  });
 
  // 阻止表单提交事件冒泡，即表单事件到此处理完毕
  e.preventDefault();
  }
});

远程AJAX返回错误信息的话需要使用JSON格式，如下：

{
  "zip": "You must live in northern Finland in order to proceed",
  "total": "You gave us too much money! Please check"
}

六、使用自定义效果显示/隐藏错误信息

// 定义名称为wall的效果
$.tools.validator.addEffect("wall",
  function(errors, event) {
  
    // 显示方法
    $.each(errors, function(index, error) {
    
    // 获取表单对象
    var input = error.input;
    
    // 获取错误信息
    var errors = error.messages;
    
    //剩下的你自己想怎么处理就在这里写代码
    });
 
  }, function(inputs)  {
    // 隐藏方法，定义隐藏时的特效
  }
);

七、Validator的API方法调用

方法	返回值类型	说明
checkValidity()	boolean	立即执行表单验证
destroy()	API	销毁 validator 实例.
getConf()	Object	返回当前 validator 实例的参数配置.
getForm()	jQuery	返回表单对象
getInputs()	jQuery	返回所有的input对象
invalidate(Object)	API	强制显示错误信息，参数为JSON格式。主要用于从服务端接收到远程验证的错误后进行显示.
reflow()	API	修正错误信息的显示位置，因为错误信息是以绝对定位的方式显示的，有时候表单位置发生改变会导致错误信息显示的位置不正确，调用此函数进行修正。
reset(jQuery)	API	重置"验证错误"，如果参数为空，则重置所有字段；如果表单里有reset按钮，则会被自动添加这个功能。

使用方法：

$('#myform').data("validator").checkValidity();