[JavaScript/jQuery] 회원가입 input값 공백 제거하기(onChange event)

이전 게시글에서는 회원가입 폼에서 입력값을 검증하는 정규식에 대해 알아보았다.
사용자에게 값을 입력받았을 때 필요 없는 공백이 들어가는 경우가 발생할 수가 있는데,
자바스크립트에서 입력받은 값에서 공백을 제거하는 방법에 대해 알아보자.

 

 

1) 공백 제거 방법

1-1) trim 함수

: trim 함수는 문자열의 앞, 뒤의 공백을 제거해주는 함수이다.
따라서 중간에 들어간 공백에 대해서는 처리가 되지 않는다.
회원가입을 할 때 만약 id 값을 문자열의 길이로만 체크를 하게 된다면
공백만 입력한 경우에도 검증이 통과가 될 것이다.
이 경우, trim 함수를 활용한다면 공백이 제거가 되어 정상적으로 검증이 될 것이다.

str.trim()

1-2) replace 함수

: replace 함수는 모든 문자에 대해 치환을 해준다.
따라서 모든 공백에 대한 처리를 하고 싶은 경우, replace 함수를 활용하면 된다.

str.replace(/\s| /gi,'')

 

 

2) input change event

2-1) input onchange

: 입력받는 input 태그에 onchange 속성을 정의하여 change 이벤트를 정의할 수 있다.
예시

<input type="text" id="userID" class="form-control" placeholder="아이디 (7~12자리, 영문+숫자 조합, 영문으로 시작)" name="userID" maxlength="12" onChange="replaceBlank();">

2-2) jQuery change event

: input 태그가 아닌, jQuery를 활용하여 change 이벤트를 정의할 수도 있다.
예시

$("#userID").change(function() {
    $("#userID").val($("#userID").val().replace(/\s| /gi,''));
});

 

 

[reference]
https://minggu92.tistory.com/41
https://escapefromcoding.tistory.com/289