유휴성검사(javaScript)
- 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것
- 유효성검사가 필요한 가장 큰 이유는 보안공격을 방지할 수 있기 때문
- 스크립트 태그(<script> ... </script>) 내에 핸들러 함수 작성 작석위치는 JSP 페이지 어디든 상관없음
- 데이터 형식 유효성 검사는 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사하며 정규 표현식 사용
- 기본 유효성 검사는 폼 페이지에 입력된 데이터 값의 존재 유무를 검사함
ex)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<script type="text/javascript">
function checkform() { //핸들러 함수 checkfrom 작성
alert("아이디 : " + document.loginForm.id.value + "\n" +
"비밀번호 : " +document.loginForm.passwd.value);
}
</script>
<body>
<form name = "loginForm">
<p>아이디 : <input type = "text" name = "id">
<p>비밀번호 : <input type = "password" name = "passwd">
<p> <input type="submit" value = "전송" onclick="checkform()"> <!-- 핸들러함수가 실행되도록 onclick 속성 작성 --> <!-- submit은 액션으로 전송 -->
</form>
</body>
</html
데이터 유무 확인
- 필수 항목을 입력하지 않고 전송을 클릭하면 입력하지 않았다는 오류메시지가 나타남 이때 검사하는 형식
ex)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>
</head>
<script type="text/javascript">
function checkLogin() { //핸들러 함수 (javaScript)
var form = document.loginForm; //자바 스크립트는 타입이 없음 var은 공간
if(form.id == ""){
alert("아이디를 입력해주세요");
form.id.focus(); //아이디가 입력되있지 않으면 입력항목에 커서가 놓인다
return false;
} else if(form.passwd == ""){
alert("비밀번호를 입력해주세요");
form.passwd.focus(); //비밀번호가 입력되있지 않으면 입력항목에 커서가 놓인다
return false;
}
form.submit();//폼 페이지에 입려간 데이터 값을 서버로 전송
}
</script>
<body>
<form name = "loginForm" action = "validation02_process.jsp" method ="post">
<p>아이디 : <input type = "text" name = "id">
<p>비밀번호 : <input type = "password" name = "passwd">
<p> <input type="button" value = "전송" onclick="checkLogin()"> <!-- 핸들러함수가 실행되도록 onclick 속성 작성 -->
</form>
</body>
</html>데이터 길이 확인
script
ex)
<script type="text/javascript">
function checkLogin( ){
var form = document.loginForm;
if (form.id.value.length < 4 || form.id.value.length > 12){
alert("아이디는 4~12자 이내로 입력 가능합니다!");
form.id.focus(); //해당항목에 커서가 놓임
return; //반환값이 없으니 함수 종료
} //end if
if (form.passwd.value.length < 4) {
alert("비밀번호는 4자 이상으로 입력해야 합니다!");
form.passwd.select();
return;
} //end if
form.submit();
</script>isNaN
- 숫자 여부 검사
- 함수 인자 값이 숫자이면 false 숫자가 아니면 true 반환
ex)
<script type="text/javascript">
function checkLogin( ){
var form = document.loginForm;
for (i=0; i<form.id.value.length; i++){
var ch = form.id.value.charAt(i);
if ((ch<'a'||ch>'z') && (ch>'A'||ch<'Z') && (ch>'0'||ch<'9')){ //z에 오류 발생시 뒤공간을 뛰우고 저장후 다시 공간을 지우면 해결됨
alert("아이디는 영문 소문자로만 입력 가능 합니다!");
form.id.select(); //입력 항목에 커서를 놓음
return;
}//end if
}//end for
if (isNaN(form.passwd.value)){ // 숫자 여부 검사
alert("비밀번호는 숫자로만 입력 가능 합니다!");
form.passwd.select();
return;
}//end if
form.submit();
}
</script>
정규표현식
- 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어
- 정규 표현식에서 사용하는 기호를 메타 문자라고 함(p271)
정규 표현식 flag
i : ignore Case 문자열의 대 소문자를 구별하지 않고 검출
g : Global 문자열 내의 모든 패턴을 검출
m : Multi Line 문자열에 줄 바꿈 행이 있는지 검출
정규 표현식 메소드
test() : 매개변수 값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false를 반환
exec() : 매개변수 값으로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출해 반환
쉽게 배우는 JSP 웹 프로그래밍
송미영 지음 한빛 아카데미