1

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

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

验证应该发生在blur一个元素上。通过插入和删除divs，用户会收到问题通知。

验证功能：

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

}
4

1 回答 1

0

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

(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"]);
}
于 2012-06-28T15:40:36.880 回答