function LoginButtonClick(){
const username = loninInput.value;
if(username === ""){ //username이 공백이라면
alert("이름을 입력해 주세요.");
}else if(username.length > 15){ //username의 길이가 15를 넘는다면
alert("이름이 너무 길어요");
}
}
- html을 활용해서 username의 유효성 검사 -> input의 유효성을 검사하려면 input은 form안에 위치해야 함
- form안에서 enter를 누르고 input이 더이상 존재하지 않으면 submit
- form안에 있는 버튼을 눌렀을 때도 form은 자동으로 submit
- -> 더 이상 click에 신경쓸 필요x
- ->우리는 엔터와 버튼이 눌릴 때마다 페이지 전체가 submit되어 새로고침되는 것을 원하지 x
<body>
<form class="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<button>Log In</button>
</form>
<script src="app.js"></script>
</body>
function LoginButtonClick(){
const username = loninInput.value; //값이 잘 들어가 있나 확인할라고 함
console.log(username);
}
loninButton.addEventListener("click",LoginButtonClick);