[Javascript] Form 유효성 검사

유효성 검사

• 사용자가 입력한 폼 정보의 형식이 올바른지, 값이 제대로 입력했는지를 전송하기 전 검토하는 과정
• 서버의 오버헤드 (서버에서 검토하는 등에서의 자원 낭비)를 줄이기 위함

대표적인 유효성 검사 방법

• required
• pattern
• min
• max

→ onSubmit 발생 시 사전 검사 필요

document.forms[0].onsubmit = () => {
	if (this.userId.value.length < 6){
		alert('6글자 이상 ID 입력')
		this.userId.focus()
		event.preventDefault()
	}
	else if((this.passwd.value.length <4) || isNaN(this.passwd.value)){
		alert('4글자 이상, 숫자로 된 비밀번호 입력하세요')
		this.passwd.focus()
		event.preventDefault()
	}
}

get, post

• form의 method속성에 따라 get, post로 입력값 전송
  • get은 주소창에 변수명-변수값의 쌍 형식으로 전달
    • 입력값이 들어나기 때문에 보안에 취약
    • 주로 정보 조회 용도로 사용
  • post는 전송되는 입력 값이 외부로 드러나지 않음
    • get에 비해 상대적으로 덜 취약
    • 삽입, 갱신, 삭제 용도
    • 그렇더라도 중요한 데이터라면 전송 데이터 암호화 고려가 필요
      • network탭에서 확인이 가능하기 때문