一、插件结构(组织方式)
在讲述如何对元素进行验证前有必要了解它的代码组织方式，请看代码(部分省略)
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的数."