자바스크립트 자주 쓰는 정규식 모음 (이메일, 핸드폰, 주민번호 등)

2023. 1. 12. 21:09· Language/javascript
목차
  1. 1. 이메일 유효성 검사
  2. 2. 핸드폰번호 유효성 검사
  3. 3. 생년월일 유효성 검사(8자리, 6자리)
  4. 4. 주민등록번호 유효성 검사
반응형

 

개발을 하다보면 input value값을 받을 때 프론트단에서 어느정도 걸러줘야할 필요가 있는데 그 때 유효성 검사에서 많이 사용하는 것이 정규표현식인 것 같다. 그냥 보기엔 어려워보이지만 어떤 표현인지를 알고 사용하면 내가 원하는대로 조합할 수 있는 것 같아 자주 쓰이는 정규식을 정리해보고자한다.

 

정규식을 사용하면 해당 조건에 따라 true, false를 반환하여 유효성 검사가 가능해진다. 정규식은 아래와 같이 조합하여 사용하면 되는데 예제를 통해 하나씩 살펴보려고 한다.

 

/
01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4})
/ i
시작 기호 조합하여 사용할 패턴 종료 기호 패턴변경자

 

1. 이메일 유효성 검사

const email = ""
const regEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

if(!regEmail.test(email)) {
    alert('이메일 형식에 따라 정확히 입력해주세요');
    return;
}

 

  • ^ / $ : 입력 시작과 종료
  • [0-9a-zA-Z] : 숫자, 영어소문자, 영어대문자로 시작
  • ([-_.]?[0-9a-zA-Z])*- [-_.]? : '-_.' 특수문자는 없거나 하나만 포함 가능
  • [0-9a-zA-Z]) : 숫자, 영어소문자, 영어대문자가 있거나 없거나, 여러개 가능
  • *@ :무조건 골뱅이 포함
  • .[a-zA-Z]{2,3} : . 다음에 영어소문자와 영어대문자가 2개 or 3개 가능
  • /i : 대소문자 구분 X

 

2. 핸드폰번호 유효성 검사

// '-' 없는 버전
const phone = ""
const regPhone = /^01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4})$/;

if(!regPhone.test(phone)) {
    alert('정확한 핸드폰번호를 입력해주세요: - 제외');
    return;
}
// '-'이 상관없는 버전
const phone = ""
const regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

if(!regPhone.test(phone)) {
    alert('정확한 핸드폰번호를 입력해주세요');
    return;
}

 

  • ^ / $ : 입력 시작과 종료
  • -? : - 은 있어도 되고 없어도 됨
  • 01([0|1|6|7|8|9]) : 01 다음에 오는 숫자는 0, 1, 6, 7, 8, 9 중 하나여야 함
  • ([0-9]{3,4}) : 그 다음에 들어갈 수 있는 숫자는 0부터 9사이 숫자들이며 3자리 or 4자리 가능
  • ([0-9]{4}) : 다음 숫자는 0부터 9 사이의 숫자들이 들어갈 수 있고 4자리여야 함

 

3. 생년월일 유효성 검사(8자리, 6자리)

// 6자리 생년월일
const birth = ""
const regBirth = /^([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))$/;

if(!regBirth.test(birth)) {
    alert('정확한 생년월일 6자리를 입력해주세요');
    return;
}
// 8자리 생년월일
const birth = ""
const regBirth = /^(19[0-9][0-9]|20\d{2})(0[0-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/;

if(!regBirth.test(birth)) {
    alert('정확한 생년월일 8자리를 입력해주세요');
    return;
}

 

[8자리 기준 풀이]

  • ^ / $ : 입력 시작과 종료
  • (19[0-9][0-9]|20\d{2}) : (년도) 앞자리가 19라면 다음에 오는 숫자 두자리는 0~9 중 하나여야 함 or 앞자리가 20이라면 뒤의 두자리는  어떤 정수 값이 와도 상관 없음
  • (0[0-9]|1[0-2]) : (월) 앞자리가 0이면 뒤는 0~9까지 or 앞자리가 1이면 뒤는 1~2까지의 숫자가 와야함
  • (0[1-9]|[1-2][0-9]|3[0-1]) : (일) 앞자리가 0이면 뒤는 0~9까지 or 앞자리가 1~2 사이 숫자이면 뒤는 0~9까지 or 앞자리가 3이면 0~1까지의 숫자가 들어가야함

 

4. 주민등록번호 유효성 검사

// 8자리 생년월일
const birth = ""
const regUnique = /^d{2}([0]\d|[1][0-2])([0][1-9]|[1-2]\d|[3][0-1])[-]*[1-4]\d{6}$/;

if(!regUnique.test(birth)) {
    alert('주민등록번호를 확인해주세요');
    return;
}

 

  • d{2} : 앞  2자리는 어떤 정수값이 와도 상관없음
  • ([0]\d|[1][0-2]) : 첫자리가 0인경우는 뒤에 어떤 정수도 상관없음 or 첫자리가 1인경우 뒷자리는 0, 1, 2만 가능
  • ([0][1-9]|[1-2]\d|[3][0-1]) : 생일은 첫자리가 0이면 1~9까지, 첫자리가 1~2이면 어떤 정수도 상관 없음, 첫자리가 3일 경우엔 0과 1만 가능
  • [-]* : 하이픈은 0개 or 1개
  • [1-4] : 주민번호 뒷자리 첫번째 숫자는 1~4만 가능
  • \d{6} : 주민번호 첫자리를 제외한 숫자는 총 6자리
반응형
저작자표시 비영리 동일조건 (새창열림)
  1. 1. 이메일 유효성 검사
  2. 2. 핸드폰번호 유효성 검사
  3. 3. 생년월일 유효성 검사(8자리, 6자리)
  4. 4. 주민등록번호 유효성 검사
'Language/javascript' 카테고리의 다른 글
  • 자바스크립트 Strict mode 왜 쓰는걸까? + 제약조건
  • 자바스크립트 함수가 일급객체인 이유, 클로저란?
  • 생성자 함수에 의한 객체 생성, 일반함수와 생성자 함수
  • 자바스크립트의 실행 컨텍스트, 렉시컬 환경, 스코프
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
자바스크립트 자주 쓰는 정규식 모음 (이메일, 핸드폰, 주민번호 등)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.