여러 프로젝트를 하면서 회원가입이나 로그인 등 사용자의 입력을 받는 인풋 필드는 항상 있다.
대부분의 경우, 인풋 필드에서 유효성 검사를 해주는데 요구사항별 정규식을 정리해보고자 한다.
물론 프로젝트마다 요구사항이 다르겠지만 두고두고 기록해두면 차후에 유용하게 쓰이게 될 것 같아 기록해둔다.
- 입력 값이 한글인 경우, 자음과 모음만 있는 경우(ex. 발ㅂ바닥)
입력 값이 한글일 때, 자음과 모음만 있는 경우(ex. 발ㅂ바닥)
const letterRegex = /[ㄱ-ㅎㅏ-ㅣ]/
export const letterValidator = (value: string):boolean => {
return letterRegex.test(value) ;
};
위 정규식은 자음과 모음만 있는 경우(ex.발ㅂ바닥), letter.test(value)결과 값이 true가 된다.
대괄호 내부에 특정 글자를 입력하면 입력값 중 특정 글자가 하나라도 있으면 유효성 검사를 해준다.
또한 -(중간 슬래시)는 범위를 지정해준다.
위처럼 ㄱ-ㅎ이면 ㄱ,ㄴ,ㄷ,ㄹ,...ㅎ 까지 범위를 지정해주며 입력값 중 ㄱ과 ㅎ 사이에 자음이 하나라도 있다면 유효성 검사를 해준다.
완전한 글자라면 (ex.발바닥),letter.test(value)결과 값이 false가 된다.
true인 경우, 에러 여부를 설정해주고 그에 맞는 에러 메시지를 적절히 띄워주면 된다.
(ex. 에러 메시지 : 입력 값 중 자음과 모음만 있습니다.)
입력 값을 한글만 받아야하는 경우
const letterRegex = /[가-힣]/;
export const validator = (value: string):boolean => {
return letterRegex.test(value) ;
};
입력값을 한글만 받아야하는 경우, 위와 같이 정규식을 사용해주면 된다.
입력 값을 한글만 받아야하는 경우+글자 중 모음과 자음만 있으면 안되는 경우
const letterRegex = /^[가-힣]*$/;
export const validator = (value: string):boolean => {
return letterRegex.test(value) ;
};
위 정규식에 대해 설명하자면(chat gpt support)
- ^: 문자열의 시작을 나타내는 메타 문자입니다. 이 위치에서는 문자열이 시작됩니다.
- [가-힣]: 한글 문자 범위를 나타내는 문자 클래스입니다. '가'부터 '힣'까지의 모든 한글 문자를 포함합니다.
- *: 앞의 문자나 문자 클래스가 0회 이상 반복됨을 나타냅니다. 따라서 이 위치에서는 한글 문자가 0개 이상 나오는 것을 허용합니다.
- $: 문자열의 끝을 나타내는 메타 문자입니다. 이 위치에서는 문자열이 종료됩니다.
즉, 문자열의 시작부터 끝까지 모든 문자가 한글 문자로만 이루어져 있어야한다.
그래서 중간에 하나라도 자음이나 모음만 있으면 불일치하게 해주는 것이다.
/^[가-힣]/ 차이
- /^[가-힣]$/: 이 정규식은 문자열의 시작과 끝 사이에 한글 문자가 딱 한 개만 있는 경우에 일치합니다.
예를 들어,가가처럼 한글이 2개이상이면 불일치시켜준다.- /^[가-힣]*$/: 이 정규식은 문자열의 시작과 끝 사이에 한글 문자가 0개 이상 있는 경우에 일치합니다.
가가처럼 한글이 2개이상이어도 일치시켜준다.
별표시는 특정 문자의 반복횟수를 0회이상 반복되는 것을 허용하게 해준다.
FE DEVELOPER