Total Validator Tool for MAC

Total Validator Tool 這軟件幫助你檢查你的網(wǎng)頁是否符合標(biāo)準(zhǔn)，結(jié)果將幫助你迅速地解決問題。這件檢查工具有針對 W3C/ISO DTDs 的 (X)HTML 有效性，W3C WAI ，時(shí)間檢查，壞鏈檢查等。

jQuery Tools Validator 表單驗(yàn)證插件工具用法

網(wǎng)頁中經(jīng)常需要用到表單驗(yàn)證功能，以往需要寫大量的代碼來驗(yàn)證表單字段，而jQuery Tools提供了一套方便的表單驗(yàn)證工具，熟悉之后可以節(jié)省大量的開發(fā)時(shí)間。

一、validator基本使用方法

jQuery Tools validator插件為input元素新增了幾種類型：email、number、url，將自動按照電子郵件格式，整數(shù)格式和URL格式來驗(yàn)證input輸入框，同時(shí)還支持max,min,pattern,required屬性，這些都是HTML5標(biāo)準(zhǔn)的屬性和類型，即使瀏覽器不支持HTML5，jQuery tools validator也會自動識別。

示例：定義簡單驗(yàn)證規(guī)則

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

二、validator配置參數(shù)詳解

屬性 默認(rèn)值 說明

effect 'default' 錯誤消息顯示效果

errorClass 'invalid' 驗(yàn)證失敗時(shí)給表單元素添加一個醒目的樣式

errorInputEvent 'keyup' 當(dāng)驗(yàn)證有錯誤（處于錯誤狀態(tài)中），觸發(fā)單項(xiàng)驗(yàn)證的事件名稱，還可以使用change,blur 或 null

formEvent 'submit' 表單整體驗(yàn)證時(shí)機(jī)，將對所有項(xiàng)目進(jìn)行一次驗(yàn)證

grouped false 是否將多種錯誤合并顯示.

inputEvent null 正常狀態(tài)下觸發(fā)單項(xiàng)驗(yàn)證的事件名稱，優(yōu)先級低于errorInputEvent，也就是說當(dāng)發(fā)生錯誤時(shí)，優(yōu)先執(zhí)行errorInputEvent而忽略本項(xiàng)，還可以使用change,blur 或 null

lang 'en' 錯誤信息語種

message '<div/> 錯誤信息的外部元素

messageAttr 'data-message' 錯誤信息屬性名稱，如果給表單元素添加了此屬性，則發(fā)生錯誤時(shí)顯示此屬性的值

messageClass 'error' 錯誤信息的CSS樣式

offset [0, 0] 錯誤信息顯示位置的偏移量

position 'center right' 錯誤信息顯示位置，默認(rèn)在表單元素右側(cè)，上下居中

singleError false 是否每次只顯示一個錯誤信息

speed 'normal 錯誤信息漸顯速度

示例：初始化validator并傳入配置參數(shù)

$("form.vali").validator({

    messageClass:"yellow",

    position:"bottom left",

    errorClass:"errorClass"

});

三、定義默認(rèn)錯誤提示

$.tools.validator.localize("cn", {

  ':email'   : '請輸入電子郵件地址',

  ':number' : '請輸入整數(shù)',

  '[max]' : '做多可以輸入$1個字符',

  '[min]' : '請至少輸入$1個字符',

  '[required]'    : '該項(xiàng)為必填項(xiàng)目！'

  });

$("#myForm").validator({lang: 'cn'});

以上代碼定義了一系列語種名稱為'cn'的默認(rèn)錯誤提示信息。如果僅需要對某些單獨(dú)的字段設(shè)置多語種版本，可以使用以下方法

$.tools.validator.localizeFn("[type=time]", {

  en: 'Please supply a valid time',

  cn: '請輸入正確的時(shí)間格式'

});

四、自定義驗(yàn)證規(guī)則

//簡單用法

$.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);

        // 如果符合規(guī)則返回true，否則返回一個對象，可用于錯誤提示中替換占位符

        return  value >= min && value <  max  true  min maxbr>    }

);

//高級用法2

$.tools.validator.fn(

  // 第一個參數(shù)用于檢測是否適用本驗(yàn)證規(guī)則，如果匹配則返回true

  function() {

    return $(this).parents("form.register").length > 0;

  // 第二個參數(shù)為驗(yàn)證函數(shù)

  }, function(el, v) {

    // 如果驗(yàn)證通過則返回true

    return true;

  }

);

//高級用法3

// 定義匹配函數(shù)

function myMatcher() {

  return $(this).parents("form.register").length > 0;

}

// 作用對象

myMatcher.key = "register-input";

// 使用指定的匹配函數(shù)

$.tools.validator.fn(myMatcher, "請?zhí)顚懻�確的值", function(el, v) {

  // 驗(yàn)證通過返回true

  return true;

});

五、使用服務(wù)端遠(yuǎn)程ajax驗(yàn)證

// 初始化 validator 并自定義的表單提交事件處理辦法

$("#myform").validator({ position: 'center right' }).submit(function(e) {

  var form = $(this);

  // 客戶端驗(yàn)證已通過的情況下再使用遠(yuǎn)程驗(yàn)證

  if (!e.isDefaultPrevented()) {

  // 使用AJAX提交表單數(shù)據(jù)，你也可以使用post或其他方式提交表單

  $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {

      // 遠(yuǎn)程驗(yàn)證通過時(shí)返回true

      if (json === true)  {

        form.load("success.php");//具體成功后怎么處理隨你

      } else {

        // 遠(yuǎn)程驗(yàn)證失敗. 使用 invalidate() 顯示錯誤信息

        form.data("validator").invalidate(json);

      }

  });

  // 阻止表單提交事件冒泡，即表單事件到此處理完畢

  e.preventDefault();

  }

});

遠(yuǎn)程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)  {

    // 隱藏方法，定義隱藏時(shí)的特效

  }

);

七、Validator的API方法調(diào)用

方法 返回值類型 說明

checkValidity() boolean 立即執(zhí)行表單驗(yàn)證

destroy() API 銷毀 validator 實(shí)例.

getConf() Object 返回當(dāng)前 validator 實(shí)例的參數(shù)配置.

getForm() jQuery 返回表單對象

getInputs() jQuery 返回所有的input對象

invalidate(Object) API 強(qiáng)制顯示錯誤信息，參數(shù)為JSON格式。主要用于從服務(wù)端接收到遠(yuǎn)程驗(yàn)證的錯誤后進(jìn)行顯示.

reflow() API 修正錯誤信息的顯示位置，因?yàn)殄e誤信息是以絕對定位的方式顯示的，有時(shí)候表單位置發(fā)生改變會導(dǎo)致錯誤信息顯示的位置不正確，調(diào)用此函數(shù)進(jìn)行修正。

reset(jQuery) API 重置"驗(yàn)證錯誤"，如果參數(shù)為空，則重置所有字段；如果表單里有reset按鈕，則會被自動添加這個功能。

使用方法：

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