HTML, CSS, JavaScript

[JavaScript] 정규식으로 validation check하기 (숫자 or 한글 or 영어 or 특수문자 입력 검증)

15호의 개발자 2022. 7. 6. 12:00
반응형

[JavaScript] 정규식으로 validation check하기 (숫자 or 한글 or 영어 or 특수문자 입력 검증)

 

 

 

 

 

validation check를 할 때 정규식(Regular Expressions)을 이용하면 코드의 양을 훨씬 간결하게 만들 수 있다는 장점이 있다.

 

물론 단점도 있는데, 정규식에 익숙한 사용자가 아닌 이상 직관적으로 이해하기는 힘들다는 단점이 있다.

 

 

 

 

 

 

input box에서 vaildation check(유효성 체크)를 할 때,

아래 JavaScript 함수를 이용해 검증을 할 수 있다.

 

input box에 입력시 숫자만 입력 가능한 경우, 한글만 입력 가능한 경우, 영어만 입력 가능한 경우, 숫자/한글/영어 모두 입력 가능한 경우 (특수문자는 입력 제외) 사용할 수 있는 함수이다.

 

정규식을 이용해 만든 함수로써 직관적이진 않지만 코드의 양을 훨씬 짧게 만들 수 있다. 

참고로, 정규식은 영어로 Regular Expressions이므로 약어로는 regex로 적는다.

 

function inputValChk(inputType, inputId) {

    var regex;

    // 숫자만 입력 가능
    if (inputType == "onlyNumber")  { regex = /[^0-9]/g;            }
    
    // 한글만 입력 가능
    if (inputType == "onlyKor")     { regex = /[^가-힣]/g;           }
    
    // 영문만 입력 가능
    if (inputType == "onlyEng")     { regex = /[^a-zA-Z]/g;         }
    
    // 숫자, 한글, 영문만 입력 가능 (특수문자만 입력 불가능)
    if (inputType == "numKorEng")   { regex = /[^가-힣a-zA-Z0-9]/g;  }

    $('#' + inputId).on('keyup', function() {
        $(this).val($(this).val().replace(regex, ""));
    });
    
}

 

 

 

반응형