form 데이터 유효성 검증하기 - accidentlywoo/legacyVue GitHub Wiki

form 데이터 유효성 검증하기

  • 들어가기 전에 form 데이터는 올바르지 않을 수 있습니다. 예를 들어 email 정보를 입력하는 란에 '@'문자가 빠졌다면 어떻게 될까요? 사용자에게 에러 메시지를 잘 노출해야 할 겁니다. 그런데 이 부분을 클라이언트에서 처리해야 할까요? 아니면 백엔드에서 처리해야 할까요? 그것도 고민이 됩니다.

학습 목표

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

핵심 개념

  • form, input
  • form validation

학습하기

form 태그를 사용한 html

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

Email
Password
` 이 부분처리를 서버에서 한다면 사용자는 꽤 답답할 겁니다. 왜냐면, 서버에 갈 때까지 email 정보가 틀렸는지 알 수가 없기 때문입니다. 예를 들어 다른 값을 모두 다 넣고 확인을 눌려서 서버로 데이터를 보냈는데, email 정보가 틀렸다고 메시지가 뒤늦게 나온다면 사용자는 당황할 겁니다. 더구나 이미 입력한 정보가 다 지워졌다면... 우린 그런 경험을 모두 해봤을 겁니다. 좀 더 좋은 UX를 제공하기 위해서는 에러 메시지를 더 빨리 사용자에게 노출해주는 것이 좋습니다. form 검증방법은 아래와 같이 구현할 수가 있습니다. 여러분들이 아래 코드를 보기 전에 직접 구현해보길 바랍니다. ` <title> Join !</title>

Join my website!

Email
Password 
    <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>
` 위 코드에서는 addEventListener에서 click 이벤트를 사용했습니다. 다른 방법도 있습니다. 'submit'이벤트를 통해서 역시 동일하게 form체크와 데이터 전송을 할 수 있습니다. 아래 방법은 위 방법보다 좀더 의미적으로 와닿을 겁니다. `document.querySelector("#myform").addEventListener("submit", function(evt) { console.log(evt.target); });`

생각해보기

  1. form 데이터 관련해서 input 값이 변경되면 발생하는, change 이벤트 타입이 있습니다. 이를 이용한다면 더 빨리 form 값이 올바른지 검증할 수가 있습니다.이를 사용해서 form 검증을 하면 좀 더 세련된 방법으로 할 수 있을 겁니다. 생각뿐 아니라 이번엔 꼭 이를 구현해보세요! nameElememnt.addEventListener("change", function(evt) {...});
⚠️ **GitHub.com Fallback** ⚠️