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的数."