회원가입 폼 유효성검사 (정규식)
1. 이메일 주소 유효성 검사
이메일 주소를 입력 받는 폼에서 사용자가 유효한 이메일 주소를 입력했는지 검사하기 위해 정규식을 활용할 수 있습니다.
const emailRegex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;정규식에 대한 설명:
^[\w-]+(\.[\w-]+)*: 이메일 ID부분을 검사하는 패턴입니다. 첫 글자는 영문자나 숫자이거나 언더스코어일 수 있으며, 그 뒤에는 영문자, 숫자, 언더스코어, 또는 점이 여러 번 반복될 수 있습니다.@: 이메일 주소의 도메인 앞에 위치하는 '@' 문자입니다.([\w-]+\.)+: 이메일 주소의 도메인 검사를 위한 패턴입니다. 도메인은 영문자나 숫자, 언더스코어 또는 하이픈으로 시작해야 하며, 점으로 구분됩니다. 도메인은 최소한 한 번 이상 반복됩니다.[a-zA-Z]{2,7}$: 이메일 주소의 마지막 부분을 검사합니다. 알파벳 대소문자로 구성되어 있으며, 길이는 2~7 자리까지 허용됩니다.
2. 비밀번호 유효성 검사
비밀번호를 입력 받는 폼에서 사용자가 유효한 비밀번호를 입력했는지 검사하기 위해 정규식을 활용할 수 있습니다.
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;정규식에 대한 설명:
(?=.*[a-z]): 소문자를 최소한 한 번 포함해야 합니다.(?=.*[A-Z]): 대문자를 최소한 한 번 포함해야 합니다.(?=.*\d): 숫자를 최소한 한 번 포함해야 합니다.(?=.*[@$!%*?&]): 특수문자(@, $, !, %, *, ?, &)를 최소한 한 번 포함해야 합니다.[A-Za-z\d@$!%*?&]{8,}: 소문자, 대문자, 숫자 및 특수문자로 구성된 8자 이상의 비밀번호입니다.
3. 전화번호 유효성 검사
전화번호를 입력 받는 폼에서 사용자가 유효한 전화번호를 입력했는지 검사하기 위해 정규식을 활용할 수 있습니다.
const phoneNumberRegex = /^\d{3}-\d{3,4}-\d{4}$/;정규식에 대한 설명:
^\d{3}: 첫 세 자리 숫자입니다.-: 하이픈으로 구분합니다.\d{3,4}: 중간 세 자리 또는 네 자리 숫자입니다.-: 하이픈으로 구분합니다.\d{4}: 마지막 네 자리 숫자입니다.
4. 전체 내용을 정리하는 마무리
회원가입 폼에서 유효성을 검사하기 위해 정규식을 사용할 수 있습니다. 이메일 주소, 비밀번호, 전화번호 등 여러 항목을 검사하기 위해 대표적인 정규식 패턴을 소개했습니다. 위 정규식들을 활용하여 유효성 검사를 수행하면 사용자가 올바른 데이터를 입력하였는지 확인할 수 있습니다. 이를 통해 회원가입 폼의 데이터 일관성을 유지할 수 있으며, 보안 및 사용자 경험 향상에도 도움이 될 수 있습니다.
댓글