[js] form validation(폼 검증)

form validation

form 데이터를 서버에 제출하기 전에 클라이언트에서 1차적으로 값의 유효성을 체크해주는 게 좋다

이 때 javascript를 사용해서 검증한다

 

focus() 함수 : 해당 form element에 입력 상태(focus) 지정한다  -> onfocus() 이벤트 발생

blur() 함수:  해당 form element에 입력 상태 해제한다  -> onblur() 이벤트 발생

submit() 함수 : 해당 form을 submit 한다

 

alert() : 리턴값 없다

confirm() : true / false 리턴한다. submit 하기 전에 확인하기 위해 사용한다

prompt() : 입력한 string 리턴한다

 

 

<form>의 onsubmit 이벤트 처리 코드

true를 return 하면 정상적으로 submit 된다

false를 return 하면 submit 되지 않는다

 

1. onsubmit : form이 submit 되기 전에 호출되는 자바스크립트. 반드시 onsubmit에 return 해야 한다!

<script>
function chkSubmit() {
  let frm = document.forms['form2'];
  if(frm['firstname'].value.trim() == "") { 
    alert("First Name은 필수입니다");
	frm['firstname'].focus(); 
    return false;  
  } 
  return true; //true를 리턴하면 submit이 진행된다
}
 </script>
 
 <form name="form" action="https://www.w3schools.com/action_page.php" method="get" onsubmit="return chkSubmit")">

 

2. js에서도 submit를 할 수 있다

<script>
const chkSubmit5 = function() {
  let frm = document.forms['form5'];
  if(frm.firstname.value.trim() == "") {
    alert("First name은 필수입니다");
    frm.firstname.focus();
    return; 
  } 
  confirm('제출하시겠습니까')&& frm.submit(); 
}
</script>

<form name="form5" action="https://www.w3schools.com/action_page.php" method="get">
 ....
</form>

<button onclick="chkSubmit5()">제출</button>  <!-- form 바깥에 있다! 그러면 작동 안함 이걸 submit로 할 수 있을까 할 수 있음 -->

 

3. 정규표현식

<script>
var urlPat = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
var emailPat = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
const chkSubmit6 = function() {
  let frm = document.forms['form6'];
  let url = frm.url.value.trim(); 
  let email = frm.email.value.trim();

  document.getElementById('urlwarn').innerHTML = "";
  document.getElementById('emailwarn').innerHTML = ""; 

  if(!urlPat.test(url)){
    document.getElementById('urlwarn').innerHTML = "유효한 url 아닙니다";
    frm.url.focus();
    return false; //onsubmit은 t/f 리턴 꼭
  }
  if(!emailPat.test(email)){
    document.getElementById('emailwarn').innerHTML = "유효한 email 아닙니다";
    frm.email.focus();
    return false;
  }
  return true; //둘 다 검증 통과하면 true 리턴하기
 }
</script>

<form name="form6" action="https://www.w3schools.com/action_page.php" method="get" 
   onsubmit="return chkSubmit6()">
  url:
  <input type="text" name="url"><span id="urlwarn" class="important"></span>
  <br><br>
  email:
  <input type="text" name="email"><span id="emailwarn" class="important"></span>
  <br><br>
  birthdate:
  <input type="text" name="birthdate" placeholder="yyMMdd" pattern="[0-9]{6}" required>
  <br><br>
  <input type="submit" value="제출">
</form>