TIL 221117 회원가입 유효성 검사에 정규 표현식 쓰기

최근 진행하고 있는 프로젝트의 회원가입을 구현하면서 정규 표현식에 대해 찾아보게 되어서 다음에도 참고하면 좋을 것 같아 적는다.

 

정규 표현식(Regular Expression)이란?

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.

JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있다.

 

영어로 Regular Expression이라서 다들 변수명을 regex로 많이 하는 것 같다.

 

참고

 

 

정규 표현식 메소드 test()

test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다.

// syntax
regexObj.test(str)

 

 

함수로 분리하여 정규 표현식을 통해 유효성 검사하기

유효성 검사를 별도의 함수로 분리하고 Input value를 인자로 넘겨주었다.

// SignUp.tsx

...


{checkEmail(emailValue) ? (
    <p className='true desc'>사용가능한 이메일입니다.😀</p>
  ) : (
    <p className='desc'>🚨 올바른 이메일 형식이 아닙니다.</p>
  )}
          
...

 

그리고 정규 표현식을 사용해 유효성 검사를 했다. 길이에 대한 검사도 한 번에 해줄 수 있어서 코드가 더 깔끔한 것 같다.

export const checkEmail = (email: string) => {
  const emailFormat =
    /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  return email !== '' && email !== undefined && emailFormat.test(email);
};

 

 

쓰임에 따라 정규 표현식 사용하기

아이디

영문 + 숫자, 6자 이상 - 15자 이하

/^(?=.*[a-zA-z])(?=.*[0-9]).{6,12}$/;

• /와/ 사이에 정규 표현식 내용을 적으면 되고 ^는 시작 $는 끝을 의미한다.
• (?=.*[범위])에 범위를 넣으면 해당 범위의 글자가 1개 이상있어야 하는 것 같다.
• .{최소, 최대}로 길이를 제한할 수 있는 것 같다. 하지만 앞에 붙은 조건이 어떻게 되느냐에 따라 적용되는 길이가 조금 다른 것 같다.

---

이메일

이메일 형식 @와 .포함

 /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

찾아보니 이메일 정규식으로 이것도 많이 올라와 있는 것 같다.

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g

---

이름 & 닉네임

한글, 영문, 숫자, 특수문자, 공백 가능, 8자 이하

 /^[0-9a-zA-Z-ㄱ-힣\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\" ].{0,7}$/;

 

한글 범위

[ㄱ-힣]

영문 범위(소문자 + 대문자)

[a-zA-Z]

숫자 범위

[0-9]

영어 + 숫자 범위

[a-zA-Z0-9]

특수문자

[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]

• 보통 대괄호 안에 -를 사용해서 범위를 지정해주는 것 같고 여러 개를 붙여서도 범위를 만들 수 있는 것 같다.
• 특수문자는 이스케이프 문자로 적어줘야 하는 특수문자들이 있다.
• 여기서는 {0,7}로 해줘야 1자 이상 8자 이하가 되는데 왜 그러는지는 잘 모르겠다....
• 정규 표현식은 아래와 같이 다양하게 사용할 수 있다.

휴대폰 번호

/^\d{3}-\d{3,4}-\d{4}$/;

숫자 3자리마다 콤마 찍기

/\B(?=(\d{3})+(?!\d))/g

const price = 1000000;
const result = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

자동으로 전화번호에 하이픈 넣기

오로지 숫자가 있을 때만 작용하는 정규식이다. 숫자 외에 다른 문자는 모두 없애주어야 한다.

const phone = '01012345678';
phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);

---

비밀번호

영문 + 숫자 + @#*!^ 1개 이상 포함, 8자 이상 - 16자 이하

/^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[@#*!^])(?!(?=.*[\|{\}\[\]\/?.,;:|\)~`\-_+<>\$%&\\\=\(\'\"]).).{8,16}$/;

• (?=.*[범위])를 하면 해당 범위를 1개 이상 포함한다.
• (?!(?=.*[범위]).)를 하면 해당 범위는 포함하지 않도록 한다.
• [^범위] 괄호 안에 ^를 쓰면 범위가 아닌 문자라는데 잘 안돼서 포기했다.
• 이번 건. {8,16}을 했더니 8글자 이상 16글자 이하가 되었다. 어떤 원리로 길이가 설정되는 걸까..? 🤔

 

 

참고 1

참고 2

참고 3

참고 4 : regexr

RegExr: Learn, Build, & Test RegEx

---

정규 표현식을 쓸 일이 한두 번밖에 없어서 가져다 쓰기만 하다가 여러 개를 사용하는 김에 이해해보려고 노력해봤다. 원하는 데로 금방 사용 가능해서 정규 표현식에 대해 알 것 같았는데 비밀번호에서 특정 특수문자를 제외하는 법을 몰라서 한참을 헤맸다. 하나하나 설명된 글을 읽어도 어떻게 조합해서 제외해야 할지를 도저히 알 수가 없었다. 운 좋게 발견한 방법으로 해결했다. 😭

정규 표현식.... 아직 나에게는 너무 먼 그대........🥺⭐️