유효성 검사 : 상품 등록 데이터의 유효성 검사하기

728x90

01. 유효성 검사의 개요

유효성 검사(validation)는 사용자가 폼 페이지에서 입력한 데이터값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되엇는지 검증하는 것을 말한다. 즉 사용자가 실수로 유효하지 않은 데이터값을 입력하면 부적합하다고 판단하여 다시 폼 페이지로 되돌려 사용자에게 오류가 있음을 알려준다. 이러한 유효성 검사의 예로는 폼페이지에서 나이를 입력할 때 숫자를 인식하는 검사, 회원 가입 시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사, IP 패킷 검사 등을 들 수 있다.

NOTE_ 유효성 검사가 필요한 이유와 검사 항목

웹 애플리케이션에서 폼 데이터의 유효성 검사가 필요한 가장 큰 이유는 보안 공격, 잘못된 데이터, 사용자의 실수로 예상 가능한 오류 등을 방지할 수 있기 때문이다. 유효성 검사 기능을 이용하면 다양한 사용자가 폼 데이터를 입력 해도 폼 페이지의 동일한 입력 양식과 형태를 유지할 수 있다.

입력 양식이 있는 폼페이지를 만들 때 반드시 점검해야 할 유효성 검사의 항목은 다음과 같다.

입력 데이터가 null 인지 확인하는 유효성 검사
날짜나 이메일을 입력할 대 형식에 맞는지 확인하는 유효성 검사
나이를 입력할 대 숫자인지 확인하는 유효성 검사
입력데이터의 제한 길이를 초과햇는지 확인하는 유효성 검사
로그인 인증 시 아이디와 비밀번호를 확인하는 유효성 검사
회원가입시 아이디 중복 여부를 확인하는 유효성 검사

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

