[JSP] 유효성 검사

유효성 검사(validation)

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

사용자가 실수로 유효하지 않은 데이터 값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려줌.

예로는 폼페이지에서 아이디 중복, 로그인 아이디 비번 검사, IP 패킷 검사 등.

 

유효성 검사를 위한 핸들러 함수

핸들러 함수는 폼 페이지에서 이벤트가 발생했을 때(<submit>을 클릭한 경우)의 유혀성 검사를 위해 매핑하는 메소드로, 자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성함.

입력된 데이터가 유효성 검사를 통과하면 서버로 전송하고, 그렇지 않으면 서버 전송을 취소하고 사용자에게 오류 메세지를 보여주는 역할.

 

유효성 검사 처리 방법

사용자가 폼 페이지에 입력한 데이터 값이 서버로 전송되기 전에 웹 브라우저에서 검증하는 방법으로

유효성 검사	설명
기본 유효성 검사	폼 페이지에 입력된 데이터 값의 존재 유무를 검사
데이터 형식 유효성 검사	폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하며 정규 표현식을 사용함.

 

기본 유효성 검사

사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사. 폼 페이지의 입력 데이터 길이를 확인하여 데이터 유무를 검증하는 것은 기본 유효성 검사.

 

• 데이터 유무 확인하기

document.폼이름.입력양식이름.value==""

 

• 데이터 길이 확인하기

입력 데이터의 조건으로 아이디와 비밀번호는 4~12자 이내로 영어와 숫자를 혼합해서 입력할 것, 첫 문자는 숫자로 시작할 수 없음 등을 검사하는 것.

document.폼이름.입력양식이름.value.length

 

• 숫자 여부 확인하기

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

isNaN은 isNotaNumber의 약자이며, isNaN( )함수의 인자 값이 숫자이면 false를 반환하고 숫자가 아니면 true를 반환

isNaN(document.폼이름.입력양식이름.value)

---

** 조건에 맞지 않는 키 입력을 방지하는 방법

키 입력에 관한 이벤트가 발생할 수 있도록 폼 페이지의 입력 양식에 onkeypress 속성을 사용하여 핸들러 함수를 설정.

핸들러 함수를 통해 들어온 키 값을 구별하기 위해 event 객체의 keyCode속성을 사용하며, 이 속성은 아스키코드 값으로 키 값을 구별함.

구분	키 값 범위
숫자만 입력	event.keyCode ≥ 48 && event.keyCode ≤57
영어만 입력	(event.keyCode ≥ 65 && event.keyCode ≤90) || (event.keyCode ≥97 && event.keyCode ≤122)
특수문자만 입력	(event.keyCode ≥ 33 && event.keyCode ≤47) || (event.keyCode ≥ 58 && event.keyCode ≤64) || (event.keyCode ≥ 91 && event.keyCode ≤96) || (event.keyCode ≥123 && event.keyCode ≤126)
한글만 입력	event.keyCode ≥ 12592 || event.keyCode ≤ 12687

---

데이터 형식 유효성 검사

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

 

정규 표현식 사용하기

정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어. 즉, 문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한 수식.

주민등록번호, 전화번호, 이메일과 같이 데이터 형식의 패턴이 일정한 데이터를 검사하는데 이용하며, 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 사용하는 객체 초기화(object initializer)방법과 정규식이 자주 변경될 때 주로 사용하는 RegExp 객체를 이용하는 방법 두가지가 있다.

var 변수 이름 = /정규 표현식/[Flag];

var 변수 이름 = new RegExp('정규 표현식',['Flag']);

여기서 Flag는 정규 표현식의 끝인 / 다음에 오는 문자열로 생략할 수 있다.

 

Flag 종류

Flag	설명
i	Ignore Case : 문자열의 대문자와 소문자를 구별하지 않고 검출
g	Global: 문자열 내의 모든 패턴을 검출
m	Multi Line: 문자열에 줄 바꿈 행이 있는지 검출

 

정규 표현식의 메소드 종류

메소드	설명
text( )	매개변수 값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false를 반환
exec( )	매개 변수 값으로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환

 

기본 메타 문자의 종류

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

메타 문자	설명
^x	문자열이 x로 시작된다.
x$	문자열이 x로 종료된다.
.x	임의의 한 문자를 표현한다(문자열이 x로 끝남)
x+	x가 한 번 이상 반복된다.
x?	x가 존재하거나 존재하지 않는다.
x*	x가 0번 이상 반복된다.
x|y	x 또는 y를 찾는다(or 연산자를 의미)
(x)	() 안의 내용을 캡쳐하고 그룹화한다.
(x)(y)	그룹화할 때 자동으로 앞에서부터 그룹 번호를 부여해서 캡쳐한다. 그룹화된 결과 데이터는 배열 형식으로 들어간다.
(x)(?:y)	캡쳐하지 않은 그룹을 생성할 경우 ?:를 사용한다. 결과 값 뱌열에 캡쳐하지 않은 그룹은 들어가지 않는다.
x{n}	x를 n번 반복한 문자를 찾는다.
x{n,}	x를 n번 이상 반복한 문자를 찾는다.
x{n,m}	x를 n번 이상 m번 이하 반복한 문자를 찾는다.

 

문자 클래스의 종류

메타 문자 중 독특한 성질을 띤 문자 클래스인 [ ]가 있는데, 문자 클래스는 그 내부에 해당하는 문자열의 범위 중 한 문자만 선택한다듣 것을 의미하며, 문자 클래스 내부에서는 메타 문자를 사용할 수 없거나 의미가 다르게 사용됨.

문자 클래스	설명
[xy]	x 또는 y를 찾는다.
[^xy]	x,y를 제외하고 문자 하나를 찾는다(문자 클래스 내의 ^은 not을 의미)
[x-z]	x부터 z사이의 문자 중 하나를 찾는다.
\^	^(특수문자)을 식에 문자 자체로 포함한다.
\b	문자와 공백 사이의 문자를 찾는다.
\B	공백을 제외한 문자와 문자 사이의 문자를 찾는다.
\d	숫자를 찾는다.
\D	숫자가 아닌 값을 찾는다.
\s	공백 문자를 찾는다.
\S	공백이 아닌 문자를 찾는다.
\t	Tab 문자를 찾는다.
\v	Vertical Tab 문자를 찾는다.
\w	알파벳 + 숫자 + _을 찾는다.
\W	알파벳 + 숫자 + _을 제외한 모든 문자를 찾는다.