[JavaScript] Html 내장된 메소드로 유효성 검사

input 태그를 만들 때 입력이 안되어있을 때, 즉 빈칸일 때는 if문을 사용해서 체크했다.

 

if (username === '')

하지만 이렇게 하지 않아도 한 단어를 html에 적용하면 간단하게 유효성 체크가 가능하다.

 

 

바로 input 태그 안의 속성으로 required를 넣는 것이다.

 <input required type="text" placeholder="What is your name?" />

 

 

또한 글자수 길이에 제한을 둘 때 length를 이용해서 유효성 검사를 했지만,

if (username.length > 15)

 

 

이것 또한 html에서 maxlength를 사용하여 확인이 가능하다.

<input maxlength="15" type="text" placeholder="What is your name?" />

 

 

대신 input의 유효성 검사를 작동시키기 위해서는 input이 form안에 있어야 한다.

input안 button을 누르거나 type이 submit인 input을 클릭하면 form이 자동적으로 submit이 되고, 새로고침이 적용된다.

submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다.

 

 

이때 button이 아닌 form을 불러오고 event.preventDefault()를 통해 기본동작인 새로고침을 막아준다.

 

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  console.log(username);
}