3 - input value 받기

<div id="login-form">

<input type="text" placeholder="이름을 입력하세요" />

<button>logIn</button>

</div>

 

const loginForm = document.querySelector("#login-form");

const loginInput = loginForm.querySelector("input");

const loginButton = loginForm.querySelector("button")

이러면 document.querySelector("input") 하는거보다 더 정밀하게 해당 태그를 지칭할 수 있음

* 아니면 document.querySelector("#login-form input") 이런식으로도 가능

*/

 

 click 이벤트 설정해놓고 

function btnClick() {

const username = loginInput.value;

if (username ==="")

{alert('please write your name');}

else if(username.length > 15)

{alert('your name is too long');}

}

이런식으로 js에서 유효성 검사를 설정할 수 있지만, html input에서 기본적으로 제공하는게 있음

ex)required  maxlength='15' 하면 공백으로 제출 안되고 15글자 이상으로는 입력할수도 없음 *form으로 묶어야 구현됨

form으로 묶고 button이나 type=submit으로 설정해놓으면 굳이 click event를 설정 안해놔도 지정해놓은 곳으로 값이 전달됨