커스텀 에러 메세지

유효하지 않은 값일 경우, 각 경우에 맞는 에러 메시지를 보여주어야 합니다.

유효성 조건과 에러 메시지는 아래를 참고해주세요.

(공통) 빈 값일 경우: 필수 정보입니다.

[ID] 유효하지 않은 값일 경우: “5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.”

[비밀번호] 유효하지 않은 값일 경우: “8~16자 영문 대 소문자, 숫자를 사용하세요.”

[비밀번호 확인] 유효하지 않은 값일 경우: “비밀번호가 일치하지 않습니다.”

구현방법

1.id, pw, pwcheck 각각의 메시지를 object로 추가한다.

const ID_ERROR_MSG = {
    required: '필수 정보입니다.',
    invalid: '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.',
}

2.if문으로 비어있을 경우와 규칙에 맞지 않는 경우 추가한 메시지의 object key로 설정한다.

let isValidId

    // 1. 비어있는 경우
    if (value.length === 0) {
        isValidId = 'required'
        // 2. 규칙에 맞지 않는 경우
    } else {
        isValidId = ID_REGEX.test(value) ? true : 'invalid'
    }

3.classList.add()를 사용하여 css로 'border-red-600'을 추가하고 innerText를 사용하여 메세지를 추가한다.

2. 4.classList.remove()를 사용하여 'border-red-600' css를 삭제하고 innerText를 빈 문자열로 바꾼다.

// 유효하지 않을 경우
    if (isValidId !== true) {
        $id.classList.add('border-red-600') // 빨간 테두리 추가
        $idMsg.innerText = ID_ERROR_MSG[isValidId] // 에러메세지 추가
    } else {
        $id.classList.remove('border-red-600')
        $idMsg.innerText = ''
    }

id 에러메세지 추가