form 데이터 유효성 검증하기

2020-07-25

해당 Post는 form 데이터 유효성 검증에 대해서 정리한 파일입니다.

form 데이터는 올바르지 않을 수 있습니다.

예를 들어 email 정보를 입력하는 란에 ‘@’ 문자가 빠졌다면 어떻게 될까요?

사용자에게 에러 메시지를 잘 노출해야 할 겁니다.

그런데 이 부분을 클라이언트에서 처리해야 할까요? 아니면 백엔드에서 처리해야 할까요?

form 태그를 사용한 html

다음의 form 코드에서 email 정보가 올바른지 유효성검증을 하고 싶습니다.

<form action="/join" method="post">
    <div class="inputWrap">
        <div class="email">
            <span> Email </span> <input type="text" name="email"><br/>
        </div>
        <div class="password">
            <span> Password </span> <input type="password" name="password"><br/>
        </div>
    </div>
    <input class="sendbtn" type="submit">
</form>

이 부분처리를 서버에서 한다면 사용자는 꽤 답답할 겁니다.

왜냐하면, 서버에 갈 때까지 email 정보가 틀렸는지 알 수가 없기 때문입니다.

예를 들어 다른 값을 모두 다 넣고 확인을 눌러서 서버로 데이터를 보냈는데, email 정보가 틀렸다고 메시지가 뒤늦게 나온다면 사용자는 당황할 겁니다.

더구나 이미 입력한 정보가 다 지워졌다면…

좀 더 좋은 UX를 제공하기 위해서는 에러 메시지를 더 빨리 사용자에게 노출해주는 것이 좋습니다.

form 검증방법은 아래와 같이 구현할 수가 있습니다.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Join !</title>
        <link rel="stylesheet" href="/css/ui.css">
    </head>
    <body>
        <h1>Join my website!</h1>
        <div class="formWrap">
            <form action="/join" method="post" id="myform">
                <div class="inputWrap">
                    <div class="email">
                        <span> Email </span> <input type="text" name="email"><br/>
                    </div>
                    <div class="password">
                        <span> Password </span> <input type="password" name="password"><br/>
                    </div>
                </div>
                <input class="sendbtn" type="submit">
           </form>
        </div>

        <section class="result"></section>
        <script>
		var btn = document.querySelector(".sendbtn");
		var result = document.querySelector(".result");
		btn.addEventListener("click", function(evt) {
		    evt.preventDefault();
		    var emailValue = document.querySelector("[name='email']").value;
		    var bValid = (/^[\w+_]\w+@\w+\.\w+$/).test(emailValue);
		    if(!bValid)  { 
  		      result.innerHTML = "올바르지 않은 이메일입니다";
		    } else {
        		result.innerHTML = "이메일정보가 좋아요~";
        		document.querySelector("#myform").submit();
 		   }
		});
        </script>
    </body>
</html>

위 코드에서는 addEventListener에서 click 이벤트를 사용했습니다.

‘submit’이벤트를 통해서 역시 동일하게 form체크와 데이터 전송을할 수있습니다.

아래의 방식을 활용할 수도 있습니다.

document.querySelector("#myform").addEventListener("submit", function(evt) {
  console.log(evt.target);
});