12월 25일 복기

어제 하루 종일 validation check와 씨름했다

얻은 결과물은

const userId =document.querySelectorAll('.input-form')[0];

function handleUserIdInput(event) {  
  console.log(event);
  console.log(userId.querySelector('input') === event.target); // ??
  const value = event.target.value; /// target을 확인을 어떻게 하지?
  
  if (value.length >8) {
    userId.classList.add('invalid');
    userId.querySelector('.message').textContent ='아이디는 8글자 이하입니다.'
  }
}

userId.querySelector('input').onkeyup = handleUserIdInput;

URCLASS에서 원하는 조건

아이디 input box에 타이핑을 할 때, 아이디 값이 입력되었는지 아닌지 여부를 검사해야 한다.
여부에 따라 아이디 값이 누락된 경우, "아이디를 입력하세요" 라는 에러메시지를,
아이디 값이 8자 이하일 경우, "아이디는 8자 이상이어야 합니다" 라는 에러메시지를 오른쪽에 표시한다
아이디 값이 유효할 경우, "✔️" 아이콘을 오른쪽에 표시한다.

console.log로 확인했고

아이디를 입력하세요는 click이벤트에 해야할것같다.

아이디는 8자 이상이어야 합니다.랑

아이디 값이 유효할 경우. 8글자 이상일경우를 해줘서

function handleUserIdInput(event) {  
  console.log(event);
  console.log(userId.querySelector('input') === event.target); // ??
  const value = event.target.value; /// target을 확인을 어떻게 하지?
  const message = userId.querySelector('.message');
  
  if(value.length <8) {
    userId.classList.add('invalid');
    message.textContent ='아이디는 8자 이상이여야 합니다.'
  }
  if (moreThanLength(value,8)) {
    userId.classList.remove('invalid')
    userId.classList.add('valid')
    message.textContent = '✔'
  }
}

빨간줄이 있다가 앞으로 가면 빨간줄이 없어지고 체크가 뜨는 형태이다..

처음부터 흰색을 하면 좋은데..

그래서 처음걸 valid도 바꾸어줬다.

이걸 조금 많이 한다음에 버튼 이벤트 핸들러로 해줘야할것같다.

  버튼을 클릭했을 때, 작동해야하는 시나리오의 예시를 소개합니다.
  예를 들어, 아이디가 8자 이상인지 확인하려면,

  1. 아이디 input box를 변수로 지정한다 //
  const userId= document.querySelectorAll('.input-form')[0];


  1-1이벤트 핸들러까지 연결해준다.
  userId.querySelector('input').onkeyup = handleUserIdInput

  2. input box에 적힌 값을 얻어온다
  console.log(userId.querySelector('input') === event.target); 
  const value = event.target.value; 

  3. input 값을 함수를 이용해 검증한다
  
  4. 함수 리턴값 (true 또는 false)을 통해 유효성을 검증하여 로직을 분기한다.

  5. 유효하다면, 정상적으로 로그인했다고 alert 창을 띄운다
  //이거는 버튼 이벤트 핸들러같다.
  6. 유효하지 않다면
    6-1. 아이디 입력창 옆에 오류 메시지를 표시한다
    6-2. 아이디 입력창에 붉은색의 스타일을 적용한다

    ``