하루를살자

JS Clone Project [Login] - 1 본문

JS

JS Clone Project [Login] - 1

Kai1996 2021. 12. 3. 01:46

- Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
    
    <title>Clone Momentum App</title>
</head>

<body>
    <div id ="login-form">
        <input type ="text" placeholder=" What is your name?"/>
        <button> Log In </button>
    </div>
    <script src = "app.js"></script>
</body>

</html>

 

- app.js

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

console.log(loginInput.outerHTML);
console.log(loginButton);


function onLoginBtnClick (){

    //input form 안에 쓴 글을 보려고 하는 데 무슨 프로퍼티로 보는지 모르겠으면 console.dir 로 찾아보고,
    console.dir(loginInput);

    //Value 라는 프로퍼티 가 쓴 값을 저장하고 있다는 걸 알았으니 console.log
    console.log(loginInput.value);
}

loginButton.addEventListener("click",onLoginBtnClick);

중요한것들

*요소 를 선택하는 방법

*console.dir 사용법 

*addEventListener 사용법

 

여기 까기지의 코드는, 유저가 input 에 값을 넣고, "Log in" 버튼을 눌렀을 때 사용자가 입력한 값을 프린트 하는데, 사용자가 유효한 입력 값을 넣었는지 확인해야 하는 "유효성" 검사를 해야 한다. 

 

- JS 로 간단한 유효성 검사 

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

console.log(loginInput.outerHTML);
console.log(loginButton);


function onLoginBtnClick (){

    //input form 안에 쓴 글을 보려고 하는 데 무슨 프로퍼티로 보는지 모르겠으면 console.dir 로 찾아보고,
    console.dir(loginInput);

    //Value 라는 프로퍼티 가 쓴 값을 저장하고 있다는 걸 알았으니 console.log
    console.log(loginInput.value);

    const username = loginInput.value; 
	//유효성 검사
    if (username === ""){
        alert("Please write your name.");
    }else if (username.length > 15) {
        alert ("Name is too long.");
    }

}

loginButton.addEventListener("click",onLoginBtnClick);

위의 코드는 input 이 빈칸일 경우와, 15 글자 이상 사용자가 입력을 했을때, Alert 해주는 유효성 검사를 해주고 있는데, 

Html 의 <form> 과 <input> 테그 를 쓰면 위의 기능을 간단하게 처리해 줄 수 있다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
    
    <title>Clone Momentum App</title>
</head>

<body>
    <form id ="login-form">

       
        <input required maxlength="15" type ="text" placeholder=" What is your name?"/>
        <button> Log In </button>
       
        
    </form>
    <script src = "app.js"></script>
</body>

</html>

*required = 빈칸이면 안됨 

*maxlength = 최대 입력 글자 수

  

하지만 form 안의 button 을 클릭하게 되면 자동으로 submit 이 되고, 이는 페이지가 세로 고침이 된다. 나는 이 세로 고침을 막으려고 아래와 같이 app.js 를 고쳤다.  

 

"onLoginSubmit" 이벤트 핸들러를 부를 시, doucment 는 자동으로 여기에 매개변수로 submitted 된 object 들을 전달해준다. data.prevetnDefault(); 의 기능은, 이벤트 들 의 기본적인 동작 을 막아준다. 여기서 는 "onLoginSubmit" 이벤트 핸들러가 끝 날 때 까지 막아주고, 그 안에 명시된 기능들은 실행한다. 

'JS' 카테고리의 다른 글

JS Clone Project [Login] - 3, Saving User Input  (0) 2021.12.04
JS Clone Project [Login] - 2, Getting User Input  (0) 2021.12.04
JS - Vanilla JS Clone Project [CSS in js]  (0) 2021.12.02
JS - Vanilla JS Clone Project [Event Handlers]  (0) 2021.12.02
JS - Vanilla JS Clone Project [JS with DOM]  (0) 2021.12.02
'JS' Related Articles more
Comments