유효성 검사를 더 관습적으로 만들려면 어떻게해야합니까?

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를 반환하고 무효이면 오류가있는 문자열을 반환합니다. 또한 어떤 validator를 전달할 수 있도록 enabledValidators를 추가했습니다.이 경우 제거하고 아무것도 수행하지 않으면 모든 validator 만 사용하여 모든 validator를 항상 실행할 수 있습니다. 그래서 당신은 이것을 다음과 같이 부를 것입니다 :

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