Question

在使用了几个验证库后，我终于决定推出自己的实现，因为没有一个库按照我想要的方式运行。下面的代码工作正常，但我认为这不是很惯用。函数体很大，应该可以重构成更小的块。

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

验证应该在元素的blur上进行。通过插入和删除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"]);
}

如何让我的验证更加惯用？

1 个答案: