유효성 검사
: 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 규칙에 맞게 입력되었는지 검증하는 것.
- 유효하지 않은 데이터 값을 입력하면 부적합하다고 판단한다. >> client단
- 보안 공격, 잘못된 데이터, 사용자 실수로 예상 가능한 오류를 미리 방지한다.
- 숫자를 인식하는 검사, 회원 가입 시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사 등에서 사용된다.
유효성 검사를 위한 핸들러 함수
: 핸들러 함수는 폼페이지에서 이벤트가 발생했을 때, 유효성 검사를 위해 매핑하는 메소드
- 자바스크립트를 이용한다.
- 자바 스크립트를 사용하는 이유는 client단에서 유효성 검사를 처리하여 속도가 빠르고 서버 과부하가 적기 때문이다.
(사용 예시)
<form name="폼이름">
... (생략) ....
<input type="submit" onclick="핸들러함수()" >
</form>
<script type="text/javascript">
function 핸들러 함수(){
var str = document.폼이름.입력항목이름.value;
</script>1) 폼 태그를 생성 후, submit input 태그의 onclick 속성을 이용하여 핸들러 함수를 설정한다.
2) 스크립트 내에 핸들러 함수 작성 (어디에도 위치해도 상관없으나, </head> <body> 사이에 넣는 것이 좋다
3) form 태그의 name 속성(혹은 form 객체)을 이용하여 핸들러 함수를 호출
** onclick="return 핸들러 함수()"로 작성할 경우에, 핸들러 함수의 리턴 값이 false이면 다음 action으로 넘어가지 않는다.
유효성 검사 처리 방법
1) 기본 유효성 검사
: 사용자가 form 입력 항목에 데이터 존재 유무, 길이, 숫자 등을 검사할 수 있다.
한글을 처리하도록 request 내장 객체의 setCharacterEncoding() 메소드에 인코딩 유형 utf-8을 넣는다.
<%@ page contentType="text/html"; charset=utf-8" %> 에서 문자 인코딩 처리가 있는데 왜 또 넣는가?
위의 page 디렉티브 태그는 jsp 페이지의 인코딩을 처리하는 것이고, request.setCharacterEncoding("utf-8");은 폼을 전송할 때 한글이 깨질 수 있으므로 써주는 것이다.
(예시)
if(!isNaN(document.frm.name.value.substr(0,1)){
alert("숫자로 시작할 수 없습니다.");
document.frm.name.select();
}
// substr(0,7) 하면 인덱스가 0부터 7까지의 새로운 문자열을 구성
2) 데이터 형식 유효성 검사
: 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식(regular expression)을 사용하는 방법이다.
정규표현식이란?
: 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어
- 문자열의 특정 형태를 찾아내기 위해 패턴으로 표현하는 수식
- 주민등록번호, 전화번호, 이메일과 같이 데이터 형식의 패턴에 맞게 데이터를 검사하는데 이용한다.
① 객체 초기화(object initializer)를 사용하는 방법으로, 입력이 거의 바뀌지 않는 상수 형태일 때 사용한다.
(형식 : var 변수 이름 = /정규표현식/[Flag]; )
[Flag] 종류
- i : Ignore Case, 문자열의 대문자와 소문자를 구별하지 않고 검출
- g : Global, 문자열 내의 모든 패턴을 검출
- m : Multi Line, 문자열에 줄 바꿈 행이 있는지 검출
② RegExp 객체를 이용하는 방법으로, 정규 표현식이 자주 변경될 때 주로 사용한다.
var 변수 이름 = new RegExp('정규 표현식', ['Flag']);
| ^x | 문자열이 x로 시작함 |
| x$ | 문자열이 x로 종료함 |
| x? | x가 한번 이상 반복함 |
| x* | x가 존재하거나 존재하지 않음 |
| x|y | x 또는 y를 찾음(or 연산자 기능) |
| (x) | ( ) 안의 내용을 캡쳐하고, 그룹화함 |
| (x)(y) | 그룹화할 때 자동으로 앞에서부터 그룹번호를 부여하여 캡쳐 |
| x{n} | x를 n번 반복한 문자 찾기 |
| x{n,} | x를 n번 이상 반복한 문자 찾기 |
| x{n,m} | x를 n번 이상 m번 이하 반복한 문자 찾기 |
| [xy] | x 또는 y를 찾음 |
| [^xy] | x, y를 제외하고 문자를 찾음 |
| [x-z] | x부터 z 사이의 문자 중 하나를 찾음 |
| \d | 숫자를 찾음 |
| \D | 숫자가 아닌 값을 찾음 |
| \s | 공백을 찾음 |
| \S | 공백이 아닌 문자를 찾음 |
| \w | 알파벳+숫자+_을 찾음 |
| \W | 알파벳+숫자+_를 제외한 모든 문자를 찾음 |
- 한글만 입력 : /^[가-힣]*$/
- 숫자만 입력 : /^[0-9]*$/
- 문자로 시작 : /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/
- 영문+숫자+특수기호 8자리 이상으로 구성 : /^(?=.*[a-zA-Z]{1,})(?=.*[!@#$%^*+=-]{1,})(?=.*[0-9]{1,}).{8,}$/
** 정규 표현식 메소드 종류
- test() : 매개변수로 전달되는 문자열이 정규 표현식에 부합한 지 판단하여 true/false 반환
- exec() : 매개변수로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환
function checkform(){
var regExp = /Java/i; // var regExp = new RegExp('java', 'i'); 와 동일
var str = document.frm.title.value;
var result = regExp.exec(str);
alert(result[0]);
}
'Backend > JSP' 카테고리의 다른 글
| [JSP] 'Starting Tomcat v9.0 Server at localhost' has encountered a problem 문제 해결하기(톰캣 재설치) (0) | 2020.11.04 |
|---|---|
| [JSP] JSTL fmt 태그 사용 시 properties 파일 생성 (0) | 2020.11.02 |
| [JSP] 파일업로드 (0) | 2020.10.19 |
| [JSP] common-fileupload 상세설명과 substring을 하는 이유 (0) | 2020.10.18 |
| [JSP] MultipartRequest 이유 모르는 에러 해결 (0) | 2020.10.17 |
댓글