Vanilla JS로 로그인 form 만들기

ToyProject  · 

순수 자바스크립트를 이용해 로그인 form을 만들어보자.

과제 조건

autofocus

document.addEventListener('DOMContentLoaded', () => {
    if ($id) {
        $id.focus()
    }
})

유효성 검사와 에러 메세지

$id.addEventListener('focusout', () => checkValidation($id, $idMsg))

$pw.addEventListener('focusout', () => checkValidation($pw, $pwMsg))

$pwCheck.addEventListener('focusout', () =>
    checkValidation($pwCheck, $pwCheckMsg)
)

const ERROR_MSG = {
    required: '필수 정보입니다.',
    invalidId:
        '5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.',
    invalidPw: '8~16자 영문 대 소문자, 숫자를 사용하세요.',
    invalidPwCheck: '비밀번호가 일치하지 않습니다.',
}

const checkRegex = (target) => {
    const { value, id } = target
    if (value.length === 0) {
        return 'required'
    } else {
        switch (id) {
            case 'id':
                return ID_REGEX.test(value) ? true : 'invalidId'
            case 'pw':
                return PW_REGEX.test(value) ? true : 'invalidPw'
            case 'pw-check':
                return $pw.value === $pwCheck.value ? true : 'invalidPwCheck'
        }
    }
}

const checkValidation = (target, msgTarget) => {
    // 모든 필드의 값은 빠짐 없이 입력해야 합니다.
    // ID: 5~20자. 영문 소문자, 숫자. 특수기호(_),(-)만 사용 가능
    const isValid = checkRegex(target)

    // 3. 커스텀 에러 메세지
    // (1) 비어 있을 때 : input 태그에 border-red-600 class 추가
    // (2) 유효하지 않을 때
    if (isValid !== true) {
        target.classList.add('border-red-600')
        msgTarget.innerText = ERROR_MSG[isValid]
    } else {
        target.classList.remove('border-red-600')
        msgTarget.innerText = ''
    }

    return isValid
}

입력 확인 모달 창

<input
    id="submit"
    type="submit"
    value="가입하기"
/>

<dialog id="modal" class="rounded-lg shadow-xl text-left">
</dialog>

const $modal = document.getElementById('modal')
$submit.addEventListener('click', (e) => {
    e.preventDefault()
    if (
        checkValidation($id, $idMsg) === true &&
        checkValidation($pw, $pwMsg) === true &&
        checkValidation($pwCheck, $pwCheckMsg) === true
    ) {
        const $confirmId = document.getElementById('confirm-id')
        const $confrimPw = document.getElementById('confirm-pw')
        $confirmId.innerText = $id.value
        $confrimPw.innerText = $pw.value
        $modal.showModal()
    }
})

폰트 사이즈 조절

$increaseFontBtn.addEventListener('click', () => {
    onClickFontsizeControl('increase')
})

$decreaseFontBtn.addEventListener('click', () => {
    onClickFontsizeControl('decrease')
})

const onClickFontsizeControl = (flag) => {
    const curFontSize = parseFloat(window.getComputedStyle($html).fontSize)
    let nextFontSize = flag === 'increase' ? curFontSize + 1 : curFontSize - 1
    $html.style.fontSize = nextFontSize

    $increaseFontBtn.disabled = nextFontSize >= MAX_FONT_SIZE
    $decreaseFontBtn.disabled = nextFontSize <= MIN_FONT_SIZE
}

완성본

완성본 보러가기

끝!