[JS/입력값검증] 숫자 3자리마다 ,(콤마)찍기 / 숫자와 콤마를 제외한 문자 입력 제한 / 0으로 시작 못하게 제한 / keyup이벤트

 

오늘은 input박스에 숫자를 입력했을 때

여러가지 이벤트 주는 것을 구현해보려고 한다.

 

키보드를 입력하는 것과 동시에 이벤트가 발생해야하므로

keyup이벤트를 사용할 예정이다.

 

 

1. 숫자 3자리마다 ,(콤마)찍기

2. 숫자와 콤마를 제외한 나머지 문자를 입력할 수 없도록 막기

3. 0으로 시작하지 못하게 제한하기

 

---

 

먼저 숫자 3자리마다 콤마를 찍기 위해 아래와 같은 함수를 만들어보았다.

function insertComma(num) {
    if(num.length <= 3) {
        return num;
    }
    var count = Math.ceil(num.length / 3);

    var newNum = [];
    for(var i=0; i<count; i++) {
        newNum.unshift(num.slice(-3*(i+1), num.length-(3*i)));
    }
    return newNum.join(',');
}

 

이걸 그림으로 대충 설명해보면 다음과 같다.

만약 숫자가 3보다 작거나 같다면 그대로 그 원본 숫자를 return한다.

만약에 길이가 3보다 크면 3으로 나눈 후 올림처리를 해서 count라는 변수에 저장한다.

 

즉, 1234라는 숫자가 입력되면 count에는 2가 저장된다.

count = 4 / 3 = 1.333333... = 2 (올림)

 

123456이라는 숫자라면 count = 6 / 3 = 2가 될 것이다.

1234567이면 count = 7 / 3 = 2.333333... = 3이 될 것이다.

 

이제 카운트만큼 반복문을 돌려서 숫자를 3자리마다 끊어줄 것이다.

만약에 숫자가 1234라면 count는 2이므로 2번 반복된다.

초기 조건식은 i = 0이므로 첫번째 반복 시 위와 같이 234만 slice된다.

이 slice된 "234"를 newNum이라는 빈 배열 맨 앞에 넣어준다.

 

이제 2번째 반복 시 i=1이 된다.

그러므로 위와 같이 -6번째부터 1번째까지 잘라주는데

-6번째와 -5번째는 빈값이므로 "1"만 slice된다.

이 "1"을 newNum 배열 맨 앞에 넣어준다.

그리고 배열을 ,(콤마)와 함께 join시켜 return해주면 된다.

 

 

 

document.getElementById('testNum').addEventListener('keyup', function(event) {
    this.value = insertComma(this.value)
})

이제 완성된 함수를 input에 적용시켜주면 되는데 여기에는 큰 문제가 있었다.

왜냐면 this.value의 값, 예를 들어 1234를 가져와서

insertComma() 함수의 파라미터로 던져서 1,234를 this.value로 넣어준다고 쳐보자.

그럼 이미 콤마가 붙어진채로 return된 1,234 값이 다시 insertComma() 함수의 파라미터로 들어가고

키보드가 새로 눌리는 순간 다시 작동되므로 1,,,2,3,,,,4,,,이런 식으로 이상하게 출력될 것이다.

 

document.getElementById('testNum').addEventListener('keyup', function(event) {
    this.value = insertComma(this.value.replace(/[,]/g, ''))
})

이걸 방지하기 위해 정규식을 사용해주었는데

this.value를 insertComma() 함수에 던져줄 때, 모든 콤마를 제거한 상태로 던져주었다.

 

즉, 키보드를 눌러서 값이 바뀔 때마다 콤마를 제거하여 다시 새로 생성하는 것이다.

 

 

정규식은 규칙을 약간 알아두면 매우 유용하게 사용할 수 있는데,

input박스에 숫자와 콤마를 제외한 모든 문자 입력 제한 / 0으로 시작하는 숫자 입력 제한도

정규식을 이용해서 간단하게 만들 수 있다.

 

document.getElementById('testNum').addEventListener('keyup', function(event) {
    // 0으로 시작하면 0 지우기 / 숫자 외 문자 입력방지
    this.value = this.value.replace(/^[0]|[^0-9,]/g, '')
})

대충 살펴보면

^[] : []밖에 ^가 있다면 어떤 문장이 블록안에있는 요소로 시작된다면 그 시작 문자가 해당된다.

예를 들어 ^[0]이면 0으로 문장이 시작할 때 그 0을 가리킨다.

[^ ] : 블록안에 ^가 있다면 그건 ^다음에 적는 요소를 제외한 나머지 문자를 가리킨다.

예를 들어 [^0-9,]라면 0~9사이 숫자와 콤마를 제외한 나머지 모든 문자를 가리킨다.

| 는 or의 의미이다.

 

그러므로 위와 같이 작성하면 0으로 시작했을 때는 0을 빈 값으로 replace된다.

또한 0~9사이의 숫자와 콤마를 제외한 어떤 값이 입력되면 그 값은 빈 값으로 replace된다.

 

정규식 법칙은 대충이라도 알아두면 매우 유용하다.

내가 만든 정규식 표현이 맞는지 확인할 수 있는 사이트는 다음과 같다.

 

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

 

-아래 input박스로 테스트해 보세요.-