회원가입 유효성 검증: 한글만 추출하기

요구사항은 다음과 같다.

1. 한글만 입력받는다. 다른 문자가 들어갈 경우 삭제한다.
2. 최대 길이는 15byte이내이다.

$j("#userName").keydown(function(event){
			const reg = /^[ㄱ-ㅎ|가-히]+$/;
			let userName= $j("#userName").val();
			
			if(userName==""){
				
			}else if(event.keyCode==8){
				
			}else if(!reg.test(userName)){
				userName = userName.replace(/[^\\uAC00-\\uD7AF\\u1100-\\u11FF\\u3130-\\u318F]/gi,"");
				$j(this).val(userName);
				$j(this).focus();
			}
		});

1. 한글만 입력받는다

먼저 정규식을 선언한다.

const reg = /^[ㄱ-ㅎ|가-히]+$/;

원래는 가-힣이 맞지만 인코딩 euc-kr은 힣을 못 받는다. 따라서 히까지만 선언한다.

다음은 입력받은 문자열이 정규식을 만족하는지 여부를 조건문으로 나타낸다.

if(!reg.test(userName)){

}

만족하지 않는다면(!reg.test(userName)) 문자열 속에 포함된 한글이 아닌 문자들을 걸러낸다.

if(!reg.test(userName)){
	userName = userName.replace(/[^\\uAC00-\\uD7AF\\u1100-\\u11FF\\u3130-\\u318F]/gi,"");//걸러내기
	$j(this).val(userName);//입력창에 걸러낸 문자열 입력하기
	$j(this).focus();//커서를 입력창으로
}

keyDown이벤트를 사용했으므로 백스페이스키를 눌렀을때 조건이 실행되는 것을 막아야한다.

또한 빈 문자열일때도 조건이 실행되는 것을 막아야한다.

if(userName==""){//빈문자열일때 아무것도 실행되지 않는다.
				
}else if(event.keyCode==8){//사용자가 백스페이스를 눌렀을때 아무것도 실행되지 않는다.
				
}else if(!reg.test(userName)){
			userName = userName.replace(/[^\\uAC00-\\uD7AF\\u1100-\\u11FF\\u3130-\\u318F]/gi,"");
			$j(this).val(userName);
			$j(this).focus();
}

1. 최대길이는 15byte 이내이다.

euc-kr은 한글을 2byte로 받는다. utf-8은 한글을 3byte로 받는다.

나는 db 인코딩을 utf-8로 설정했으므로 한글 한자당 3byte로 하고 글자수를 5글자로 받는다.

input 태그의 maxlength속성을 이용하면 쉽게 글자수 제어를 할 수 있다.

<input type = "text" name= "userName" maxlength = "5">