회원가입 폼 (Vanilla JS) - 1

아래에 있는 요구사항에 맞게 회원가입 폼을 만들어보았다.
(index.js 파일만 수정해서 구현해보는 방식이다.)

✅ 요구사항

1. autofocus
페이지가 로드 된 시점에 ID 입력 창에 Focus가 되어 있어야 합니다.

2. 유효성 검사 로직
ID, 비밀번호, 비밀번호 확인 필드에 대한 유효성 검사를 수행해야 합니다.

💡 유효성 검사 시점

• input focus out 시 해당 input의 유효성을 검사합니다.
• 가입하기 버튼을 눌렀을 때 모든 필드의 유효성을 검사합니다.

💡 유효성 검사 패턴

• 모든 필드의 값은 빠짐 없이 입력해야 합니다.
• ID, 비밀번호, 비밀번호 확인 필드는 유효성 조건을 충족해야 합니다.
• ID: 5~20자, 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능
• 비밀번호: 8~16자, 영문 대/소문자, 숫자 사용 가능
• 비밀번호 확인: 비밀번호와 일치

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

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

• (공통) 빈 값일 경우: 필수 정보입니다.
• [ID] 유효하지 않은 값일 경우: “5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.”
• [비밀번호] 유효하지 않은 값일 경우: “8~16자 영문 대 소문자, 숫자를 사용하세요.”
• [비밀번호 확인] 유효하지 않은 값일 경우: “비밀번호가 일치하지 않습니다.”

4. 입력 확인 모달 창

제출하기 버튼 클릭 시, 모든 input의 값이 유효한 상태일 경우 입력한 아이디와 비밀번호를 확인할 수 있는 모달 창을 보여주어야 합니다.

• "취소하기" 버튼 클릭 시 모달 창이 닫혀야 합니다.
• "가입하기" 버튼 클릭 시 윈도우의 alert 창을 이용해 "가입되었습니다 🥳 " 라는 메시지를 출력해야 합니다.

5. 폰트 사이즈 조절 버튼
회원가입 폼에 사용된 기본 폰트 사이즈는 16px입니다.

기본 폰트 사이즈를 기준으로 1px씩 폰트 사이즈를 조절할 수 있는 기능을 구현해주세요.

(최소: 12px, 최대: 20px)

• 현재 폰트 사이즈가 20px일 경우 + 버튼 비활성화
• 현재 폰트 사이즈가 12px일 경우 - 버튼 비활성화

---

오늘 내가 해본 부분은 요구사항 1, 2, 3 이다.

1. autofocus ✅

• 페이지가 로드 된 시점에 ID 입력 창에 Focus가 되어 있어야 합니다.
• 대상: ID 입력 input
• 이벤트: 페이지(window)가 로드 되었을 때
• 핸들러: Focus()

const $id = document.getElementById('id')
const $idMsg = document.getElementById('id-msg')
window.addEventListener('load', () => $id.focus())

2. 유효성 검사 로직 ✅

• 대상: ID, 비밀번호, 비밀번호 확인 input
• 이벤트: (1) input focus out (2) 가입하기 버튼을 눌렀을 때
• 핸들러: (1) 해당 input의 유효성 검사 (2) 모든 필드의 유효성 검사

const $pw = document.getElementById('pw')
const $pwMsg = document.getElementById('pw-msg')

const $pwCheck = document.getElementById('pw-check')
const $pwCheckMsg = document.getElementById('pw-check-msg')

const ID_REGEX = new RegExp('^[a-z0-9_-]{5,20}$')
const PW_REGEX = new RegExp('^[a-zA-Z0-9]{8,16}$')

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

const PW_ERROR_MSG = {
  required: '필수 정보입니다.',
  invalid: '8~16자 영문 대 소문자, 숫자를 사용하세요.',
}

const PW_CHECK_ERROR_MSG = {
  required: '필수 정보입니다.',
  invalid: '비밀번호가 일치하지 않습니다.',
}

// 1. 필수 값 (값이 있는지)
// 2. 5~20자. 영문 소문자, 숫자. 특수기호(_),(-)만 사용 가능
const checkIdRegex = (value) => {
  if (value.length === 0) {
    return 'required'
  } else {
    return ID_REGEX.test(value) ? true : 'invalid'
  }
}

3. 커스텀 에러 메세지 ✅

• (1) 비어 있을 때 (2) 유효하지 않은 값일 때
• input 태그에 border-red-600 class 추가
• **-msg div에 에러 메시지 추가

const checkIdvaildation = (value) => {
  const isValidId = checkIdRegex(value)
  // 3. 커스텀 에러 메시지
  if (isValidId !== true) {
    // isvValidId -> invalid, required
    $id.classList.add('border-red-600')
    $idMsg.innerText = ID_ERROR_MSG[isValidId]
  } else {
    $id.classList.remove('border-red-600')
    $idMsg.innerText = ''
  }
  return isValidId
}

$id.addEventListener('focusout', () => checkIdvaildation($id.value))

const checkPwRegex = (value) => {
  if (value.length === 0) {
    return 'required'
  } else {
    return PW_REGEX.test(value) ? true : 'invalid'
  }
}

const checkPwvaildation = (value) => {
  // 8~16자. 영문 대/소문자, 숫자 사용 가능
  const isValidPw = checkPwRegex(value)
  if (isValidPw !== true) {
    // isvValidPw -> invalid, required
    $pw.classList.add('border-red-600')
    $pwMsg.innerText = PW_ERROR_MSG[isValidPw]
  } else {
    $pw.classList.remove('border-red-600')
    $pwMsg.innerText = ''
  }
  return isValidPw
}

$pw.addEventListener('focusout', () => checkPwvaildation($pw.value))

const checkPwCheckRegex = (value) => {
  if (value.length === 0) {
    return 'required'
  } else {
    return $pw.value === value ? true : 'invalid'
  }
}

const checkPwCheckvaildation = (value) => {
  // 비밀번호와 일치
  const isValidPwCheck = checkPwCheckRegex(value)
  if (isValidPwCheck !== true) {
    // isvValidPwCheck -> invalid, required
    $pwCheck.classList.add('border-red-600')
    $pwCheckMsg.innerText = PW_CHECK_ERROR_MSG[isValidPwCheck]
  } else {
    $pwCheck.classList.remove('border-red-600')
    $pwCheckMsg.innerText = ''
  }
  return isValidPwCheck
}
$pwCheck.addEventListener('focusout', () =>
  checkPwCheckvaildation($pwCheck.value)
)

---

정규표현식을 쉽게 확인해주는 사이트를 찾았다. 유효성 검사할 때 잘 사용했다.
👉 https://regexr.com/

오늘은 Vanilla JS를 이용해서 요구사항 5가지 중 3가지를 해결해보았다!
이제 남은 2가지도 해결해보고 리팩토링까지 해봐야겠다 😇

점점 흥미를 붙이고 있는 내 자신이 대견하다🌈