Form Validator 폼 유효성 검사

유효성 검증이란 사용자가 입력한 데이터가 올바른 형식인지 확인하는 것이다.

즉, 데이터가 서버 혹은 데이터 베이스에 저장되기 전 데이터를 검증하는 것이다.

Form validation을 사용하는 이유

1. 사용자가 적절한 형식의 데이터를 입력하였는지 확인하기 위해
2. 사용자의 정보를 보호하기 위해
3. 애플리케이션을 인증되지 않은 데이터로부터 보호하기 위해

클라이언트 측 유효성 검증 방식

기본 제공 유효성 검사

1. HTML5의 form 기능을 사용한다.

• required : 데이터가 꼭 필요한지 결정
• minlength & maxlength : 텍스트의 최소, 최대 길이 지정
• min & max : 숫자 입력 유형의 최소, 최대 지정
• type : 데이터의 종류 지정
• pattern : 정규 표현식을 지정

1. CSS 의사 클래스 (CSS Pseudo Class)

• required : required 속성을 가진 input 요소를 선택
• optional : required 속성을 가지지 않는 input 선택
• valid : 유효한 값을 가진 input 요소 선택
• invalid : 유효하지 않은 값을 가진 input 선택

자바스크립트 유효성 검사

1. JS를 활용하여 다양한 라이브러리를 사용할 수 있다.

• 기본 오류 메시지 대신 커스텀 가능한 메시지를 보여주고 싶을 때
• 일부 구 버전의 브라우저에서 사용해야 할 때
• 정교한 유효성 검사가 필요할 때