[자바스크립트] 정규표현식 및 이메일/비밀번호 유효성검사

 - 비밀번호는 `8`자 이상 `20`자 이하로 구성합니다.
 - 영문 대/소문자, 숫자, 그리고 특수문자가 최소 `1`개 이상 포함되어야 합니다.
 - 특수문자는 `!`, `@`, `~` 만 입력 가능합니다.

const pass = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*?[!@~]).{8,20}$/

// `P@ssw0rd20chars` => true
// `qwe123` =>false

전화번호 정규 표현식 유효성 검사

const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)

regex.test('010-1234-5678') // true;
regex.test('01-12-56') // false;

이메일 정규 표현식 유효성 검사

const email = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i
  - 영문 대소문자
  - 영문 대소문자 + 숫자
  - 영문 대소문자 + 특수 문자
  - 영문 대소문자 + 숫자 + 특수문자
  - `@` 이후 이메일 주소의 도메인 입력 조건
  - `.`(dot) 이전의 도메인은 4가지 조합으로만 입력이 가능합니다.
  - 영문 소문자
  - 영문 소문자 + 숫자
  - 영문 소문자 + 특수 문자
  - 영문 소문자 + 숫자 + 특수문자
  email.test(inputValue)
  // janeDoe2@example.com => true
  // 가나다@d23.com => false

 

 

비밀번호 정규 표현식 유효성 검사

 

- 비밀번호는 `8`자 이상 `20`자 이하로 구성합니다.
- 영문 대/소문자, 숫자, 그리고 특수문자가 최소 `1`개 이상 포함되어야 합니다.
- 특수문자는 `!`, `@`, `~` 만 입력 가능합니다.

const pass = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*?[!@~]).{8,20}$/

pass.test(inputValue)

 // `P@ssw0rd20chars` => true
 // `qwe123` => false

 

 

# 정규표현식 사용법 정리

1. 정규표현식 형식

/패턴/플래그

- 슬래시(/) "사이"에는 매칭시킬 "패턴"을 써준다.

- 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 써준다.

(플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이라고 보면 됩니다.)

 

 

2. 정규표현식 매칭 패턴(문자, 숫자, 기호 등)

: 아래 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있습니다.

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_)
\W	/w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

 

 

3. 정규표현식 검색 패턴

: 아래 패턴들을 이용하면, AND, OR, StartWith, EndWith 등의 다양한 조합을 만들 수 있습니다.

기호	의미
|	OR
[]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작(괄호 없음 주의!)
문자열$	특정 문자열로 끝남
()	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색(분류X)
\b	단어의 처음/끝
\B	단어의 처음/끝이 아님

 

 

4. 정규표현식 갯수(수량) 패턴

: 특정 패턴이 몇번 반복되는지도 필터링 가능합니다.

기호	의미
?	최대 한번(없음 || 한개)
*	없거나 있거나 (없음 || 있음): 여러개 포함
+	최소 한개(한개 || 여러개)
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

 

 

5. 정규표현식 플래그

: 플래그는 동시에 여러개 사용할 수도 있습니다. 예) gi, gm 등

플래그	의미
g	Global: 모든 문자 검색(안 쓰면 매칭되는 첫 문자만 검색)
i	Ignore Case: 대소문자 구분 안함
m	Multi line: 여러 행의 문자열에 대해 검색

* 이외에 Singleline, Unicode, Sticky 옵션도 있는데, 잘 쓰진 않는듯 합니다.

 

 

6. 정규표현식 주요 메서드

: 자바스크립트 코드 상에서는 아래 메서드를 통해 패턴을 검사하고, .매칭되는 문자열을 추출, 변환합니다.

메서드	의미
("문자열").match(/정규표현식/플래그)	"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
("문자열").replace(/정규표현식/, "대체문자열")	"정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
("문자열").split(정규표현식)	"문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환
(정규표현식).test("문자열")	"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
(정규표현식).exec("문자열")	match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

 

출처: https://curryyou.tistory.com/234