본문 바로가기
JSP 웹 프로그래밍/수업내용

[JSP 웹 프로그래밍] 유효성 검사

앵쥬부 2024. 7. 8. 17:39

1. 유효성 검사의 개요

유효성 검사(validation)

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

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

유효성 검사의 예

  - 폼 페이지에서 나이를 입력할 때 숫자를 인식하는 검사, 회원 가입 시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호

     검사, IP 패킷 검사 등

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

핸들러 함수는 폼 페이지에서 이벤트가 발생했을 때(<submit>를 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드

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

 -  자바스크립트는 웹 브라우저에서 유효성 검사를 처리하므로 서버에서 처리하는 것보다 속도가 빠르고 서버에 과부하를 주지        않음

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

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

 

유효성 검사를 위해 핸들러 함수를 만드는 과정

① input 태그의 type 속성 값이 submit인 경우 onclick 속성을 이용하여  핸들러 함수를 설정 또는 form 태그의

    onsubmit 속성 값에 설정

② 자바스크립트를 이용하여 </script>…<script> 내에 핸들러 함수를 작성     <script>…</script> 구문은 JSP 페이지의

     어디에 위치해도 상관없음.

③ 폼 페이지에서 입력된 데이터 값을 핸들러 함수로 가져오기 위해 form  태그의 name 속성 또는 forms 객체를 이용

   -  forms 객체를 이용하는 경우, forms 객체는 배열의 형태이기 때문에 length 속성으로 크기를 알 수 있고 배열 값인 index는         form 태그가 나타나는 순서로 0부터 시작

 

예제1 [ 폼 페이지에 입력한 아이디와 비밀번호 출력하기 ]

더보기

validation01.jsp - button방식

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(){
	let id = document.loginForm.id.value;
	let passwd = document.loginForm.passwd.value;
	
	console.log("id : "+ id + ", passwd : " + passwd);
	
}
</script>
</head>
<body>
	<!-- 폼페이지 
		action 생략 시 validation01.jsp가 action의 속성값이 됨 
		mathod 생략 시 method="get"
	-->
	<form name="loginForm">
		<!-- 폼데이터 -->
		<p>아 이 디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="password" name="passwd"/></p>
		<!-- checkForm(): 핸들러 함수 
			전송 버튼을 클릭(onclick 이벤트)하면 핸들러 함수를 호출
		-->
		<p><input type="button" value="전송" onclick="checkForm()"/>
	</form>

</body>
</html>

 

 

 

유효성 검사 처리 방법

 

2. 기본 유효성 검사

사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사

폼 페이지의 입력 데이터 길이를 확인하여 데이터의 유무를 검증하는 것은기본 유효성 검사에 해당

 

데이터 유무 확인하기

데이터 값의 유무에 대한 검사

  - 회원 가입 페이지에서 사용자가 아이디와 비밀번호 등의 필수 입력 항목을 입력하지 않고 <전송>을 클릭하면 입력하지 않았다는 오류 메시지가 나타나는 것

입력 데이터의 유무를 검사하는 형식

 

예제

더보기

validation02.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkLogin(){
	
	//Object
	let form = document.loginForm;
	
	let id = document.loginForm.id.value;
	let passwd = document.loginForm.passwd.value;
	
	console.log("id : "+ id + ", passwd : " + passwd);
	
	/*
	   유효성 검사 처리 방법 : 사용자가 폼 페이지에 입력한 데이터 값이 서버(톰켓)로 전송되기 전에 
	          		   웹 브라우저(크롬)에서 검증하는 방법
	  1) 기본 유효성 검사 : 폼 페이지에 입력된 데이터 값의 존재 유무를 검사함
	  2) 데이터 형식 유효성 검사 : 정규 표현식을 사용하여 폼 페이지에 입력된 데이터 값이
	               특정 패턴에 적합한지 여부를 검사
	               
	  데이터 값의 유무에 대한 검사.사용자가 아이디와 비밀번호 등의 
	  필수(mandatory, Not Null) 입력 항목을 입력하지
	  않고 [전송]을 클릭하면 입력하지 않았다는 오류메시지가 나타남 
	 */
	 if(id==""){
		 alert("아이디를 입력해 주세요");
		 form.id.focus(); //해당 요소로 커서가 위치함
		 return false; //submit 안됨
	 }else if(passwd == ""){
		 alert("비밀번호를 입력해 주세요.");
		 form.passwd.focus(); //해당 요소로 커서가 위치함
		 return false; //submit 안됨
	 }

	//form 을 submit
	document.loginForm.submit();
}
</script>
</head>
<body>
	<!--  body 와 body사이를 document라고 함  -->
	<!-- 폼페이지 
		   요청URI : validation02_process.jsp
		   요청파라미터(QueryString) : {id=a001,passwd=java}
		   요청방식(Http method) : post 
   	-->
	<form name="loginForm" action="validation02_process.jsp">
		<!-- 폼데이터 -->
		<p>아 이 디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="password" name="passwd"/></p>
		<!-- checkForm(): 핸들러 함수 
			전송 버튼을 클릭(onclick 이벤트)하면 핸들러 함수를 호출
		-->
		<p><input type="button" value="전송" onclick="checkLogin()"/>
	</form>

</body>
</html>

 

validation02_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
	<!-- 폼페이지 
	   요청URI : validation02_process.jsp
	   요청파라미터(QueryString) : request{id=a001,passwd=java}
	   요청방식(Http method) : post 
   	-->
   	<h3>로그인 프로세스 실행</h3>
   	<%
   		//문자 인코딩 유형 처리 
   		request.setCharacterEncoding("UTF-8");
   		
   		String id  = request.getParameter("id");
   		String passwd = request.getParameter("passwd");
   		
   		
   	%>
   	
   	<p>아 이 디 : <%=id%></p>
   	<p>비밀번호 : <%=passwd %></p>
   	
   	<P><button onclick="javascript:location.href='validation02.jsp';">이전페이지로 이동</button></P>
</body>
</html>

 

데이터 길이 확인하기

회원 가입 페이지에서 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사하는 것

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

예제

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkLogin(){
	
	//Object
	let form = document.loginForm;
	
	let id = document.loginForm.id.value;
	let passwd = document.loginForm.passwd.value;
	
	console.log("id : "+ id + ", passwd : " + passwd);
	
	/*
	   유효성 검사 처리 방법 : 사용자가 폼 페이지에 입력한 데이터 값이 서버(톰켓)로 전송되기 전에 
	          		   웹 브라우저(크롬)에서 검증하는 방법
	  1) 기본 유효성 검사 : 폼 페이지에 입력된 데이터 값의 존재 유무를 검사함
	  2) 데이터 형식 유효성 검사 : 정규 표현식을 사용하여 폼 페이지에 입력된 데이터 값이
	               특정 패턴에 적합한지 여부를 검사
	               
	  데이터 길이 확인하기 
	  아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사
	 */
	 //아이디 : 4~ 12자 허용
	 if(id.length < 4 || id.length > 12){
		 alert("아이디는 4~12자 이내로 입력 가능합니다.");
		 form.id.select(); //해당 요소의 값을 블록 처리 
		 return; //false 생략
		 
	 }
	  //else if를 안쓴 이유 ? 모두 통화해야하므로...
	 //비밀번호 4자 이상 입력 
	if(passwd.length < 4 ){
		 alert("비밀번호는 4자 이상으로 입력해야 합니다.");
		 form.passwd.select(); //해당 요소의 값을 블록 처리 
		 return;//함수 종료
	 }

	//form 을 submit
	document.loginForm.submit();
}
</script>
</head>
<body>
	<!--  body 와 body사이를 document라고 함  -->
	<!-- 폼페이지 
		   요청URI : validation02_process.jsp
		   요청파라미터(QueryString) : {id=a001,passwd=java}
		   요청방식(Http method) : post 
		   
		/ch08/validation03.jsp?id=a001&passwd=java'		   
   	-->
	<form name="loginForm" action="validation03_process.jsp">
		<!-- 폼데이터 -->
		<p>아 이 디 : <input type="text" name="id" value="${param.id}"/></p>
		<p>비밀번호 : <input type="password" name="passwd" value="${param.pass}"/></p>
		<!-- checkForm(): 핸들러 함수 
			전송 버튼을 클릭(onclick 이벤트)하면 핸들러 함수를 호출
		-->
		<p><input type="button" value="전송" onclick="checkLogin()"/>
	</form>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
	<!-- 폼페이지 
	   요청URI : validation02_process.jsp
	   요청파라미터(QueryString) : request{id=a001,passwd=java}
	   요청방식(Http method) : post 
   	-->
   	<h3>로그인 프로세스 실행</h3>
   	<%
   		//문자 인코딩 유형 처리 
   		request.setCharacterEncoding("UTF-8");
   		
   		String id  = request.getParameter("id");
   		String passwd = request.getParameter("passwd");
   		
   		
   	%>
   	
   	<p>아 이 디 : <%=id%></p>
   	<p>비밀번호 : <%=passwd %></p>
   	
   	<p><button onclick="javascript:history.go(-1);">이전페이지로 이동</button></p>
   <p><button onclick="javascript:location.href='validation03.jsp?id=<%=id%>&passwd=<%=passwd%>'">
      이전페이지로 이동2</button></p>
</body>
</html>

 

숫자 여부 확인하기

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

isNaN

 - isNotaNumber의 약자

 - isNaN( ) 함수의 인자 값이 숫자이면 false를 반환하고 숫자가 아니면 true를 반환

예제

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function checkForm(){
	let form = document.frm;
	
	let name = form.name.value;
	
	console.log("nane : " + name)
	
	//첫글자를 가져와보자 
	let lastName = name.substr(0,1); //개
	//isNaN = (It)isNotNumber = >그것은 숫자가 아닙니다.
	//숫자가  아니면 true / 숫자면 false
	console.log("lastName : " + isNaN(lastName));
	
	//이름은 숫자로 시작할 수 없음 
	if(!isNaN(lastName)){
		alert("이름은 숫자로 시작할 수 없습니다.");
		form.name.select();
		return;//서브밋 안됨
	}
	
	form.submit();
}

</script>
</head>
<body>
	<!-- form에 action없음=>현재URL을 요청, method없음=>기본get방식
		Validation04.jsp?name=개똥이
	 -->
	<form name="frm">
		<p>이름 : <input type="text" name="name" value="${param.name}"/></p>
		<!-- checkForm() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkForm()"/></p>
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function checkKey(){
	//event : 키보드를 누른 이벤트 객체
	//keyCode : 이벤트 객체의 속성. ascii코드 값
	let keyCode = event.keyCode;
	
	console.log("keyCode : " + keyCode)
	
	//숫자 : 48~57
	if(!(keyCode >= 48 && keyCode<=57) ){
		alert("숫자만 입력가능합니다.");
		event.returnValue = false;
	};
}

function checkForm(){
	let form = document.frm;
	
	let age = form.age.value;123
	
	console.log("age : " + age)
	
	
	//isNaN = (It)isNotNumber = >그것은 숫자가 아닙니다.
	//숫자가  아니면 true / 숫자면 false
	console.log("age : " + isNaN(age));
	
	//이름은 숫자로 시작할 수 없음 
	if(isNaN(age)){
		alert("나이는 숫자만 가능합니다.");
		form.age.select();
		return;//서브밋 안됨
	}
	
	form.submit();
}

</script>
</head>
<body>
	<!-- form에 action없음=>현재URL을 요청, method없음=>기본get방식
		Validation04.jsp?name=개똥이
	 -->
	<form name="frm">
		<p>나이 : <input type="text" name="age" value="${param.age}"
				onkeypress="checkKey()"/></p>
		<!-- checkForm() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkForm()"/></p>
	</form>
</body>
</html>

 

예제2 

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(){
	let form = document.loginForm;
	
	let id = form.id.value;
	let passwd = form.passwd.value;
	
	console.log("id : "+ id + ", passwd : " + passwd);
	
	//id : a001 -> id.length : 4
 	for(i=0; i<id.length; i++){ //i : 0~3
		let ch = id.charAt(i); // i:0(a)
		//아이디는 영문 소문자만 가능 
		if( (ch<'a' || ch>'z') && (ch>='A' || ch<='Z') &&(ch>'0' || ch<'9')){
			
			alert("아이디는 영문 소문자만 입력 가능하니다.");
			form.id.select();
			return;
		}
 	}
	
	//비밀번호는 숫자만 입력 가능 . isnNaN(그것은 숫자가 아니다)
	if(isNaN(passwd)) {
		alert("비밀번호는 숫자만 입력 가능 합니다.")
		form.passwd.select();
		return;
	}
	
	//아이디 및 비밀번호 유효성검사 통과 시 실행
	form.submit();
	
	
}
</script>
</head>
<body>
	<!-- 폼페이지 
		action 생략 시 validation04_2.jsp가 action의 속성값이 됨 
		mathod 생략 시 method="get"
	-->
	<form name="loginForm">
		<!-- 폼데이터 -->
		<p>아 이 디 : <input type="text" name="id"/></p>
		<p>비밀번호 : <input type="password" name="passwd"/></p>
		<!-- checkForm(): 핸들러 함수 
			전송 버튼을 클릭(onclick 이벤트)하면 핸들러 함수를 호출
		-->
		<p><input type="submit" value="전송" onclick="checkForm()"/>
	</form>

</body>
</html>

 

 3. 데이터 형식 유효성 검사

사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식(regular expression)을 사용하는 방법

기본 유효성검사보다 복잡

 

정규 표현식 사용하기

◎ 정규 표현식

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

 - 문자열의 특정 형태를 찾아내기 위해 패턴으로 표현한 수식

 - 주민등록번호, 전화번호, 이메일과 같이 데이터 형식의 패턴이 일정한 데이터를 검사하는 데 이용

 

◎ 정규 표현식의 사용 형식

 - 객체정규 표현식의 사용 형식 초기화(object initializer)를 사용하는 방법으로, 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사용

 

  - RegExp 객체를 이용하는 방법으로, 정규 표현식이 자주 변경될 때 주로 사용

 

정규 표현식의 메소드 종류

정규 표현식의 표현 방법

정규 표현식의 표현 방법

문자 클래스의 종류

 

예제 1

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function checkForm(){
	let regExp = /Java/i;	//정규식표현식 선언. i: ignore대소문자를 구별안함
	
	let str = document.frm.name.value;//Java Server Page
	
	console.log("str : " + str)
	
	//exec : 찾는다
	//"java".찾는다(Java Server Page)
	let resutlt = regExp.exec(str);
	
	console.log("resutlt : " + resutlt[0]);
	
}

</script>
</head>
<body>
	<!-- form에 action없음=>현재URL을 요청, method없음=>기본get방식
		Validation04.jsp?name=개똥이
	 -->
	<form name="frm">
		<p>이름 : <input type="text" name="name" value="${param.name}"/></p>
		<!-- checkForm() : 핸들러 함수 -->
		<p><input type="button" value="전송" onclick="checkForm()"/></p>
	</form>
</body>
</html>

예제 2

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkForm(){
	//이름은 숫자로 시작할 수 없음 
	let name = document.frm.name.value; //3개똥이
	
	//정규표현식 생성(문자만 가능), [a-z] : a~z 사이의 문자 1개
	let regExp = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
	
	//! : 테스트를 통과하지 못하면
	if(!regExp.test(name)){
		alert("이름은 숫자로 시작할 수 없습니다.");
		return;//함수를 빠져나옴. 함수 종료
	}
}
</script>

</head>
<body>
	<form name="frm">
		<p>이름 : <input type="text" name="name"/></p>
		<p><input type="button" value="전송" onclick="checkForm()"/></p>
	</form>
</body>
</html>

 

 

예제 3

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function checkMember(){
	//Object
	let form = document.Member;
	
	//1) 아이디는 문자로 시작
	let regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
	//2) 이름은 한글만 입력 . 시작(^)과 끝($)이 모두 한들
	let regExpName = /^[가-힣]*$/;
	//3) 비밀번호는 숫자만 입력 
	let regExpPasswd = /^[0-9]*$/;
	//4) 연락처는 형식 준수 (010-1111-1111)
	//{3} : 딱 3회 반복
	let regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;
	//5) 이메일 형식 준수(02test-_\.02test@naver-_\..com(kr))
	let regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
	
	
	let id = form.id.value;
	let name = form.name.value;
	let passwd = form.passwd.value;
	let phone = form.phone1.value + "-" +
				form.phone2.value + "-" +
				form.phone3.value;
	let email = form.email.value;
	//json Object
	let data = {
			"id":id,
			"name":name,
			"passwd":passwd,
			"phone":phone,
			"email":email,
	};
	
	//object 확인은 ,로
	 console.log("data : ",data)
	
	 //아이디
	 if(!regExpId.test(id)) {
		alert("아이디는 문자로 시작해주세요.");
		form.id.select();
		return;
	}
	
	if(!regExpName.test(name)) {
		alert("이름은 한글만 해주세요.");
		form.name.select();
		return;
	}
		
	if(!regExpPasswd.test(passwd)) {
		alert("비밀번호는 숫자만 입력해주세요");
		form.passwd.select();
		return;
	}
	
	
 	if(!regExpPhone.test(phone)) {
 		alert("연락처를 확인해주세요");
		form.phone2.select();
 		return;
 	}
 	
	if(!regExpEmail.test(email)) {
		alert("이메일 입력을 확인해주세요");
		form.email.select();
		return;
	}
	
	//유효성 검사를 모두 통과하면 
	form.submit();
}
</script>
</head>
<body>
	<h3>회원 가입</h3>
	<!-- 
		요청 URI : validation05_process.jsp
		요청 파라미터 : {id=a001, passwd=java, name=개똥이, 
					phone1=010 phone2=1111 phone3=11111, email=asdf@asdf.com}
		요청 방식 : POST
	 -->
   <form action="validation05_process.jsp" name="Member" method="post">
      <p>아이디 : <input type="text" name="id" /></p>
      <p>비밀번호 : <input type="password" name="passwd" /></p>
      <p>이름 : <input type="text" name="name" /></p>
      <p>연락처 : 
         <select name="phone1">
            <option value="010">010</option>         
            <option value="011">011</option>         
            <option value="016">016</option>         
            <option value="017">017</option>         
            <option value="019">019</option>         
         </select> - 
         <input type="text" maxlength="4" size="4" name="phone2" /> -
         <input type="text" maxlength="4" size="4" name="phone3" />
      </p>
      <p>이메일 : <input type="text" name="email" /></p>
      <p><input type="button" value="가입하기" onclick="checkMember()" /></p>
   </form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
	<!-- 
		요청 URI : validation05_process.jsp
		요청 파라미터 : {id=a001, passwd=java, name=개똥이, 
					phone1=010 phone2=1111 phone3=11111, email=asdf@asdf.com}
		요청 방식 : POST
	 -->
	 <%
	 	request.setCharacterEncoding("UTF-8");
	 %>
	 <P>아 이 디  : <%=request.getParameter("id") %></P>
	 <P>비밀번호 : <%=request.getParameter("passwd") %></P>
	 <P>이     름  : <%=request.getParameter("name") %> </P>
	 <P>연 락 처 : <%=request.getParameter("phone1") %> -
				<%=request.getParameter("phone2") %> -
				 <%=request.getParameter("phone3") %></P>
	 <P>이 메 일 : <%=request.getParameter("email") %></P>
	 
</body>
</html>

Ch08 유효성 검사.pptx
2.94MB

'JSP 웹 프로그래밍 > 수업내용' 카테고리의 다른 글

[JSP 웹 프로그래밍] 시큐리티  (0) 2024.07.10
[JSP 웹 프로그래밍] 다국어 처리  (0) 2024.07.10
[JSP 웹 프로그래밍] 파일 업로드(file upload)  (0) 2024.07.04
[JSP 웹 프로그래밍] form 태그 / input 태크 / select 태그 / textarea 태그  (0) 2024.07.03
[JSP 웹 프로그래밍] reponse 내장 객체  (0) 2024.07.01

'JSP 웹 프로그래밍/수업내용' Related Articles

티스토리툴바