jQuery 验证插件 - 将函数作为参数传递

Question

我正在编写一个 jQuery 插件来验证表单。该插件效果很好，但我希望能够定义表单验证后会发生什么。所以我希望能够将函数作为参数传递。该函数将包含一堆实际提交表单的东西。验证成功时需要调用该参数。

在 HTML 文件中调用的插件：

<script>
  $(document).ready(function(){
    $('#cForm').shdValidate({
      success : formSubmit()
    });
  });
</script>

jQuery 插件：

(function($) {
  $.fn.shdValidate = function(options) {

    //==== SETTINGS
    var shdValidateSuccess = $.extend(options).success,
        form = this;

    //==== SUBMIT CLICK
    this.children('input[type=submit]').click(function(){
      //variables
      var shdRequired = $(form).children('.required'),
          shdValid = 0;

      //validated fields
      $(shdRequired).each(function(){
        $(this).removeClass('shdValidateAlert');
        if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')){ $(this).addClass('shdValidateAlert'); }
        else { shdValid += 1; }
      });

      //outcome
      if (shdValid == $(shdRequired).length) { 
        //THE SUCCESS PARAMETER NEEDS TO BE CALLED HERE SOMEHOW
      }
      return false;
    });

  }
}(jQuery));

如您所见，我已经注释了需要在插件中调用参数的位置。目前我无法正常工作。

Answer 1

你需要做两处改变

  $(document).ready(function(){
    $('#cForm').shdValidate({
      success : formSubmit
    });
  });

和

(function($) {
  $.fn.shdValidate = function(options) {

    //==== SETTINGS
    var shdValidateSuccess = $.extend(options).success,
        form = this;

    //==== SUBMIT CLICK
    this.children('input[type=submit]').click(function(){
      //variables
      var shdRequired = $(form).children('.required'),
          shdValid = 0;

      //validated fields
      $(shdRequired).each(function(){
        $(this).removeClass('shdValidateAlert');
        if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')){ $(this).addClass('shdValidateAlert'); }
        else { shdValid += 1; }
      });

      //outcome
      if (shdValid == $(shdRequired).length) { 
        //THE SUCCESS PARAMETER NEEDS TO BE CALLED HERE SOMEHOW
        if($.isFunction(shdValidateSuccess)){
            shdValidateSuccess(form);
        }
      }
      return false;
    });

  }
}(jQuery));