[C/F TIL] 17일차 - DOM 유효성 검사

mu-eng·2023년 5월 3일

DOM TIL 유효성검사 코드스테이츠

TIL (in boost camp)

목록 보기

18/53

Code States
Front-end boost camp
Today
I
Learned

🍰 써니 웬즈데이 모닝! 5월 3일 수요일 수업 시작!

🍰 페어 프로그래밍 - 유효성 검사

코드 스테이츠에서 제공해 준 파일을 토대로 과제를 해결해 나갈 것이다. 튜토리얼 자료를 통해 기본적으로 들어갈 코드들은 이미 교육시켜줬음! 생각보다 어렵진 않았다.

// 동영상 강의에 나온 코드를 그대로 실습하세요
// TODO : DOM으로부터 필요한 엘리먼트를 불러오세요.

function isMoreThan4Length(value) {
  // TODO : 동영상 강의를 보고 이 함수를 완성하세요.
}

function isMatch (password1, password2) {
  // TODO : 동영상 강의를 보고 이 함수를 완성하세요.

▲ 기본적으로 이렇게 만들어놓은 html, css 문서에 힌트가 들어있는 빈 js파일이 제공된다.

🍰 수도 코드 작성

내가 구현해야 할 DOM 과제
-- 아이디가 4글자 미만이면 fail 메세지, 성공이면 success 메세지 출력
-- 비밀번호 & 비밀번호 확인의 값이 틀리면 missmatch 메세지 출력
아이디 부분
-- html 문서에서 내가 필요한 변수를 가져와 새로 정의해준다
-- ID 입력 부분 기능 작동에 필요한 function 작성
-- 버튼이 다 눌렸을 때 발행하는 행동, event 객체 onkeyup 사용하여 기능을 구현한다.
-- 이때, function을 활용하여 if문을 통해 fail과 success 구분
비밀번호 부분
-- html 문서에서 내가 필요한 변수를 가져와 새로 정의해준다.
-- 비밀번호 입력 부분 기능 작동에 필요한 function 작성
-- 비밀번호 확인 란이 채워졌을 때 발생하는 행동, event 객체 onkeyup 메소드를 사용해 기능 구현
-- 이때, 비밀번호와 비밀번호 확인 값이 같지 않을 경우 missmatch 메세지 반환

🍰 ID 입력창 유효성 검사

html 문서에서 내가 필요한 변수를 가져와 새로 정의해줌

const successMessage = document.querySelector('.success-message')
const failureMessage = document.querySelector('.failure-message')
const userId = document.querySelector('#username')

주어진 힌트를 따라 function 작성

function isMoreThan4Length(value) {
  return value.length >= 4;
}

이벤트 객체 onkeyup을 사용해 ID 입력창이 채워졌을 때 유효성 검사 기능 부여

userId.onkeyup = function() {
  if (isMoreThan4Length(userId.value)) {
    successMessage.classList.remove('hide')
    failureMessage.classList.add('hide')
  } else {
    successMessage.classList.add('hide')
    failureMessage.classList.remove('hide')
  }
}

▼ 세 글자 입력 시

▼ 네 글자 이상 입력 시

🍰 비밀번호 확인창 유효성 검사

html 문서에서 내가 필요한 변수를 가져와 새로 정의해준다.

const password = document.querySelector('#password')
const passwordCheck = document.querySelector('#password-retype')
const missMatchMessage = document.querySelector('.mismatch-message')

비밀번호 입력 부분 기능 작동에 필요한 function 작성

function isMatch (password1, password2) {
  return password1 === password2;
}

비밀번호 확인 란이 채워졌을 때 발생하는 행동, event 객체 onkeyup 메소드를 사용해 기능 구현
-- 이때, 비밀번호와 비밀번호 확인 값이 같지 않을 경우 missmatch 메세지 반환

passwordCheck.onkeyup = function() {
  if (isMatch(password.value, passwordCheck.value)) {
    missMatchMessage.classList.add('hide')
  } else {
    missMatchMessage.classList.remove('hide')
  }
}

▼ 두 개가 일치하지 않을 때

▼ 두 개가 일치할 때

🍰 최종 완성 코드

const successMessage = document.querySelector('.success-message')
const failureMessage = document.querySelector('.failure-message')
const userId = document.querySelector('#username')


function isMoreThan4Length(value) {
  return value.length >= 4;
}

userId.onkeyup = function() {
  if (isMoreThan4Length(userId.value)) {
    successMessage.classList.remove('hide')
    failureMessage.classList.add('hide')
  } else {
    successMessage.classList.add('hide')
    failureMessage.classList.remove('hide')
  }
}


const password = document.querySelector('#password')
const passwordCheck = document.querySelector('#password-retype')
const missMatchMessage = document.querySelector('.mismatch-message')

function isMatch (password1, password2) {
  return password1 === password2;
}

passwordCheck.onkeyup = function() {
  if (isMatch(password.value, passwordCheck.value)) {
    missMatchMessage.classList.add('hide')
  } else {
    missMatchMessage.classList.remove('hide')
  }
}

🍰 새롭게 안 사실?!

왜 인지 모르게 자꾸 하단 부분이 에러가 뜨는 거시다... INVALID URL 오류가 자꾸 뜨는데 ...
-- 제공 받은 자료를 그대로 사용했기에 페어분이랑 코드를 하나하나 비교해봄
-- 내가 멀 잘못 만졌나 해서 자료를 지우고 다시 깔아봄
-- 정답은 http:// 입력하니 해결됐음;; 이런 쉬운거슬...
value 값의 위치
-- 개발자 도구 콘솔창에서 fail 값은 반환하는데 자꾸 true 값이 반환되지 않음
-- 원인은 value의 위치였음, 표시된 곧에 입력받는 value 값을 넣게되면 전역 스코프 상에 위치해 하단 if 문에서 함수를 실행했을 때는, 함수 선언 당시의 입력값을 데려온다..! 고 chat GPT 님이 답변해줬다.
-- 하여, 함수를 정의할 때는 변수만, 변수의 값은 함수를 실행하는 스코프 내에서 넣어준다.
function 정의 위치
-- 지난 시간 실습할 때 자료인데, 강사 선생님은 함수를 하단에 정의하고 호출은 상단에 했다.
-- 에러없이 실행이 되는데 이게 왜 되는지..? 문제는 없는지..?
-- chat GPT 선생님에게 물어보니, javascript에선 문제가 없다고 한다. 순서와 상관없이 어느 곳이든 정의된 함수는 호출이 가능하다고 한다.
-- 근데 python 에서는 안됨