유효성 검사(validation)란?
유효성 검사(validation)란 사용자가 입력한 데이터가 설정한 제약 조건 내에 있는 올바른 형식인지 확인하는 것이다.
즉 데이터가 서버 혹은 데이터베이스에 저장되기 전 해당 데이터를 검증하는 작업을 의미한다.
유효성 검사가 필요한 이유는 세 가지이다.
올바른 형식으로 작성된 올바른 데이터 필요
사용자의 데이터를 보호 (예: 비밀번호에서 대문자, 소문자, 특수문자 조합 등)
악의적인 사용자로부터 보호
유효성 검사는 클라이언트 브라우저 또는 서버에서 이를 검증하게 된다.
이 때 클라이언트 브라우저에서 수행되는 유효성 검사를 클라이언트 측 유효성 검사라 하며, 서버에서 수행되는 유효성 검사를 서버 측 유효성 검사라 한다.
클라이언트 측 유효성 검사
클라이언트 측 유효성 검사는 클라이언트 브라우저에서 수행되는 유효성 검사를 뜻한다.
클라이언트 측 유효성 검사는 크게 두 가지 유형으로 구분할 수 있다.
기본 제공 양식 유효성 검사(Built-in Form Validation)
자바스크립트 유효성 검사(JavaScript Validation)
클라이언트 측 유효성 검사는 사용자에게 더 나은 UI/UX를 제공할 수 있으며, 서버 부담을 덜어준다는 장점이 있다.
하지만 클라이언트 측 유효성 검사는 다음과 같은 문제 상황이 발생될 수 있기 때문에 절대로 클라이언트 측 유효성 검사를 100% 신뢰하면 안된다.
사용자가 브라우저에서 자바스크립트를 끌 경우
페이지의 자바스크립트 오류가 발생할 경우
악의적인 사용자가 사이트를 통하지 않고 데이터를 전달할 경우
보다 안전하게 사용자 데이터를 검사하기 위해 항상 서버 측 유효성 검사를 사용하며,
클라이언트 측 유효성 검사는 UX 향상을 위해 추가적으로 사용하는 것이 좋다.
기본 제공 양식 유효성 검사는 HTML을 사용하여 유효성 검사 기능을 사용하는 것이다.
자바스크립트에 의존하지 않고 사용자 데이터를 검증할 수 있으며,
HTML 요소의 유효성 검사 속성을 사용하여 수행하게 된다.
만일 유효성 검사에 의해 유효하지않은 데이터를 입력하였을 경우, 다음과 같은 오류 메시지가 생성된다.
그림 1) 오류 메시지
유효성 검사를 위해 사용되는 주요 HTML 검증 속성들(Validation Attributes)은 다음과 같다.
required : 양식을 제출하기 전에 양식 필드를 채워야 하는지 여부를 지정
: 양식을 제출하기 전에 양식 필드를 채워야 하는지 여부를 지정 minlength & maxlength : 텍스트 데이터(문자열)의 최소 및 최대 길이를 지정
: 텍스트 데이터(문자열)의 최소 및 최대 길이를 지정 min & max : 숫자 입력 유형의 최소값 및 최대값 지정
: 숫자 입력 유형의 최소값 및 최대값 지정 type : 데이터가 숫자, 이메일 주소 또는 기타 특정 유형 여부 지정
: 데이터가 숫자, 이메일 주소 또는 기타 특정 유형 여부 지정 pattern : 입력된 데이터가 따라야 하는 패턴을 정의하는 정규 표현식(regular expression) 지정
정규 표현식(regular expression)
텍스트 문자열의 문자 조합을 일치시키는 데 사용할 수 있는 패턴이다.
input 요소의 pattern 속성에서 사용되며, 다음과 같이 사용된다.
CSS 의사 클래스(CSS Pseudo Class)
CSS 의사 클래스란 선택하고자 하는 HTML 요소의 특별한 상태(state)를 명시할 때 사용한다.
유효성 검사에서 자주 사용되는 CSS 가상 클래스는 다음과 같다.
:required : required 속성을 가지는 input 요소를 모두 선택
:optional : required 속성을 가지지 않는 input 요소를 모두 선택
:valid : 유효한 값을 가지는 input 요소를 모두 선택
:invalid : 유효하지 않은 값을 가지는 input 요소를 모두 선택
예제)
HTML
닉네임을 입력해 주세요.(required) 제출
CSS
input:invalid { border: 2px dashed red; } input:invalid:required { background-color: red; } input:valid { border: 2px solid black; }
자바스크립트 유효성 검사(JavaScript Form Validation)
HTML5를 사용하여 유효성 검사가 가능하지만 자바스크립트를 사용하여 유효성 검사를 하는 것도 가능하다.
자바스크립트를 활용하여 유효성 검사를 하는 이유는 다음과 같다.
기본 오류 메시지 대신 다른 오류 메시지를 사용할 때
기본 제공 양식 유효성 검사를 지원하지 않는 일부 구 버전 브라우저에서 처리를 해야할 때
보다 정교한 유효성 검사가 필요할 때
자바스크립트 유효성 검사의 중요한 점은 요소의 type 속성값을 submit으로 하지않는다는 것이다.
서버 측 유효성 검사
서버 측 유효성 검사는 사용자에게 전달받은 데이터를 서버에서 적합한 데이터인지 판별하는 유효성 검사이다.
서버 측 유효성 검사를 사용하는 가장 큰 이유는 사용자가 클라이언트 측 유효성 검사를 우회/조작 할 수 있다는 점이다.
참고자료
MDN - Client-side form validation
stackoverflow - HTML vs. JavaScript form validation
Ian Oxley - HTML5 Form Validation
TCP SCHOOL - 의사 클래스
김정환블로그 - HTML5 폼 검증에 대해 정리해 보자
from http://mystudy.tistory.com/27 by ccl(A) rewrite - 2021-12-23 05:02:18