웹 프로그래밍(풀스택)

[코스설계] Front-End 윤지수

http://www.boostcourse.org/web316/lecture/22960/

들어가기 전에

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

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

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

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

그것도 고민이 됩니다.

학습 목표

form 데이터의 값을 정규표현식으로 검증하는 방법을 알 수 있습니다.

핵심 개념

form, input
form validation

학습하기

form 데이터 유효성 검증하기: 영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다.

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);
});

생각해보기

form 데이터 관련해서 input 값이 변경되면 발생하는, change 이벤트 타입이 있습니다. 이를 이용하면 더 빨리 form 값이 올바른지 검증할 수가 있습니다. 이를 사용해서 form 검증을 하면 좀 더 세련된 방법으로 할 수 있을 겁니다. 생각뿐 아니라 이번엔 꼭 이를 구현해보세요!

nameElememnt.addEventListener("change", function(evt) {...});

웹 프로그래밍(풀스택)

2) form 데이터 유효성 검증하기

수식 입력도움말

웹 프로그래밍(풀스택)

comment

수식 입력도움말