반응형
등록이나 수정페이지에서 입력 받을 때 숫자만 입력 받거나, 영어-알파벳 또는 한글만 입력 받을 수 있도록 제한이 필요할 수가 있습니다.
숫자는 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:
true
true
true
false
반응형