자바스크립트에서 숫자만 입력 가능하도록 하기 feat. 정규식

개발을 하다보면, 페이지에서 데이터를 입력하고 그 값을 서버로 넘겨서 처리를 하는 일이 굉장히 많다.

그 때 대표적으로 많이 쓰는게 이름과 핸드폰 번호라고 생각된다.

만약 이 부분에서 설정을 잡아놓지 않으면 핸드폰번호에 글자를 입력한다던지 하는 경우가 발생해 DB Insert시 에러를 뿜어낼 수 있다.

이런 일을 사전에 방지하기 위해 웹에서는 정규식을 써서 처리를 한다.

웹페에지에서 숫자만 처리하는 방법에 대해 알아보자.

function numberChk(obj, length) {
 
    var chk = /^[0-9]{1,100}$/g;
 
    // 숫자만 가능하도록 할 경우
    if(chk.test(obj.value)) {
        alert(" 숫자만 입력 가능합니다.");
        return false;
    }
 
 
 
    // 최대입력 길이를 체크하는 경우
    if(obj.value.length != length) {
         alert("최대" + length +"자리까지 입력 가능합니다.");
    return false;
    }
}

의 경우로 확인을 할 수 있다.

 /^[0-9]{1,100}$/g 의 표현에 대해 잠깐 이야기를 해보면

/ : 정규식 시작을 알림

^ : 입력의 처음을 알림

[0-9] : 0에서 9까지 모든 숫자를 의미함

{1,100} : 앞에 0~9까지의 숫자가 등장했을때 1~100깨까지 대응을 하며 체크를 한다.

$ : 입력의 끝을 알림

g : 글로벌을 의미함. 처음부터가 아니라 전체에서 정규식 만족을 확인함.

정규식은 이런식으로 활용을 할 수가 있다.

간단한거지만 빼먹으면 동료들한테 욕먹을 수 있으니 이런건 잘 체크를 하도록 하자.