[HTML] form validation (유효성 검증)

 

form validation

폼에 작성된 데이터가 서버로 전송되기 전 전송할 데이터들이 올바른 포맷으로 잘 입력되었는지 확인하는 과정이다. (=유효성 검증)

 

validation 위치

클라이언트 사이드가 좋을까 서버 사이드가 좋을까, 둘 다 장단점이 있으며 속도처리 면에서는 클라이언트가 빠르다. 태그 자체에 검사가 내장되어있어 submit 버튼을 누르기도 전에 에러 메세지로 알릴 수 있기 때문이다.

하지만 서버만 가능한 검사 (데이터 비교 등등)도 있으므로 우위를 구분할 수 없다. 보안 측면에서는 둘 다 해야한다는 의견도 있다. (자바스크립트를 알면 쉽게 우회가 가능)

 

태그에 붙일 수 있는 validation 속성

required	필수 입력 필드 지정	모든 input 타입
minlength/maxlength	최소/최대 문자 길이 지정	text, password, search, url, tel, email
min/max	최소/최대 숫자 값 지정	number, range, date
pattern	정규식 패턴 매칭	text, password, search, url, tel
type	입력 타입 검증 (이메일, URL 등)	email, url, tel, number

 

 

정규표현식 패턴 참고 사이트

https://regexr.com/

RegExr: Learn, Build, & Test RegEx