jQuery插件开发示范：表单验证

$('#form').required('input1Name').maxlength('input1Name',7).required('input2Name').email('input2Name').validate(userSpecifiedConfig);

(function($){
  //overridable configuration
  var config = {
      validateOnBlur : true,

      showAllErrorOnSubmit : true,

      validateFailCallBack : function(rule){
          alert(rule.explain);
      }
      
  };

  //public method
  var methods = {
    validate : function(options) {
        return this.each(function() {        
            // If options exist, lets merge them
            // with our default settings
            if ( options ) { 
                $.extend( config, options );
            }

           //do other stuff

    });
    },

    required : function(inputName,explain){
        //Maintaining Chainability
        return this.each(function(){
               //do your thing
        });
    },

  };

  $.fn.validate = function( method ) {
    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.validate.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.validate' );
    }    
  
  };
})(jQuery);

• 首先，所谓的闭包，整个插件代码用(function( $ ){ })( jQuery );包起来，这样，你就不用担心插件内部定义的函数名与外部冲突了，当然，你扩展的$.fn对象名字依然不能和$.fn中已有的对象冲突
• 在插件的开头，定义你的config对象，写上你的配置项和默认值。那么，如何修改这些配置呢，请往下面看。
• 现在该定义插件的公共方法了，由于几乎所有的插件都是在扩展$.fn，所以项目规模大的话，很容易会有命名冲突，官网的tutorial甚至要求一个插件只占用$.fn中的一个名字。现在我想定义很多公共方法，怎么办呢，解决方法是类似

$('#1').bind('focus',function(){});

• 下面具体看每个方法的实现，以代码中的methods.validate函数为例，首先，不加思索的，第一行写上return this.each(function(){})，这是为了返回this对象，从而实现链式的调用，有点诡异，看来each返回的是调用者本身？API上并没有提到这点。然后，如果你需要修改默认配置，得在函数参数里加上比如说option,option应该类似这样的

option={
    validateOnBlur :false
}

• 写完公共方法后，下一个是重头戏，我们要在$.fn里加一个函数，这样插件才能被$对象调用，最牛叉的是，这个函数别人已经给写好了。。我们改个名字就可以了。这个函数就干一件事，根据第一个参数找到methods数组里对应的方法，然后把剩下的参数传给这个方法，一执行就完了。当然，你可能希望有一个函数是默认调用的，比如说，这里我希望调用validate()函数时不用再传'validate'参数了，我只需要修改else if里的语句就可以了。

    $('#infoform').validate('required','name','请填写公司名称')
    .validate('required','password','请填写密码')
    .validate('required','contactName','请填写联系人姓名')
    .validate('chineseName','contactName')
    .validate('required','province','请选择您所在的省')
    .validate('required','city','请选择您所在的城市')
    .validate('required','address','请填写您所在的地址')
    .validate('required','email','请填写您的电子邮箱地址')
    .validate('email','email','请填写有效的电子邮箱地址')
    .validate('custome','confirmPassword',function(){
        var p = $(':password[name=password]').attr('value');
        var confirm = $(':password[name=confirmPassword]').attr('value');
        if(p == confirm){
            return true;
        }
        return false;
    },'确认密码与密码不符')
    .validate({
        validateFailCallBack : function(rule){
            $(':input[name='+rule.name+']','#infoform').each(function(){
                 var parent = $(this).parent();
                 parent.addClass('fm-error');
                 $('.fm-explain',parent).html(rule.explain);
                 //reset when on focus again
                 $(this).bind('focus',function(){
                   //clear error style
                 });
            });  
        }
    });