본문으로 바로가기

 

 

유효성 검사(Validation)

사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것

* 검증이 필요한 이유?

1) 보안 공격, 잘못된 데이터, 사용자의 실수로 예상 가능한 오류 등을 방지할 수 있기 때문

2) 동일한 입력 양식과 형태를 유지할 수 있음

핸들러 함수

폼 페이지에서 이벤트가 발생했을 때의 유효성 검사를 위해 매핑하는 메소드

자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성

(자바스크립트는 서버에서 처리하는 것보다 속도가 빠르고 서버에 과부하를 주지 않음)

유효성 검사 처리 방법

① 기본 유효성 검사

- 폼 페이지에 입력된 데이터 값의 존재유무와 데이터 길이, 숫자 등 기본적인 것이 맞는 지 검사

- 데이터 길이에 대한 검사는 데이터의 제한 길이를 확인

- 숫자 여부는 isNaN() 함수를 활용하여 검사

② 데이터 형식 유효성 검사

- 폼 페이지의 입력 항목에 입력한 데이터 값이 특정형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법으로 기본 유효성 검사보다 복잡

- 정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어

- 정규 표현식에서 사용하는 기호를 메타 문자라고 한다.

메타 문자는 정규 표현식 내부에서 특정한 의미를 가진 문자

* 자주 사용되는 패턴

1) 숫자만 ^[0-9]*$

2) 영문자만 ^[a-zA-Z]*$

3) 한글만 ^[가-힣]*$

4) 영문자와 숫자만 ^[a-zA-Z0-9]*$


연습문제

01. 유효성 검사란 무엇인가?

사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 방법

02. 유효성 검사를 위한 두 가지 처리 기법을 간단히 설명하시오.

1) 기본 유효성 검사 : 입력한 데이터 값의 유무와 데이터 길이, 숫자 등 기본적인 것이 맞는 지 검사

2) 데이터 형식 유효성 검사 : 입력한 데이티 값의 특정 형태에 적합한지 정규표현식을 이용하여 검사

03. 유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법을 설명하시오.

(1) Onclick 속성을 이용하여 핸들러 함수 설정

(2) <Script> ···· </script> 내에 핸들러 함수 작성

(3) form 태그의 name 속성을 이용하여 핸들러 함수 호출