S1_U10_과제. 유효성 검사

Judevv·2023년 5월 11일

코드스테이츠 SEB FE BOOTCAMP

목록 보기

33/55

과제. 유효성 검사

학습 목표

DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.

querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.

oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.

이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.

이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.

유효성 검사에 필요한 기술 요소를 익힐 수 있다.

유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.

엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)

유효성 검사에서 활용할 수 있는 정규 표현식의 기초 사용법에 대해 익힐 수 있다. (advanced)

관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)

결과물

과정

과제 자체의 minimum 조건은 아래와 같다.

튜토리얼에서 안내한 대로 진행하세요.

추가적으로 비밀번호 입력 UI를 HTML을 이용해 만드세요.

비밀번호 일치 여부를 검사하는 함수를 자바스크립트로 작성하세요.

함수 isMatch는 문자열 두 개를 입력으로 받고, boolean 타입을 리턴합니다.

비밀번호 일치 여부에 따른 시각적 피드백을 제공하세요.

모든 테스트를 통과하세요.

모든 테스트를 통과한 후에는 CSS로 회원가입 페이지를 디자인해보세요.

유효성 검사는 입력된 값이 형식에 맞는지 검증하는 과정이다.

이번 과제에서는 아이디, 비밀번호, 이메일, 전화번호의 유효성 검사를 하고, 유효한 값을 받았을 때 true, 아닐 때 false를 출력하기 위해 DOM을 활용하여 요소를 연결시켜 화면에 출력했다.

아이디 유효성 검사

기존에는 '사용할 수 있는 아이디입니다' 와 아이디는 네 글자 이상이어야 합니다'만 있었는데, 아이디에 영문과 숫자만 사용할 수 있고, 아이디를 입력하지 않으면 false문이 뜨는 조건을 추가했다.

document.querySelector로 출력할 HTML 엘리먼트를 불러온다.

그리고 아이디의 유효성 검사 함수인 onlyNumberAndEnglish 함수로, 입력값이 영어 대소문자와 숫자로만 이루어져 있는지 먼저 확인한다.

그 후, isMoreThan4Length 함수를 사용하여 입력값이 4글자 이상인지 확인합니다.

elInputUsername.onkeyup = function () {
  if(onlyNumberAndEnglish(elInputUsername.value)) {
    // true 일때
    // 아이디 네글자인지 확인
    // 아이디 네글자인지도 확인되면 성공 메시지 보임
    // 아이디 네글자가 아니면 실패메시지 보임
    if (isMoreThan4Length(elInputUsername.value)) {
      // 성공 메시지 보임
      // 실패 메시지 가림
      // 아이디 조건 안내 메시지 가림
        elSuccessMessage.classList.remove('hide')
        elFailureMessage.classList.add('hide')
        elonlyEngNummessage.classList.add('hide')
        elnoUserNameMessage.classList.add('hide')
    } else {
      elSuccessMessage.classList.add('hide')
      elFailureMessage.classList.remove('hide')
      elonlyEngNummessage.classList.add('hide')
      elnoUserNameMessage.classList.add('hide')
    }
  } else if(elInputUsername.value === '') {
      elSuccessMessage.classList.add('hide')
      elFailureMessage.classList.add('hide')
      elonlyEngNummessage.classList.add('hide')
      elnoUserNameMessage.classList.remove('hide')
  } else {
    // false 일때
    // 아이디 조건 메시지 보임
    // 성공메시지 가림
    // 실패메시지 가림
    elSuccessMessage.classList.add('hide')
    // 실패메시지 보임
    elFailureMessage.classList.add('hide')
    // 아이디 조건 안내 메시지 보임
    elonlyEngNummessage.classList.remove('hide')
    elnoUserNameMessage.classList.add('hide')
  }
}

비밀번호 유효성 검사

기존에는 최소 8자 이상의 입력을 받는다는 메시지만 있었고, 영문 대소문자, 숫자, 특수문자를 포함해야 하는 조건과 input 값이 비어 있을 때 '비밀번호를 입력해주세요'를 출력하게 했다.

addEventListener로 keyup 했을 때, 먼저 입력한 비밀번호가 영문 대소문자~(이하생략)의 조건을 만족하는지 확인을 하고, 8글자 이상인지 확인하는 함수로 중첩 조건문을 돌려서 확인한다.

이메일과 전화번호의 유효성 검사 함수는 각각 isEmail과 isPhoneNumber 함수를 사용하여 이메일과 전화번호의 형식이 올바른지 확인합니다.

elPassword.addEventListener('keyup', function() {
  if (strongPassword(elPassword.value)) {
    if (isMoreThan8Length(elPassword.value)) {
      elstrongPassword.classList.add('hide')
      elPasswordLength.classList.add('hide')
      elnoPasswordMessage.classList.add('hide')
    } else {
      elPasswordLength.classList.remove('hide')
      elstrongPassword.classList.add('hide')
      elnoPasswordMessage.classList.add('hide')
    }
  } else if (elPassword.value === '') {
    elstrongPassword.classList.add('hide')
    elPasswordLength.classList.add('hide')
    elnoPasswordMessage.classList.remove('hide')
  } else {
    elstrongPassword.classList.remove('hide')
    elnoPasswordMessage.classList.add('hide')
  }
})

비밀번호가 일치하는지 아닌지는 입력받은 두 값이 같은지를 비교연산자로 비교하여 일치하면 true인 함수를 설정하였다.

이메일, 휴대전화번호 유효성 검사

이메일과 휴대전화번호의 검사는 원래 없었던 부분인데 추가했다.

두 개의 유효성 검사가 어떤 조건을 검사하는지만 다르고 형식은 비슷해서, 조건만 맞춰서 출력할 수 있도록 설정했다.

elemail.addEventListener ('keyup', function () {
  if (isEmailCorrect(elemail.value)) {
    elwrongEmailMessage.classList.add('hide')
  } else if (elemail.value === '') {
    elemailTypeMessage.classList.remove('hide')
    elwrongEmailMessage.classList.add('hide')
  } else {
    elwrongEmailMessage.classList.remove('hide')
    elemailTypeMessage.classList.add('hide')
  }
})