동일한 이벤트에 대해 객체 메소드 코드 DRY 만들기

Question

개체의 메소드가 각 메소드를 반복하는 코드 블록이 있습니다.

방법을 '매개 변수화'하여 한 번만 사용할 수 있습니다.

function applyRegexValidation(){ 
    validator = { 
     email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 
     postcode: /^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|(([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|(([A-PR-UWYZ]][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY])))) ?[0-9][ABD-HJLNP-UW-Z]{2})$/i, 
     dob: /^(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/, 
     companyReg: /^[OSCLIPRN]{2}[0-9]{6}|[0-9]{8}$/, 
     phone: /^[0-9]{11,18}$/, 
     text: /^[a-zA-Z ]*$/ 
    }; 

var RegexCheck = { 
    email: function() { 
     var isEmpty, pattern, result, elem = this.value; 
     isEmpty = !elem; 
     pattern = validator.email; 
     result = pattern.test(elem); 
     if (result === false || isEmpty) { 
      $(this).closest('div').removeClass('has-success'); 
      $(this).closest('div').addClass("has-feedback has-error"); 
      $(this).attr("data-valid", "false"); 
     } 
     else { 
      $(this).closest('div').removeClass('has-error'); 
      $(this).closest('div').addClass("has-feedback has-success"); 
      $(this).attr("data-valid", "true"); 
     } 
    }, 
    postcode: function() { 
     var isEmpty, pattern, result, elem = this.value; 
     isEmpty = !elem; 
     pattern = validator.postcode; 
     result = pattern.test(elem); 
     if (result === false || isEmpty) { 
      $(this).closest('div').removeClass('has-success'); 
      $(this).closest('div').addClass("has-feedback has-error"); 
      $(this).attr("data-valid", "false"); 
     } 
     else { 
      $(this).closest('div').removeClass('has-error'); 
      $(this).closest('div').addClass("has-feedback has-success"); 
      $(this).attr("data-valid", "true"); 
     } 
    }, 
    dob: function() { 
     var isEmpty, pattern, result, elem = this.value; 
     isEmpty = !elem; 
     pattern = validator.dob; 
     result = pattern.test(elem); 
     if (result === false || isEmpty) { 
      $(this).closest('div').removeClass('has-success'); 
      $(this).closest('div').addClass("has-feedback has-error"); 
      $(this).attr("data-valid", "false"); 
     } 
     else { 
      $(this).closest('div').removeClass('has-error'); 
      $(this).closest('div').addClass("has-feedback has-success"); 
      $(this).attr("data-valid", "true"); 
     } 
    }, 
    companyReg: function() { 
     var isEmpty, pattern, result, elem = this.value; 
     isEmpty = !elem; 
     pattern = validator.companyReg; 
     result = pattern.test(elem); 
     if (result === false || isEmpty) { 
      $(this).closest('div').removeClass('has-success'); 
      $(this).closest('div').addClass("has-feedback has-error"); 
      $(this).attr("data-valid", "false"); 
     } 
     else { 
      $(this).closest('div').removeClass('has-error'); 
      $(this).closest('div').addClass("has-feedback has-success"); 
      $(this).attr("data-valid", "true"); 
     } 
    }, 
    phone: function() { 
     var isEmpty, pattern, result, elem = this.value; 
     isEmpty = !elem; 
     pattern = validator.phone; 
     result = pattern.test(elem); 
     if (result === false || isEmpty) { 
      $(this).closest('div').removeClass('has-success'); 
      $(this).closest('div').addClass("has-feedback has-error"); 
      $(this).attr("data-valid", "false"); 
     } 
     else { 
      $(this).closest('div').removeClass('has-error'); 
      $(this).closest('div').addClass("has-feedback has-success"); 
      $(this).attr("data-valid", "true"); 
     } 
    } 
}; 
$('form [type=email]').on('input blur', RegexCheck.email); 
$('form [type=tel]').on('input blur', RegexCheck.phone); 

$('form [bf-datatype=dob]').on('input blur', RegexCheck.dob); 
$('form [bf-datatype=companyReg]').on('input blur', RegexCheck.companyReg); 
$('form [bf-datatype=postcode]').on('input blur', RegexCheck.postcode); 
} 

Answer 1

:

가 나는 '패턴'매개 변수를 사용하여 하나 개의 재사용 가능한 블록으로 방법을 다시하지만 난 여기에

에 넣어 무엇을 따라 서로 다른 오류를 많이 얻을 수있는 노력들을 시도 코드입니다

은 다음과 같을 수 있습니다.

function applyRegexValidation() { 
    validator = { 
     email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 
     postcode: /^(GIR 0AA)|((([A-PR-UWYZ][0-9][0-9]?)|(([A-PR-UWYZ][A-HK-Y][0-9][0-9]?)|(([A-PR-UWYZ]][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY])))) ?[0-9][ABD-HJLNP-UW-Z]{2})$/i, 
     dob: /^(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/, 
     companyReg: /^[OSCLIPRN]{2}[0-9]{6}|[0-9]{8}$/, 
     phone: /^[0-9]{11,18}$/, 
     text: /^[a-zA-Z ]*$/ 
    }; 

    function RegexCheck() { 
     var isEmpty, pattern, result, classesToRemove, classesToAdd, dataValid, elem = this.value; 
     isEmpty = !elem; 
     // "$(this).prop('type')" works for 'type=*', for the 'bf-datatype=*' find a way to get a key to search in 'validator' 
     pattern = validator[$(this).prop('type')]; 
     result = pattern.test(elem); 
     dataValid = (result !== false && !isEmpty); 

     classesToRemove = dataValid ? 'has-error' : 'has-success'; 
     classesToAdd = dataValid ? 'has-feedback has-success' : 'has-feedback has-error'; 

     $(this).closest('div') 
      .removeClass(classesToRemove) 
      .addClass(classesToAdd) 
      .attr("data-valid", dataValid); 
    } 

    $('form').on('input blur', RegexCheck); 
}