javascript - 我的 JQuery 验证插件对于复选框输入的行为很奇怪

Question

我编写了自己的通用验证插件，它采用一个函数来检查输入是否有效，然后针对第一个函数确定输入有效和无效的每种情况进行回调。

基本上，该插件由两个函数组成，“$.fn.validation()”用于将包含验证逻辑和成功/失败回调的对象绑定(bind)到元素，然后“$.fn.validate()”用于调用验证对象，或者如果传入一个新对象，它将在该实例中使用新对象。插件的实现和 a jsfiddle demonstrating the issues下面的描述可以在这里找到。

我的问题是，虽然文本输入和 texareas 似乎在所有情况下都工作得很好，但取决于某些元素(例如复选框输入)的选择方式，元素可能无法得到验证，尽管它们位于由jQuery 元素

例如，以下选择器不会导致复选框被验证

$('input, textarea').validate();

但是，更具体的选择器将导致复选框被验证

$('input[type=checkbox]').validate();

再次，please checkout the jsfiddle我在哪里复制了这个问题

Answer 1

问题是您在 .validate() 代码中的 this.each() 循环外部提取验证选项:

  $.fn.validate = function(options){

    var validation = $.extend({
      check: $(this).data("check") || function(input){ return true },
      success: $(this).data("success") || function (input){},
      failure: $(this).data("failure") || function (input){}
    }, options);

    var valid = true;

    this.each(function(){
      if(validation.check($(this))){
        validation.success($(this));
      } else {
        validation.failure($(this));
        valid = false;
      }
    });

    return valid;
  };

当您设置验证时，您将获取所选列表中第一个元素的验证配置，这将用于所有元素。

相反，该代码应该位于 this.each() 回调内部:

$.fn.validate = function (options) {


    var valid = true;

    this.each(function () {
        var validation = $.extend({
            check: $(this).data("check") || function (input) {
                return true
            },
            success: $(this).data("success") || function (input) {},
            failure: $(this).data("failure") || function (input) {}
        }, options);
        if (validation.check($(this))) {
            validation.success($(this));
        } else {
            validation.failure($(this));
            valid = false;
        }
    });

    return valid;
};

当您单独执行 input[type=checkbox] 时，它会起作用，因为验证配置将是复选框(该选择器选择的唯一元素)的配置。