[jsp] 유효성 검사

jsp 2023. 4. 25. 20:07

유효성 검사는

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

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

이러한 유효성검사의 예로는 폼페이지에서 나이를 입력할때 숫자를 인식하는검사, 회원 가입시 아이디 중복 검사, 로그인 인증 시 아이디와 비밀번호 검사, IP패킷 검사 등이 있다.

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

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

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

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

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

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

핸들러 함수를 만드는 과정

1. input 태그의 type="submit"인경우 onclick 속성을 이용해 핸들러 함수를 설정한다.

2. 자바스크립트를 이용하여 <script> ... </script> 내에 핸들로 함수를 작성한다. 스크립트 구문은 jsp 페이지 어디에 위치하든 상관없다.

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

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

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	function checkform(){
		alert("아이디: "+document.loginForm.id.value + "\n" +
				"비밀번호 : "+document.loginForm.passwd.value);
		//document.폼이름.파라미터 이름.값
		
		
	}
</script>
<body>

	<form name ="loginForm">
		<p> 아이디: <input type="text" name="id">
		<p> 비밀번호 : <input type="text" name="passwd">
		<p> <input type="button" value="전송" onclick="checkform()">
	</form>
</body>
</html>

유효성 검사 처리 방법

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

기본 유효성 검사 - 폼 페이지에 입력된 데이터 값의 존재유무 검사

데이터형식 유효성 검사 - 폼 페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사 ( 정규 표현식 )사용

기본 유효성 검사

기본 유효성 검사는 사용자가 폼 페이지에 입력 항목에 입력한 데이터값이 있는지, 없는지 확인하고

데이터 길이, 숫자 등 기본적인 것이 맞는지를 검사한다.

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

데이터 유무 확인하기

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

이때 입력 데이터의 유무를 검사하는 형식은 다음과 같다.

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

폼페이지에 입력한 데이터 값의 유무를 검사하자

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	fucntion checkLogin(){
		var form = document.loginForm;
		//var은 어떤 자료형이든 다 쓸수있는 자료형임.
		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="button" value="전송" onclick="checkLogin()">
		
	</form>
</body>
</html>

데이터 길이 확인하기

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

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

폼 페이지에 입력한 데이터 값의 길이를 검사하는 예제이다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</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" aciont="validation03_process.jsp" method="post">
		<p> 아 이 디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="button" name="전송" onclick="checkLogin()">
	</form>

</body>
</html>

숫자 여부 확인하기

숫자여부는 isNaN() 함수를 활용하여 검사한다. isNAN은 isNotaNumber의 약자이며, 함수인자 값이 숫자이면 false, 숫자가 아니면 true를 반환

isNaN(docuemt.폼 이름.입력양식 이름.value)

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

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	fucntion checkLogin(){
		var form = document.loginForm;
		
		for(int i=0; i<form.id.value.length;i++){
			var ch = form.id.value.charAt(i);
			
			if((ch<'a'||ch>'z')){
				alert("아이디는 영문 소문자만 가능");
				form.id.select();
				return;
			}
			if(isNaN(form.passwd.value)){
				alert("숫자만 입력 가능합니다")
				form.passwd.select()
				return;
			}
		}
	}
</script>
<body>
	<form name="loginForm" action="validation_process.jsp" method="post">
		<p> 아 이 디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="button" name="전송" onclick="checkLogin()">
	</form>
	
</body>
</html>

데이터 형식 유효성 검사

데이터 형식 유효성 검사는 사용자가 폼 페이지의 입력항목에 입력한 데이터 값이, 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법이다.

정규표현식 사용하기

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

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

이러한 정규표현식은 주민등록번호, 전화번호, 이메일과 같이 데이터 형식 패턴이 일정한 데이터를 검사하는데 사용하며, 두가지 형식중 하나를 사용한다

1) 객체 초기화를 사용하는 방법 : 입력된 표현식이 거의 바뀌지 않는 상수 형태일 때 주로 사용한다.

2) RegExp 객체를 이용하는 방법 : 정규 표현식이 자주 변경될때 사용한다.

var 변수 이름 = /정규 표현식/[Flag];
var 변수 이름 = new RegExp('정규 표현식',['Flag']);

Flag은 정규 표현식의 끝인 / 다음에 오는 문자열로,,, 생략할 수 있으며 주로 사용하는 종류는 3가지이다.

Flag을 설정하지 않으면 문자열 내에 검사 대상이 많이 있어도 한번만 검출한다.

i : Ignore Case- 문자열의 대문자와 소문자를 구별하지 않고 검출
g : Global - 문자열 내의 모든 패턴을 검출
m : MultiLine -문자열에 줄 바꿈 행이 있는지 검출

정규 표현식에 따라 문자열을 판단하는 메소드는 다음과 같다,

test() - 매개변수 값으로 전달되는 문자열이 정규 표현식에 부합한지 판단하여 true/false 출력
exec() - 매개변수 값으로 전달되는 문자열에서 정규 표현식에 부합된 문자열을 추출하여 반환함

다음은 폼 페이지에 입력된 데이터값에서 "Java"라는 문자열이 있는지, 해당하는 문자열을 찾는 예시이다.

만약 폼페이지로 "Java Server Pages"라는 값이 들어올 경우 "Java"라는 alert 출력됨

<script type="text/javascript">
	function checkForm(){
    	var regExp =/Java/i; // "Java"에 해당하는 문자열을 찾는다.
        var str = document.frm.title.value;
        var result = regExp.exec(str);
        alert(reuslt[0]);
     }
</scirpt>

정규 표현식의 표현 방법

정규표현식에서 사용하는 기호를 메타문자라고 한다.

메타 문자는 정규 표현식 내부에서 특정한 의미를 가진 문자이다.

몇개만 알아보자

