JavaScript-5

유효성 검사

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function onLoginBtnClick(){
    const username = loginInput.value;
    if(username === ""){
        alert("please write your name");
    } else if(username.length > 15){ -- 이부분에서 검사를 해준다.
        alert("Your name is too long.")
    }
}

loginButton.addEventListener("click", onLoginBtnClick);

• 15자 이상 넘기고 로그인 버튼을 누르면 alert 창에 너무 길다고 나온다.

const loginForm = document.querySelector("#login-form");
const loginButton = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    greeting.innerText = "Hello " + username;
}
loginForm.addEventListener("submit", onLoginSubmit);

• 이런식으로 form 창에 내가 it works!를 입력하고 로그인 버튼을 누르면 hello + it works!가 출력된다.