Total Validator Tool for MAC

Total Validator Tool 这软件帮助你检查你的网页是否符合标准，结果将帮助你迅速地解决问题。这件检查工具有针对 W3C/ISO DTDs 的 (X)HTML 有效性，W3C WAI ，时间检查，坏链检查等。

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();