로그인 폼 + 유효성 검사
username을 적고 로그인하는 간단한 폼 만들기.
input태그의 required요소와 maxlength요소로 js를 사용하지 않고 유효성 검사하기 <div id="login-form">
<input type="text" placeholder="What is your name?">
<button>Log In</button>
</div>id값이 login-form인 div 안에 What is your name?이 적혀 있는 input과
Log In이라고 적혀있는 button을 만들었다.
그리고나서
1. 이 사용자가 이름을 적었는지,
2. 이름이 너무 길지 않은지
사용자가 입력하는 값의 유효성을 확인하는 코드를 js로 작성했다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick() {
console.dir(loginInput);
}
loginButton.addEventListener("click", onLoginBtnClick);button을 click했을 때 유효성을 확인해야하므로
#login-form button을 loginButton으로 선언하고
loginButton에 addEventListener를 붙여
클릭했을 때 onLoginBtnClick 함수가 실행되도록 했다.
유효성 확인은 사용자가 input에 적는 것으로 해야하기 때문에
#login-form input을 loginInput로 선언하고
console.dir(loginInput)을 통해
사용자가 입력하는 값이 value라는 이름으로 저장되는 것을 확인 했다.
function onLoginBtnClick() {
const username = loginInput.value;
if (username === "") {
alert("Please write your name");
} else if (username.length > 15) {
alert("Your name is too long.");
}
}그 후 함수를 수정하여 사용자가 입력하는 값을 username으로 선언하고
if 함수를 이용하여 username이 비어있는지(username === ""),
비어 있다면 "Please write your name" alert 창을 보여주고
.length 로 string의 글자 수를 세어 15글자를 넘는지(username.length > 15),
넘는다면 "Your name is too long." alert창을 보여주었다.
이렇게 코딩해도 틀린 것은 아니지만 브라우저 자체 기능을 활용할 수도 있다.
<input
required
maxlength="15"
type="text"
placeholder="What is your name?">input태그의 required 속성과 maxlength 속성을 이용하면
1. 이 사용자가 이름을 적었는지,
2. 이름이 너무 길지 않은지 (15글자 기준) html만으로도 확인할 수 있게 된다.
그런데 input에 위의 두 속성을 넣어도 브라우저는 작동하지 않는다.
이는 input태그를 div로 묶었기 때문인데 이를 form으로 바꿔주면 정상적으로 작동한다.
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?">
<button>Log In</button>
</form>input태그를 form으로 감싸주는 것만으로도
값을 입력하지 않으면 자동으로 입력란을 완성하라는 알림창이 뜨고
15글자 이상은 입력하지 못하게 되었다.
그리고 이제는 내용을 작성한 뒤 log in 버튼을 누르는 것 뿐만 아니라
엔터키를 누르는 것으로도 내용을 제출할 수 있게 되었고
button의 클릭이벤트 또한 필요없게 되었다.
니꼬쌤의 바닐라 JS로 크롬 앱 만들기 수강 중에
이건 꼭 기록해야해...! 해서 남기는 벨로그.
간단한 js로 유효성을 검사 코드를 작성하며
이제 나도 js 감을 잡는 건가 싶으면서 수강했는데
내가 아직 html도 제대로 활용하지 못하는 애송이라는 점을
다시 한번 알게 해준 너무 고마운 강의.
