jQuery.validator 详解二
一、插件結構(組織方式)
在講述如何對元素進行驗證前有必要了解它的代碼組織方式，請看代碼(部分省略)
var plugFn = function( $ ) {
$.extend($.fn, {
// 驗證from表單
validate: function( options ) {
// ...
// 實例化$.validator對象
var validator = new $.validator( options, this[0] );
// 當表單提交時，通過調用$.validator的原型方法form來驗證表單元素
this.onsubmit(function(){
if ( validator.form() ){
return true;
}
return false;
});
},
// 獲取元素的驗證規則，需要逐一驗證
rules: function( command, argument ) {
// ...
}
});
// constructor for validator
// 構造函數
$.validator = function( options, form ) {
this.settings = $.extend( true, {}, $.validator.defaults, options );
this.currentForm = form;
this.init();
};
$.extend( $.validator, {
// 定義$.validator的屬性，方法
defaults: {
},
setDefaults: function( settings ) {
},
// ...
// 供$.validator實例使用
prototype: {
init: function() {
// ...
// 初始化代碼
},
form: function() {
},
checkForm: function() {
},
elements: function() {
},
check: function( element ) {
},
showErrors: function( errors ) {
},
valid: function() {
return this.size() === 0;
},
size: function() {
return this.errorList.length;
},
// ...
}
});
// ...
};
首先將實現插件的代碼包裝為一個函數，因為插件是需要在jQuery上定義的，因此調用plugFn函數需要傳遞參數 jQuery 或 $ 變量；在插件中定義了構造函數 $.validator 及其屬性，方法，以及 原型對象方法，在擴展$.fn的原型方法validate中，實例化了一個
$.validator對象，并調用實例方法，這就是插件的整個實現邏輯。
// 為了兼容 requirejs（requirejs遵循AMD規范），將代碼包裝為如下：
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery"], factory );
} else {
factory( jQuery );
}
}( plugFn ));
當define類型為函數，且存在define.amd，代碼執行如下：
// 需配置好 jquery 引用路徑
require.config({
paths: {
jquery: 'jquery-1.11.1'
}
});
// 其中的匿名函數就是 上面的 plugFn 函數
define(['jquery'], function( $ ){
// 插件實現
});
二、如何對表單元素驗證
驗證的觸發方式：
1、表單提交：將會對所有不是可選的表單元素進行驗證
2、當觸發focusout事件，且表單元素value不為空(即是必需的，不是可選的)，則會對事件目標元素進行驗證
3、當觸發focusin事件，且在focusout事件中對目標元素驗證過，才會在focusin事件中對目標元素進行驗證
如何驗證：
首先獲取元素的匹配規則，然后輪循匹配規則，進行驗證
$(ele).rules(); validator.check(ele);
如果驗證未通過，將會把元素的name，rule，message記錄給 validator.errorList 數組，并且會生成一個包含錯誤消息的label元素，插入在表單元素的后面
檢測所有表單元素是否通過驗證只需判斷 validator.errorList === 0;
三、配置對象
{
errorClass: "error", // 消息錯誤提示容器，驗證未通過的表單元素的的className
validClass: "valid", // 驗證通過的表單元素的的className
errorElement: "label", // 消息錯誤提示容器的的tagName
wrapper: element.tagName, // 只能是一個標簽名，如:div, strong ...，將會創建一個div元素包裹 錯誤消息提示的label元素
errorLabelContainer: selector, // 如果表單驗證不通過，所有錯誤消息提示的label元素都會插入到該元素中
debug： true, // 為true將會 阻止表單提交，但會驗證表單控件
ignore: ':hidden', // 將會忽略選擇器匹配的所有表單元素的驗證
submitHandler: function(){ // 表單提交時，將會觸發這個函數，如果存在該函數，將會阻止表單提交
},
invalidHandler: function(){ // 如果表單驗證不通過，將會觸發這個函數
}
}
為表單元素添加驗證規則的配置請見：jQuery.validator 驗證規則詳解
小提示：設置debug為true,將會阻止表單提交，但會驗證表單；還有一種相反的行為，不會驗證表單，直接提交，那就需要在提交按鈕的 class 屬性上加一個 cancel 的className 或者 加上一個HTML5的 formnovalidate 屬性；
四、自定義你的錯誤消息提示文案
$.validator.messages = {
required: "輸入不能為空.",
remote: "用戶名已經存在.", // 自己定義
email: "請輸入一個有效的電子郵件地址.",
url: "請輸入一個有效的URL.",
date: "請輸入一個有效的日期.",
dateISO: "請輸入一個有效的日期 ( ISO ) ( 例：2014/08/28 ).",
number: "請輸入一個有效的數字.",
digits: "請輸入一個正整數.",
creditcard: "請輸入一個有效的信用卡號.",
equalTo: "請再次輸入相同的值.",
maxlength: $.validator.format( "請輸入不超過{0}個字符." ),
minlength: $.validator.format( "請輸入至少{0}個字符." ),
rangelength: $.validator.format( "請輸入一個字符長{0}至{1}的字符." ),
range: $.validator.format( "請輸入一個{0}至{1}的數." ),
max: $.validator.format( "請輸入一個值小于或等于{0}的數." ),
min: $.validator.format( "請輸入一個值大于或等于{0}的數." )
};
看看上面的代碼，怎么出現了類似這種 $.validator.format( "請輸入不超過{0}個字符." ) 值呢
直接看源碼：
$.validator.format = function( source, params ) {
// 只傳遞了一個參數
if ( arguments.length === 1 ) {
// 返回一個匿名函數，調用的時候肯定會帶上參數的，別急
return function() {
var args = $.makeArray( arguments );
// 將source插入到最前面
args.unshift( source );
// 如果匿名函數帶上了參數，將會執行$.validator.format后面的部分代碼了，否則永遠都是執行前面的代碼
return $.validator.format.apply( this, args );
};
}
// 參數個數大于2， 如:$.validator.format(source, 10, 20)
if ( arguments.length > 2 && params.constructor !== Array ) {
params = $.makeArray( arguments ).slice( 1 );
}
// 參數個數等于2， 如:$.validator.format(source, 10)
if ( params.constructor !== Array ) {
params = [ params ];
}
// 將 {0} 或 {1} 替換成真正的實參
$.each( params, function( i, n ) {
source = source.replace( new RegExp( "\{" + i + "\}", "g" ), function() {
return n;
});
});
return source;
};
看看怎么來使用它：
// $.validator.format使用實例 $.validator.messages.maxlength(4); // "請輸入不超過4個字符." $.validator.messages.range(10, 100); // "請輸入一個10至100的數."
總結
以上是生活随笔為你收集整理的jQuery.validator 详解二的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PV、UV、GMV
- 下一篇： Canvas中的剪切clip()方法