[JavaScript] 한글, 영어(알파벳), 숫자 만 입력 받기(정규표현식)

등록이나 수정페이지에서 입력 받을 때 숫자만 입력 받거나, 영어-알파벳 또는 한글만 입력 받을 수 있도록 제한이 필요할 수가 있습니다.

숫자는 number type을 사용할 수도 있지만 꼭 text type 으로 받아야 한다면 정규표현식을 사용하면 쉽게 구현하여 확인 할 수 있습니다.

어떻게 구현하는지 알아보겠습니다.

정규표현식

정규표현식의 문법을 간단하게 알아보면 아래와 같습니다.

^ : 문자열의 시작을 의미
[pattenr] : 찾으려는 패턴
\+ : 문자 1개 이상을 의미
$ : 문자열의 끝을 의미

문자열에 한글만 있는지 확인

정규표현식 패턴 /^[ㄱ-ㅎ|가-힣]+$/ 는 한글 1개 이상을 의미합니다.

const  regex = /^[ㄱ-ㅎ|가-힣]+$/;

let str = "가나다";
console.log(regex.test(str));

str = "rkskek";
console.log(regex.test(str));

str = "123가나다";
console.log(regex.test(str));

Output:

 true
 false
 false

문자열에 숫자만 있는지 확인

정규표현식 패턴 /^[0-9]+$/ 0~9 사이의 숫자 1개 이상을 의미합니다.

const  regex = /^[0-9]+$/;

let str = "12213";
console.log(regex.test(str));

str = "a123";
console.log(regex.test(str));

str = "123가나다";
console.log(regex.test(str));

Output:

true
false
false

문자열에 영어(알파벳)만 있는지 확인

정규표현식 패턴 /^[a-z|A-Z]+$/ 는 소문자 또는 대문자 알파벳 1개 이상을 의미합니다.

const  regex = /^[a-z|A-Z]+$/;

let str = "aAbBcC";
console.log(regex.test(str));

str = "a123";
console.log(regex.test(str));

str = "A123가나다";
console.log(regex.test(str));

Output:

true
false
false

문자열에 영어(알파벳), 한글, 숫자만 있는 지 확인

앞서 있던 패턴을 모두 합치면 됩니다. | 으로 이어주면 됩니다.

패턴은 /^[a-z|A-Z|0-9|ㄱ-ㅎ|가-힣]+$/ 한글, 소문자 대문자 알파벳, 숫자에 해당하는 문자 1개 이상을 의미합니다.

const  regex = /^[a-z|A-Z|0-9|ㄱ-ㅎ|가-힣]+$/ ;

let str = "aAbBcC";
console.log(regex.test(str));

str = "a123";
console.log(regex.test(str));

str = "A123가나다";
console.log(regex.test(str));

str = "-+!@1234";
console.log(regex.test(str));

Output: