[JSP 웹 프로그래밍] 유효성 검사 1 (validation)

728x90

1. 유효성 검사(validation)

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

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

▷ 유효성 검사의 예

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

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

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

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

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

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

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

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

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

2. 자바스크립트를 이용하여 <script>...</script> 내에 핸들러 함수를 작성
▷ script 구문은 JSP 페이지의 어디에 위치해도 상관 없음

3. 폼 페이지에서 입력된 데이터 값을 핸들러 함수로 가져오기 위해 form태그의 name 속성 또는 forms 객체를 이용
▷ forms 객체를 이용하는 경우, forms 객체는 배열의 형태이기 때문에 length 속성으로 크기를 알 수 있고 배열 값인 index는 form 태그가 나타나는 순서로 0부터 시작

◎ 폼 페이지에 입력한 아이디와 비밀번호 출력 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkform(){
		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()">	
	</form>
</body>
</html>

◎ 유효성 검사 처리 방법

2. 기본 유효성 검사

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

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

◎ 데이터 유무 확인하기

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

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

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

◎ 폼 페이지에 입력한 데이터(아이디, 비밀번호) 값의 유무 검사하기

1. validation02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkLogin(){
		var form = document.loginForm;
		if(form.id.value == ""){
			alert("아이디를 입력해주세요");
			form.id.focus();
			return false;
		} else if(form.passwd.value == ""){
			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="submit" value="전송" onclick="checkLogin()">	
	</form>
</body>
</html>

2. validation02_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
		String id = request.getParameter("id");
		String passwd = request.getParameter("passwd");
	%>
	
	<p> 아이디 : <%= id %>
	<p> 비밀번호 : <%= passwd %>
</body>
</html>

앞의 예제와 입력창은 같지만 공백이 있을 시 alert 경고문이 나타나며, 값들을 validation02_process.jsp 페이지로 전달해줍니다.

◎ 데이터 길이 확인하기

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

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

◎ 폼 페이지에 입력한 데이터(아이디와 비밀번호) 값의 길이 검사하기 예제

1. validation03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<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.select();
			return;
		}
		
		if(form.passwd.value.length < 4){
			alert("비밀번호는 4자 이상으로 입력해야 합니다!");
			form.passwd.select();
			return;		
		}
		
		form.submit();
	}
</script>
<body>
	<form name="loginForm" action="validation03_process.jsp" method="post">
		<p> 아 이 디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p><input type="submit" value="전송" onclick="checkLogin()">	
	</form>
</body>
</html>

2. validation03_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
		String id = request.getParameter("id");
		String passwd = request.getParameter("passwd");
	%>
	
	<p> 아이디 : <%= id %>
	<p> 비밀번호 : <%= passwd %>
</body>
</html>

입력창은 같고 범위를 지정한 길이 내에서만 값들을 입력할 수 있습니다.
그렇지 않으면 경고창이 나타납니다.

◎ 숫자 여부 확인하기

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

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

◎ 폼 페이지에 입력한 비밀번호 값이 숫자인지 검사하기 예제

1. validation04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<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')){
				alert("아이디는 영문 소문자만 입력 가능합니다!");
				form.id.select();
				return;
			}
		}
		
		if(isNaN(form.passwd.value)){
			alert("비밀번호는 숫자만 입력 가능합니다!");
			form.passwd.select();
			return;
		}
		
		form.submit();
	}
</script>
<body>
	<form name="loginForm" action="validation04_process.jsp" method="post">
		<p> 아 이 디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p><input type="submit" value="전송" onclick="checkLogin()">	
	</form>
</body>
</html>

2. validation04_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
	<h3>입력에 성공했습니다.</h3>
	<%
		request.setCharacterEncoding("utf-8");
		String id = request.getParameter("id");
		String passwd = request.getParameter("passwd");
	%>
	
	<p> 아이디 : <%= id %>
	<p> 비밀번호 : <%= passwd %>
</body>
</html>

위의 예제들과 동일한 입력 창에 아이디는 영문 소문자만 입력할 수 있습니다.
비밀번호도 숫자만 입력 가능하고 숫자 외의 문자가 입력되면 if문이 실행됩니다.

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

원하는 글자 또는 숫자만 입력할 수 있는 예제들을 실시해 보았는데요, 제가 원하는 결과를 도출했는지 검증하는 과정이 중요하네요!

많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~

728x90

'BackEnd > JSP' 카테고리의 다른 글

[JSP 웹 프로그래밍] 다국어 처리 1 (Locale Class) (0)	2023.03.05
[JSP 웹 프로그래밍] 유효성 검사 2 (데이터 형식 유효성 검사) (0)	2023.03.04
[JSP 웹 프로그래밍] 파일 업로드 2 (Commons-FileUpload) (1)	2023.03.02
[JSP 웹 프로그래밍] 폼 태그 2 (textarea, 폼 데이터 처리) (0)	2023.03.02
[JSP 웹 프로그래밍] 폼 태그 1 (form, input, select) (0)	2023.03.02

☆보보의 티스토리(IT개발자)☆

[JSP 웹 프로그래밍] 유효성 검사 1 (validation)

'BackEnd > JSP' 카테고리의 다른 글

티스토리툴바

[JSP 웹 프로그래밍] 유효성 검사 1 (validation)

'BackEnd > JSP' 카테고리의 다른 글

'BackEnd/JSP' Related Articles

티스토리툴바