[CS] 정규 표현식을 활용한 데이터 유효성 체크: 회원 ID, 비밀번호, 이메일, 전화번호 확인하기

유효성 체크와 정규 표현식

 

📌 유효성 체크

유효성 체크는 사용자가 입력한 데이터가 특정 기준에 부합하는지 검사하는 과정을 의미한다. 이는 데이터의 정확성과 유효성을 보장하기 위해 중요하다.

 

 

 

유효성 체크를 위한 방법과 도구

유효성 체크를 위한 다양한 방법과 도구가 있다.

• 클라이언트 측 검증 : 사용자가 입력을 완료하기 전에 브라우저에서 실시간으로 검증하는 방법이다.
• 서버 측 검증 : 데이터를 서버로 전송한 후, 서버에서 검증하여 안정성을 보장하는 방법이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

Regular expressions - JavaScript | MDN

---

 

 

📌 정규 표현식

정규 표현식(정규식)은 문자열 내에서 특정 패턴을 찾아내거나 매칭하는 데 사용되는 도구이다. 이 표현식을 사용하면 복잡한 문자열 검색과 유효성 검사를 쉽게 수행할 수 있다.

 

 

 

자바스크립트에서 정규 표현식 활용

자바스크립트에서는 정규 표현식을 사용하여 입력 데이터의 유효성을 체크할 수 있다. 정규식은 /패턴/ 형식으로 정의되며, 다양한 메서드를 통해 문자열 검색 및 검사에 사용된다.

 

 

 

예시: 전화번호 유효성 체크

전화번호의 형식을 검증하는 정규식을 예시로 들 수 잇다. 아래는 일반적인 전화번호 형식을 검증하기 위한 정규식의 예이다.

const phonePattern = /^\d{3}-\d{3}-\d{4}$/;  
const isValidPhone = phonePattern.test("123-456-7890"); // true

이 예시에서, ^\\d{3}-\\d{3}-\\d{4}$ 정규식은 (3자리 숫자)-(3자리 숫자)-(4자리 숫자) 형식으로 구성된 전화번호를 검증한다.

 

 

대표적인 정규 표현식

1. 회원 ID

회원 ID는 보통 영문자와 숫자로 구성되며, 5자에서 15자 사이의 길이를 갖는다.

const memberIdPattern = /^[a-zA-Z0-9]{5,15}$/;  
// 설명: 영문자와 숫자로만 이루어져 있으며, 길이는 5자 이상 15자 이하

2. 비밀번호

비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 포함한다.

const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;  
// 설명: 최소 8자, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함

3. 이메일

이메일 형식은 ‘@’ 기호와 도메인 부분이 포함되어야 한다.

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;  
// 설명: 일반적인 이메일 형식, '@' 기호와 도메인 포함

4. 전화번호

한국의 전화번호 형식은 보통 010-xxxx-xxxx 형태이다.

const phonePattern = /^(010)-\d{4}-\d{4}$/;  
// 설명: 010으로 시작하고, 4자리 숫자-4자리 숫자 형식

 

평상시에 회원ID, 비밀번호, 이메일, 등등(+@) 대표적인 정규표현식을 찾아서 기록해두자