Javascript 我如何使我的验证更加地道？

在使用了一些验证库之后，我最终决定推出自己的实现，因为没有一个库的行为符合我的要求。下面的代码工作得很好，但我认为它不是很地道。函数体是巨大的，可能应该重构成更小的块

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

验证应在元素模糊时进行。通过插入和删除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);

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

$(document).ready(function() {

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

}

---

我将在它自己的函数中分离每个验证器，在另一个函数中分离每个逻辑

(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);

---

老实说，您的简单验证器方法在我看来还不错。如果我添加了相等性验证器、现有值的远程JSON调用、数字性等，它看起来还不错吗？我担心在主功能体中添加这些功能会使它变成一个毛球。不错，这是一个明显的改进。我不喜欢通过选择数组。我真的想解析HTML5表单属性，这样表单就可以被现代浏览器验证。但是封装正是我想要的。好吧，如果你不想，就不需要传递选项，只需迭代所有的验证器即可。

(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);

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