[실습] 회원 가입 유효성 검사

📝 [Section1_Unit10] DOM

---

📌 hide

html에서 hide 속성을 준 요소를 JavaScript에서 조작해 숨겼다가, 나타낼 수 있다.

<!-- html -->
<div class="onlyEng-message hide">영문과 숫자만 사용 가능합니다</div>

// javaScript
elOnlyEngMessage.classList.add('hide'); // 'hide' 속성을 add -> 보이지 않게 됨
elOnlyEngMessage.classList.remove('hide'); // 'hide' 속성을 remove -> 보이게 됨

📌 회원가입 버튼을 조건에 따라 활성화 / 비활성화

<!-- html -->
<input type="text" id="username" placeholder="아이디" />
<button disabled id="btn-signup">회원가입</button>

// javaScript
let nameInput = document.querySelector('#username');
let btnSignup = document.querySelector('#btn-signup');

nameInput.addEventListener('keyup', activeEvent);

switch(nameInput.value.length === 0){ // nameInput에 입력된 글자가 없다면
    case true : btnSignup.disabled = true; break; // 회원가입 버튼 disabled 활성화
    case false : btnSignup.disabled = false; break // 있다면 disabled 비활성화
  }

---

드디어 JavaScript로 html을 조작할 수 있게 됐다...! 아직 헷갈리고 어렵다 ㅜ.ㅜ 실습을 많이 해봐야 익숙하게 쓸 수 있을 것 같다😅

🐾 참고 : https://velog.io/@ahn-sujin/idpw-입력-시-로그인-버튼-활성화-하기