핼들러 함수는 폼페이지에서 이벤트가 발생했을 떄 (<submit>을 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드로, 자바스크립트를 이용하여 유효성 검사를 위한 코드를 작성한다. 자바스크립트는 웹 브라우저에서 유효성 검사를 처리하므로 서버에서 처리하는 것 보다 속도가 빠르고 서버를 과부하를 주지 않는다.

핸들러 함수에서는 사용자가 폼 페이지에 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지를 검사한다. 입력된 데이터가 유효성 검사를 통과하면 서버로 전송하고, 그렇지 안흥면 서버 전송을 취소하고 사용자에게 오류 메시지를 보여주는 역할을 한다.

<script type="text/javascript">
	function 핸들러 함수(){
    	var str = document.폼 이름.입력항목 이름.value;
    }
</script>

<form name="폼 이름">
...(생략)...
	<input type="submit" onclick="핸들러 함수()">
</form>

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

input 태그의 type 속성값이 submit인 경우 onclick 속성을 이용하여 핸들러 함수를 설정한다. 또는 form태그의 onsubmit 속성 값에 설정한다
자바스크립트를 이용하여<script>...</script> 내에 핸들러 함수를 작성한다. <script>...</script>구문은 jsp 페이지의 어디에 위치해도 괜찮다.
폼페이지에서 입력된 데이터 값을 핸들러 함수로 가져오기 위해 form 태그의 name 속성 또는 forms 객체를 이용한다. forms 객체를 이용하는 경우, forms 객체는 배열의 형태이기 때문에 length 속성으로 크기를 알수 있고 배열 값인 index는 form 태그가 나타나는 순서로 0부터 시작한다.

다음은 폼 페이지에서 입력된 아이디와 비밀번호 값을 핸들러 함수 checkForm()으로 가져와출력하는예이다

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkForm(){
		alert("이름은" + document.frm.name.value+ "입니다");
    	//var str = document.폼 이름.입력항목 이름.value;
    }
</script>

<body>
	
	<form name="frm">

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

NOTE_ form 태그의 id 속성을 이용하여핸들러함수로 폼 입력 데이터 값을 가져오는 다른 방법

form 태그가 <form id="loginForm">이라면 다음과 같이 접근한다

var form = document.getElementsTagName("form")[0];
var form = document.getElementById("loginForm");

적용 예

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkForm(){
		
		var form = document.getElementById("frm");
		alert("이름은" + document.frm.name.value+ "입니다");
 
    }
</script>

<body>
	
	<form name="frm">

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

=폼 페이지에 입력한 아이디와 비밀번호 출력하기=

/ch08/validation01.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>

<!-- 자바스크립트로 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수 checkForm()을작성한다.  -->
<script type="text/javascript">
	//폼 페이지에 입력한 아이디와 비밀번호 값을 출력한다. 
	function checkForm(){
		alert("아이디 :" + document.loginForm.id.value+ "\n"+ "비밀번호 : " +document.loginForm.passwd.value);
   }
</script>
<body>
	<!-- name 속성 값이 loginForm 인 폼문을 작성 -->
	<form name="loginForm">
	
	<p> 아이디 : <input type="text" name="id"> 
	<p> 비밀번호 : <input type="text" name="passwd"> 
	<!-- <전송>을 클릭하면 핸들러 함수 checkForm()이 실행되도록 onclick속성을 작성한다 -->
	<p><input type="submit" onclick="checkForm()" value="전송">
	</form>
</body>
</html>

1.2 유효성 검사 처리 방법

사용자가 폼 페이지에 입력한 데이터값이 서버로 전송되지 전에 웹 브라우저에서 검증하는 방법으로 기본 유효성 검사와 데이터 형식 유효성 검사가 있다.

유효성 검사의 종류

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

02. 기본 유효성 검사

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

2.1 데이터 유무 확인하기

데이터 값의 유무에 대한 검사에서는 예를 들어 회원 가입 페이지에서 사용자가 아이디와 비밀번호 등의 필수 입력 항목을 입력하지 않고 <전송>을 클릭하면 입력하지 않았다는 오류 메시지가 나타난다. 이때 입력 데이터의 유무를 검사하는 형식은 다음과 같다

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

다음은 폼 페이지에 입력한 데이터 값의 유무를 검사하는 예이다. 만약 입력된 데이터 값이 없으면 오류 메시지를 출력한다.

[입력 데이터의 유무 검사 예]

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkForm(){
		if(document.frm.name.value ==""){
			alert("이름을 입력해주세요");
			document.frm.name.select();
		}
		//var form = document.getElementById("frm");
		//alert("이름은" + document.frm.name.value+ "입니다");
 
    }
</script>

<body>
	
	<form name="frm">

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

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

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>

<!-- 자바스크립트로 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수 checkLogin()을작성한다.  -->
<script type="text/javascript">
	function checkLogin(){
		var form = document.loginForm;
		
	
		if(form.id.value ==""){
			alert("아이디 입력하슈")
			form.id.focus();//해당 항목에 입력커서가 놓임
			return false;
		}
		
		if(form.passwd.value == ""){
			alert("비밀번호 입력하셔");
			form.passwd.focus();
			return false;
		}
		
		//폼 페이지에 입력된 데이터 값을 서버로 전송한다. 
		form.submit();
	}
</script>
<body>
	<form name="loginForm" action="validation03_process.jsp" method="post">
	
	<p> 아이디 : <input type="text" name="id"> 
	<p> 비밀번호 : <input type="text" name="passwd"> 
	<!-- <전송>을 클릭하면 핸들러 함수 checkForm()이 실행되도록 onclick속성을 작성한다 -->
	<p><input type="button" onclick="checkLogin()" value="전송">
	</form>
</body>
</html>

/ch08/validation02_process.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<body>
	<h3>입력에 성공햇슈</h3>
	<%
		request.setCharacterEncoding("utf-8"); //인코딩 유형
		
		//폼 문에 입력한 아이디와 비밀번호를 전송받도록 request 내장객체의 getParameter()메소드 작성
		String id = request.getParameter("id");
		String passwd = request.getParameter("passwd");
	%>
	<p> 아이디 : <%=id %>
	<p> 비밀번호 : <%=passwd%>
</body>
</html>

2.2 데이터 길이 확인하기

데이터 길이에 대한 검사는 회원가입 페이지에서 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 검사하는 것으로 형식은 다음과 같다. 예를 들면 입력 데이터의 조건으로 아이디와 비밀번호는 4~12자 이내로 영어와 숫자를 혼합해서 입력할 것, 첫문자는 숫자로 시작할 수 없음 등을 검사하는 것이다.

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

다음은 아이디의 입력 데이터 길이를 검사하는 예이다. 아이디의 입력 데이터 길이를 4~12 자로 제한하여 유효하지 않은 값이 입력되면 오류 메시지를 출력한다.

[입력 데이터 길이 검사 예]

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<script type="text/javascript">
	function checkForm(){
		if(document.frm.name.value.length < 6 || document.frm.name.value.length > 12){
			alert("이름을 6~12자 이내로 입력하여 주세요");
			document.frm.name.select();
		}
		
		
		
		
		//if(document.frm.name.value ==""){
		//	alert("이름을 입력해주세요");
		//	document.frm.name.select();
		//}
		//var form = document.getElementById("frm");
		//alert("이름은" + document.frm.name.value+ "입니다");
 
    }
</script>

<body>
	
	<form name="frm">

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

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

ch08/validation03.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>

<!-- 자바스크립트로 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수 checkLogin()을작성한다.  -->
<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.lngth <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="text" name="passwd"> 
	<!-- <전송>을 클릭하면 핸들러 함수 checkForm()이 실행되도록 onclick속성을 작성한다 -->
	<p><input type="button" onclick="checkLogin()" value="전송">
	</form>
</body>
</html>

ch08/validation03_process.jsp

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<body>
	<h3>입력에 성공햇슈</h3>
	<%
		request.setCharacterEncoding("utf-8"); //인코딩 유형
		
		//폼 문에 입력한 아이디와 비밀번호를 전송받도록 request 내장객체의 getParameter()메소드 작성
		String id = request.getParameter("id");
		String passwd = request.getParameter("passwd");
	%>
	<p> 아이디 : <%=id %>
	<p> 비밀번호 : <%=passwd%>
</body>
</html>

728x90

'JSP, Servlet, MySQL > JSP - webmarket' 카테고리의 다른 글

JSP Servlet 다국어 처리 : 상품 등록 페이지의 다국어 처리하기 (2)	2023.09.14
유효성 검사 : 상품 등록 데이터의 유효성 검사하기 2 (0)	2023.09.09
파일 업로드 : 상품 이미지 등록하기 2 /파일업로드 상태 500 내부 서버 오류/Not a directory (0)	2023.09.08
파일 업로드 : 상품 이미지 등록하기 /파일업로드 상태 500 내부 서버 오류/Not a directory (0)	2023.09.05
폼 태그 : 상품 등록 페이지 만들기 2 (0)	2023.09.04

Even better

유효성 검사 : 상품 등록 데이터의 유효성 검사하기

'JSP, Servlet, MySQL > JSP - webmarket' 카테고리의 다른 글

티스토리툴바

유효성 검사 : 상품 등록 데이터의 유효성 검사하기

'JSP, Servlet, MySQL > JSP - webmarket' 카테고리의 다른 글

'JSP, Servlet, MySQL/JSP - webmarket' Related Articles

티스토리툴바