javascript - 如何使我的验证更加惯用？

Question

在使用了一些验证库之后，我最终决定推出自己的实现，因为没有一个库的行为符合我想要的方式。下面的代码工作正常，但我认为它不是很惯用。函数体很大，可能应该重构为更小的 block 。

我确信有很多方法可以改进我的代码，但我正在寻求有关如何将大函数分解为更小的函数的具体建议，以便代码更容易理解。显然我想添加更多的验证函数，并且我不想创建一堆意大利面条。

验证应该在元素的模糊上进行。通过插入和删除 div，用户会收到问题通知。

验证函数:

(function($) {
  $.fn.extend({
    live_validate: function() {
      return this.each(function() {

        var inputs = $('input', $(this));

        inputs.blur(function() {
          var el = $(this);
          el.siblings('div.feedback').remove();

          if(el.hasAttr('required') && el.val() == '') {
            el.after('<div class="feedback feedback-error">must be present</div>');
            return;
          }    

          if(el.hasAttr('minlength') && el.val().length < el.attr('minlength')) {
            el.after('<div class="feedback feedback-error">is too small</div>');
            return;
          }

          // no validation returned; all good.
          el.filter(":visible").after('<div class="feedback feedback-ok"></div>');

        });

      });
    }
  });
})(jQuery);

这是我用来检查属性是否存在的快速助手。我需要知道该属性是否存在。有更好的方法吗？

$.fn.hasAttr = function(name) {
   return (this.attr(name) !== undefined && this.attr(name) !== false);
};

最后，在我想要的表单上调用验证器。

$(document).ready(function() {

    $("form.new_user").live_validate();

}

Answer 1

我会将每个验证器分隔在其自己的函数中，将每个逻辑分隔在另一个函数中。

(function($) {
  var validators = {
    required: function(el) {
        // Validation code...
    },
    minlength: function(el) {
        // Validation code...
    } // you can add more validators here..
  };
  $.fn.extend({
    live_validate: function(enabledValidators) {
      return this.each(function() {

        var inputs = $('input', $(this));

        inputs.blur(function() {
          var el = $(this);
          el.siblings('div.feedback').remove();
          var hasErrors = false;

          $(enabledValidators).each(function() {
             var result = validators[this](el);
             if(result !== true) {
               el.after('<div class="feedback feedback-error">' + result + '</div>');
               hasErrors = true;
             }
          });

          if(!hasErrors) {
            el.filter(":visible").after('<div class="feedback feedback-ok"></div>');
          }
        });
      });
    }
  });
})(jQuery);

我在这里所做的是将每个验证封装在它自己的函数中。它总是接收 de 元素，如果有效则返回 true，如果无效则返回带有错误的字符串。我还添加了一个enabledValidators，以便能够传递您想要运行的验证器(如果您愿意，您可以删除它并始终执行所有验证器，或者仅在没有传递任何内容的情况下使用所有验证器)。所以你可以这样调用它:

$(document).ready(function() {
    $("form.new_user").live_validate(["required", "minlength"]);
}