🕖 DAY +17 / 2022. 11. 11
SEB FE / Section1 / Unit11 / JS/Browser DOM
📌 Today I Learned
- 유효성 검사
🌪 들어가기 전
코드스에서 주어지는 레파토리지로 실습을 진행했다. 간단한 회원가입 페이지를 만드는 것이었고 DOM을 활용하여 HTML을 동작시켰다. JS를 HTML에 어떻게 연결시키는지 알 수 있었고 document를 활용하여 과제를 완성할 수 있었다. 코드들이 엮이고 꼬여 있어 집중이 필요했다.💬 JS에 HTML 불러오기
querySelector를 사용하여 변수에 할당해 준다.
let elInputUsername = document.querySelector('#username')
let elSuccesMessage = document.querySelector('.success-message')
let elFailureMessage = document.querySelector('.failure-message')💬 function 활용하기
isMoreThan4Length(value) {
return value.length >= 4
}
입력된 값의 길이가 4와 같거나 그보다 클 때elInputUsername.onkeyup = function () {
if(isMoreThan4Length(elInputUsername.value) {
elSuccesMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
}
else {
elSuccesMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}입력된 아이디의 길이가 최소값보다 작을 때 메시지를 띄운다.
무사와요... 열공햐요...