📌 user name 유효성 검사

개발자가 user name에 조건을 걸어서 user가 유효한 user name만 입력할 수 있도록 컨트롤 할 수 있다.

user가 만약 다음과 같은 경우처럼 user name을 만들 경우, 개발자는 'alert(알림)'을 띄워서 user에게 적절한 user name을 입력하라고 알려줄 수 있다.

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

function onLoginBtnClick() {
    const username = loginInput.value;
    if (username === "") { //user가 user name을 공백으로 입력할 경우
        alert("Please write your name"); //알림
    } else if (username.length > 15) { //15자를 초과해서 user name을 입력할 경우
        alert("Your name is too long"); //알림
    }
}

loginButton.addEventListener("click", onLoginBtnClick);

• user name 값이 비어있는 경우
  

• user name이 너무 긴 경우 (예를 들어 15자를 초과할 경우)
  

이처럼 user가 입력하는 값의 유효성을 항상 확인하는 건 좋은 습관이다.

---

📌form과 user name 유효성 검사

JavaScript에 username의 condition을 일일히 입력해 줄 필요없이, HTML 자체의 도움을 받아서 user name의 유효성 검사를 할 수 있다. 이를 위해서는 input이 form 안에 있어야 한다.

✔️Before

<div id="login-form">
	<input type="text" placeholder="What is your name?" />
	<button>Log In</button>
</div>

if (username === "") { //user가 user name을 공백으로 입력할 경우
        alert("Please write your name"); //알림
    } else if (username.length > 15) { //15자를 초과해서 user name을 입력할 경우
        alert("Your name is too long"); //알림
	}

✔️After

<form id="login-form">
	<input required maxlength="15" type="text" placeholder="What is your name?" />
	<input type="submit" value="Log In">
</form>

required를 통해서 user에게 user name은 필수로 입력해야 함을 알려줄 수 있고, maxlength로 글자 수를 제한할 수 있다.

마무리

input을 form 안에 넣어서 HTML로 user name의 유효성 검사를 할 수 있었다. input을 form 안에 넣는 경우에는, 우리가 Log In 버튼을 누를 때마다 form은 자동적으로 submit된다. 즉, 페이지가 새로고침 된다.

버튼을 누를 때마다 웹사이트 전체가 매번 새로고침되는 건 우리가 원하는 것이 아니다 ❌. 다음 글에서는 이 문제점과 어떻게 해결할 수 있는지에 대해 알아볼 것이다.