[TS] 입력 유효성을 체크하는 여러 정규식(feat. 한글, 전화번호, 사업자등록번호, 이메일 등)

1. 들어가기 전에

• 입력창 유효성 검사는 기본이지만, 매번 작업할 때마다 찾게 된다.
• 그래서 이번시간에는 자주 사용되는 입력 정규식, 유효성 검사 코드를 모아보았다!
• 이 포스팅에서는 아래 내용을 담고 있다

1) 필터링 함수
   (1) 한글만 남기기
   (2) 영어만 남기기
   (3) 숫자만 남기기
   (4) 글자(한글 + 영어)만 남기기
   (5) 숫자 + 영어만 남기기
2) 포매팅 함수
   (1) 전화번호 형식으로 변경하기
   (2) 사업자등록번호 형식으로 변경하기
3) 유효성 함수
   (1) 한글만 있는지 판별하기
   (2) 영어만 있는지 판별하기
   (3) 숫자만 있는지 판별하기
   (4) 이메일 형식인지 판별하기

1) 필터링 함수

특정 문자만 남기는 필터링 함수를 알아보자

(1) 한글만 남기기

• filterKorean는 한글만 남기는 함수이다.

function filterKorean(text: string): string {
  return text.replace(/([^\u3130-\u318F\uAC00-\uD7AF]+)/g, '');
};

See the Pen filterKorean by KumJungMin (@kumjungmin) on CodePen.

 

(2) 영어만 남기기

• filterEnglish는 영어만 남기는 함수이다.

function filterEnglish(text: string): string {
  return text.replace(/[^a-zA-Z]/g, '');
};

See the Pen filterEnglish by KumJungMin (@kumjungmin) on CodePen.

 

(3) 숫자만 남기기

• filterNumber는 숫자만 남기는 함수이다.

function filterNumber(text: string): string {
  return text.replace(/[^0-9]/g, '');
};

See the Pen filterNumber by KumJungMin (@kumjungmin) on CodePen.

 

(4) 글자(한글 + 영어)만 남기기

• filterText는 숫자, 특수문자를 제외한 “한글, 영어”만 남기는 함수이다.

function filterText(text: string): string {
  return text.replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a- zA-Z]/g, '');
};

See the Pen filterText by KumJungMin (@kumjungmin) on CodePen.

 

(5) 숫자 + 영어만 남기기

• filterNumAndEnglish는 한글, 특수문자를 제외한 “숫자, 영어”만 남기는 함수이다.

function filterNumAndEnglish(text) {
  return text.replace(/[^0-9a-zA-Z]/g, '');
}

See the Pen filterNumAndEnglish by KumJungMin (@kumjungmin) on CodePen.

2) 포매팅 함수

특정 형식으로 변환해주는 함수를 알아보자

(1) 전화번호 형식으로 변경하기

• formatPhoneNumber은 전화번호 형식으로 변환해주는 함수이다.
• 만약 02로 시작하면 02-0000-000 형식으로, 그렇지 않은 경우 000-0000-0000형식으로 변환한다.

function formatPhoneNumber(text: string): string {
 const isSeoulNZ = number.slice(0, 2) === '02';
 const nationZoneRgex = isSeoulNZ ? '(\\d{1,2})' : '(\\d{1,3})';
 const phonePattern = new RegExp(`^${nationZoneRgex}(\\d{0,4})(\\d{0,4}).*$`);

  return text
    .replace(/[^0-9]/g, '')
    .replace(phonePattern, '$1-$2-$3')
    .replace(/^-/, '')
    .replace(/-$/, '')
    .replace(/-$/, '');
};

See the Pen formatPhoneNumber by KumJungMin (@kumjungmin) on CodePen.

 

(2) 사업자등록번호 형식으로 변경하기

• 사업자등록번호는 총 10자리로 3자리 2자리 5자리 규칙(000-00-00000)을 가진다.
• formatBusinessNo은 string 타입의 숫자가 주어졌을 때, 사업자등록번호 형식으로 변환해주는 함수이다.

function formatBusinessNo(text: string): string {
  return text
    .replace(/[^0-9]/g, '')
    .replace(/^(\d{1,3})(\d{0,2})(\d{0,5}).*$/, '$1-$2-$3')
    .replace(/^-/, '')
    .replace(/-$/, '')
    .replace(/-$/, '');
};

See the Pen formatBusinessNo by KumJungMin (@kumjungmin) on CodePen.

3) 유효성 함수

주어진 문자가 타입에 부합하는지 판별하는 함수를 알아보자

(1) 한글만 있는지 판별하기

• isKorean은 주어진 문자에 한글만 있는지 판별하는 함수이다.

function isKorean(text: string): boolean {
  return /^([\u3130-\u318F\uAC00-\uD7AF]+)$/.test(text);
};

See the Pen isKorean by KumJungMin (@kumjungmin) on CodePen.

 

(2) 영어만 있는지 판별하기

• isEnglish은 주어진 문자에 영어만 있는지 판별하는 함수이다.

function isEnglish(text: string): boolean {
  return /^[a-zA-Z]*$/.test(text);
};

See the Pen isEnglish by KumJungMin (@kumjungmin) on CodePen.

 

(3) 숫자만 있는지 판별하기

• isNumber은 주어진 문자에 숫자만 있는지 판별하는 함수이다.

function isNumber(text: string): boolean {
  return /^[0-9]*$/.test(text);
};

See the Pen isNumber by KumJungMin (@kumjungmin) on CodePen.

 

(4) 이메일 형식인지 판별하기

• isEmail은 주어진 문자가 이메일 형식인지 판별하는 함수이다.

function isEmail(text: string): boolean {
  return /^[a-z0-9._%+-]{1,}@[a-z0-9-]+(\.[a-z0-9-]+)*\.[a-z]{2,}$/.test(text);
};

See the Pen isEmail by KumJungMin (@kumjungmin) on CodePen.