유효성 검사 로직 구현

여기서 조금 어려웠던 부분은 유효성 검사에 if문으로 구현하려고 많은 시간을 썼던 것이였다.

결국 답은 정규식을 사용하는 것이였다.

ID 유효성 검사 정규표현식

정규 표현식은 ^로 열고 $로 닫는다.

그룹은 대괄호 []로 표현한다.

영문소문자는 a-z

숫자는 0-9

길이는 중괄호 {}를 사용하여 {5,20} 으로 표현한다.

// 정규표현식 (5-20자, 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능)
var ID_REGEX = new RegExp('^[a-z0-9_-]{5,20}$')

PW 유효성 검사 정규표현식

// 정규표현식 (8~16자. 영문 대/소문자, 숫자 사용 가능)
var PW_REGEX = new RegExp('^[a-zA-Z0-9]{8,16}$')

전체 코드

// 2. 유효성 검사 로직
// 대상 : ID, 비밀번호, 비밀번호 확인 input
// 시점 : focusout / 가입 버튼 클릭
// handler : 해당 input의 유효성 검사 / 모든 필드의 유효성 검사

// DOM 가져오기
const $pw = document.getElementById('pw')
const $pwCheck = document.getElementById('pw-check')

// 정규표현식 (5-20자, 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능)
var ID_REGEX = new RegExp('^[a-z0-9_-]{5,20}$')

// 정규표현식 (8~16자. 영문 대/소문자, 숫자 사용 가능)
var PW_REGEX = new RegExp('^[a-zA-Z0-9]{8,16}$')

// 유효성 검사 로직
// id 유효성 검사
const checkIdValidation = (value) => {
    const isValidId = ID_REGEX.test(value)
    console.log(isValidId)
}
$id.addEventListener('focusout', checkIdValidation($id.value))

// 비밀번호 유효성 검사
const checkPwValidation = (value) => {
    const isValidPw = PW_REGEX.test(value)
    console.log(isValidPw)
}
$pw.addEventListener('focusout', checkPwValidation($pw.value))

// 비밀번호 확인 유효성 검사
const checkPwCheckValidation = (value) => {
    // 비밀번호와 비밀번호확인이 같은지 확인
    const isValidPwCheck = $pw.value === value
    console.log(isValidPwCheck)
}
$pwCheck.addEventListener('focusout', checkPwCheckValidation($pwCheck.value))

// 제출시 모든 유효성 검사하기
const $submit = document.getElementById('submit')
$submit.addEventListener('click', (e) => {
    e.preventDefault() // 기본 기능 방지
    checkIdValidation($id.value)
    checkPwValidation($pw.value)
    checkPwCheckValidation($pwCheck.value)
})