^x : 문자열이 x로 시작된다.
[xy] : []는 내부에 해당하는 문자열 범위중 하나를 찾는 클래스이다, 즉 x,y중 하나를 찾는다는 뜻.
x* : x가 한번 이상 반복된다.
x$ : 문자열이 x로 종료됨
\d : 숫자를 찾는다.
x{n} : x를 n번 반복한 문자를 찾는다
x{n,m} : x를 n번이상 m번 이하 반복한 문자를 찾는다
x? : x가 존재하거나 존재하지않는다

[웹쇼핑몰] 상품 등록 데이터의 유효성 검사하기'

유효성 검사하는 js 파일

id속성값으로 입력데이터를 가져와서 유효성 검사한다.

여기서 check()메소드는 정규 표현식으로 검사하여 오류가 있으면 오류메시지를 출력하고, 해당입력항목에 커서가 놓이도록하는 함수이다.

function CheckAddProduct(){
	var productId = document.getElementById("productId");
	var name = document.getElementById("name");
	var unitPrice = document.getElementById("unitPrice");
	var unitsInStock = document.getElementById("unitsInStock");

	//상품 아이디 체크
	if(!check(/^P[0-9]{4,11}$/, productId, 
			"[상품 코드]\nP와 숫자를 조합하여 5~12자까지 입력하세요\n첫 글자는 반드시 P로 시작하세요"))
		return false;
	
	//상품명 체크
	if(name.value.length < 4 || name.value.length > 12) {
		alert("[상품명]\n 최소 4자에서 최대 12자까지 입력하세요");
		name.select();
		name.focus();
		return false;
	}
	
	//상품 가격 체크
	if(unitPrice.value.length == 0 || isNaN(unitPrice.value)){
		alert("[가격]\n숫자만 입력하세요");
		unitPrice.select();
		unitPrice.focus();
		return false;
	}
	
	if(unitPrice.value < 0){
		alert("[가격]\n음수는 입력할 수 없습니다.");
		unitPrice.select();
		unitPrice.focus();
		return false;
	}else if (!check(/^\d+(?:[.]?[\d]?[\d])?$/, unitPrice, "[가격]\n소수점 둘째 자리까지만 입력하세요"))
		return false;
	
	//재고 수 체크
	if (!check(/^\d+$/, unitsInStock, "[재고 수]\n숫자만 입력하세요")){
		alert("[재고 수]\n숫자만 입력하세요");
		unitsInStock.select();
		unitsInStock.focus();
		return false;
	}
	
	function check(reqExp, e, msg){
		if(reqExp.test(e.value)){
			return true;
		}
		alert(msg);
		e.select();
		e.focus();
		return false;
	}
	
	document.newProduct.submit();
}

addProduct.jsp도 수정해주어야하는데,,

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<link rel ="stylesheet" href ="./resources/css/bootstrap.min.css" />
<script type ="text/javascript" src ="./resources/js/validation.js"></script>
<title>상품 등록</title>
</head>
<body>
	<jsp:include page="menu.jsp" />	
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 등록</h1>
		</div>
	</div>
	<div class="container">
		<form name="newProduct" action="./processAddProduct.jsp" class="form-horizontal" method="post" enctype ="multipart/form-data">
			<div class="form-group row">
				<label class="col-sm-2">상품 코드</label>
				<div class="col-sm-3">
					<input type="text" id ="productId" name="productId" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품명</label>
				<div class="col-sm-3">
					<input type="text" id ="name" name="name" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">가격</label>
				<div class="col-sm-3">
					<input type="text" id ="unitPrice" name="unitPrice" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상세 정보</label>
				<div class="col-sm-5">
					<textarea name="description" cols="50" rows="2"
						class="form-control"></textarea>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">제조사</label>
				<div class="col-sm-3">
					<input type="text" name="manufacturer" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">분류</label>
				<div class="col-sm-3">
					<input type="text" name="category" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">재고 수</label>
				<div class="col-sm-3">
					<input type="text" id ="unitsInStock" name="unitsInStock" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상태</label>
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New " > 신규 제품 
					<input type="radio" name="condition" value="Old" > 중고 제품 
					<input type="radio" name="condition" value="Refurbished" > 재생 제품
				</div>
			</div>
			<div class ="form-group row">
			<label class ="col-sm-2">이미지</label>
				<div class ="col-sm-5">
 					<input type="file" name="productImage" class="form-control">
 				</div>
 			</div>
			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10 ">
					<input type ="button" class="btn btn-primary" value="등록" onclick ="CheckAddProduct()">
				</div>
			</div>
		</form>
	</div>
</body>
</html>

'jsp' 카테고리의 다른 글

HTTP,쿠키,세션 (1)	2023.05.30
[jsp] 쿠키생성, 쿠키 정보 얻기, 쿠키 삭제 (0)	2023.05.24
[jsp] 파일 업로드 (0)	2023.04.25
[jsp] 폼 태그 (0)	2023.04.25
[jsp] 스크립트 태그 (0)	2023.03.19

ABOUT ME

lee-ding lee-ding

유효성 검사는

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

핸들러 함수를 만드는 과정

유효성 검사 처리 방법

기본 유효성 검사

데이터 유무 확인하기

데이터 길이 확인하기

숫자 여부 확인하기

데이터 형식 유효성 검사

정규표현식 사용하기

정규 표현식의 표현 방법

'jsp' 카테고리의 다른 글

티스토리툴바

ABOUT ME

유효성 검사는

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

핸들러 함수를 만드는 과정

유효성 검사 처리 방법

기본 유효성 검사

데이터 유무 확인하기

데이터 길이 확인하기

숫자 여부 확인하기

데이터 형식 유효성 검사

정규표현식 사용하기

정규 표현식의 표현 방법

'jsp' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바