[Javascript] Form 검증

* form validation (폼 검증)
- form 데이터를 서버에 제출(submit) 하기 전에 클라이언트에서 1차적으로 값의 유효성을 체크해주는게 좋다.
- 이때 JavaScript 를 사용하여 검증합니다.

ex) 
- '필수 항목'들은 입력이 되었는지?
- 숫자만 입력하는 경우 숫자로만 입력되었는지?
- n글자 이상이 입력되었는지?
- checkbox 의 경우 n개 이상이 체크 되었는지?
- 특정포맷 (이메일, url 등..) 으로 입력되었는지?

* <form> 의 onsubmit 이벤트 처리 코드
: true 를 return 하면 정상적으로 submit 됨
: false 를 return 하면 submit 안됨 

★주의! <form> 안의 <button> 에 type을 특별히 명시 안하면 submit 버튼으로 작동한다!    

- focus() 함수 : 해당 form element 에 입력상태(focus) 지정 → onfocus 이벤트 발동 
- blur() 함수 : 해당 form element 에 입력상태 해제 → onblur 이벤트 발동
- submit() 함수 : 해당 form 을 submit 함

required attribute 사용 : 

* alert(), confirm(), prompt() 함수
https://www.w3schools.com/jsref/met_win_alert.asp
https://www.w3schools.com/jsref/met_win_confirm.asp
https://www.w3schools.com/jsref/met_win_prompt.asp

alert() 리턴값 없음
confirm()  true/false 리턴, submit 하기전에 물어보기 위해 사용 가능
prompt() 입력한 string 리턴

 

* form에 onsubmit 사용
onsubmit 에 JS 코드를 수행하고 return 받은 값이 true 이면 submit 

 

* 필수 항목

 

* 숫자 검증

 

* required

 

* submit()

일반 JS 코드에서도 특정 form을 submit 시킬 수 있다.

 

* 정규표현식(regular expression)

- url 패턴에 대한 정규표현식
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;

- email 패턴에 대한 정규표현식
var emailPat = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;

 

 

* 폼 검증 연습

회원가입 동의 약관
- 아래 체크박스를 다 클릭했을때만 제출이 되도록 하고 하나라도 체크 안되면 체크 안되었다는 팝업을 띄웁니다.