서버랑 중복 체크 하기 전에 걸러내서 서버 부하를 줄임

정규표현식(Regex) 개요

웹 폼의 유효성 검사를 위해 정규표현식을 사용하여 입력값을 검증함.

검사 항목 정규표현식 설명
아이디 (reUid) /^[a-z]+[a-z0-9]{4,19}$/g - 영문 소문자로 시작해야 함 - 이후 영문 소문자 및 숫자 포함 가능 - 길이: 5~20자
비밀번호 (rePass) /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$~!@$!%*#^?&\(\)-_=+]).{5,16}$/` - 영문, 숫자, 특수문자를 각각 최소 1개 포함해야 함 - 길이: 5~16자
이름 (reName) /^[가-힣]{2,10}$/ - 한글만 입력 가능 - 길이: 2~10자
닉네임 (reNick) /^[a-zA-Zㄱ-힣0-9][a-zA-Zㄱ-힣0-9]*$/ - 영문, 한글, 숫자 허용 - 공백 입력 불가
이메일 (reEmail) /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i - 이메일 형식 검증
휴대폰 번호 (reHp) `/^01(?:0 1

사용된 상태 변수 목록

변수명 설명
isUidOk 아이디가 유효성 검사 + 중복 검사 통과 여부
isPassOk 비밀번호가 유효성 검사 통과 여부
isNameOk 이름이 유효성 검사 통과 여부
isNickOk 닉네임이 유효성 검사 통과 여부
isEmailOk 이메일이 유효성 검사 + 중복 검사 통과 여부
isHpOk 휴대폰 번호가 유효성 검사 통과 여부 
// 유효성 검사에 사용할 상태 변수
let isUidOk = false;   // 아이디 유효성 검사 및 중복 체크
let isPassOk = false;  // 비밀번호 유효성 검사
let isNameOk = false;  // 이름 유효성 검사
let isNickOk = false;  // 닉네임 유효성 검사
let isEmailOk = false; // 이메일 유효성 검사 및 중복 체크
let isHpOk = false;    // 휴대폰 번호 유효성 검사

폼 제출 전 유효성 검사 흐름

  1. 사용자가 회원가입 버튼 클릭 (onsubmit 이벤트 발생)
  2. isUidOk, isPassOk, isNameOk, isNickOk, isEmailOk, isHpOk 상태 변수 검사

비밀번호 유효성 검사

// 비밀번호 검사 결과를 표시할 요소
const passResult = document.getElementsByClassName('passResult')[0];

// 비밀번호 확인 필드(`pass2`)에서 포커스를 잃을 때 유효성 검사 실행
formRegister.pass2.addEventListener('focusout', function(){

    // 비밀번호 (`pass1`) & 비밀번호 확인 (`pass2`) 값 가져오기
    const value1 = formRegister.pass1.value;
    const value2 = formRegister.pass2.value;

    // 1️⃣ 비밀번호 유효성 검사
    if (!value1.match(rePass)) {
        passResult.innerText = '비밀번호는 숫자, 소문자, 대문자, 특수문자 조합 8자리';
        passResult.style.color = 'red';
        isPassOk = false;
        return;
    }

    // 2️⃣ 비밀번호 확인 검사
    if (value1 === value2) {
        passResult.innerText = '사용 가능한 비밀번호 입니다.';
        passResult.style.color = 'green';
        isPassOk = true;
    } else {
        passResult.innerText = '비밀번호가 일치하지 않습니다.';
        passResult.style.color = 'red';
        isPassOk = false;
    }
});