[쉽게 배우는 JSP 웹프로그래밍] 8장 연습문제 및 솔루션 총정리

728x90

728x170

1. 유효성 검사란 무엇인가?

유효성 검사란 사용자가 폼페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것을 말한다. input 태그의 submit 버튼을 클릭한 경우, onclick 핸들러 함수의 조건들을 확인하는 작업을 가진다.

2. 유효성 검사를 위한 두 가지 처리 기법을 간단하게 설명하시오.

기본 유효성 검사와 데이터 형식 유효성 검사 두 가지 존재.

기본 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 존재하는지의 여부를 확인하고 데이터의 길이, 숫자 등과 같은 조건들이 충족되었는지 확인한다.

데이터 형식 유효성 검사는 정규 표현식을 이용하여 입력한 데이터 값이 특정 형태에 적합한지 검사한다. 정규 표현식을 사용하는 방법이 훨씬 복잡하고, test() 메소드와 exec() 메소드 두 종류가 있다.

3. 유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법을 설명하시오.

4. 비밀번호가 아이디를 포함하지 않도록 다음 조건에 맞게 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 check(){
		if(document.frm.id.value == ""){
			alert("아이디를 입력해주세요.");
			return false;
		}
		else if(document.frm.passwd.value == ""){
			alert("비밀번호를 입력해주세요.");
			return false;
		}
		if((document.frm.passwd.value).search(document.frm.id.value) > -1){
			alert("비밀번호는 ID를 포함할 수 없습니다.");
			return false;
		}
		return true;
	}
</script>
<body>

<form action="validation01_process.jsp" name="frm">
<p> 아이디 : <input type="text" name="id">
<p> 비밀번호 : <input type="text" name="passwd">
<input type="submit" value="전송" onclick="return check();">
</form>

</body>
</html>

validation01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>

<%
Enumeration e = request.getParameterNames();
while(e.hasMoreElements()){
	String name = (String)e.nextElement();
	out.print(name + " : " + request.getParameter(name)+"<br>");
}
%>

</body>
</html>

validation01_process.jsp

5. 비밀번호로 동일한 영문이나 숫자를 3개 이상 사용하지 않도록 다음 조건에 맞게 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>
function check(){
	if(continuous()){
		alert("영문, 숫자는 3자 이상 연속 입력할 수 없습니다.");
		return false;
	}
	if(document.frm.passwd.value != document.frm.passwd2.value){
		alert("비밀번호 확인이 일치하지 않습니다.");
		return false;
	}
	return true;
}

function continuous(){
	var pass = document.frm.passwd.value;
	
	for(var i=0; i<pass.length-3; i++){
		if(pass.charAt(i+1) == (pass.charAt(i)+pass.charAt(i+2))/2){
			return false;
		}
	}
	return true;
}
</script>
<body>

<form action="validation01_process.jsp" name="frm">
<p> 아이디 : <input type="text" name="id">
<p> 비밀번호 : <input type="text" name="passwd">
<p> 비밀번호 확인 : <input type="text" name="passwd2">
<input type="submit" value="전송" onclick="return check();">
</form>

</body>
</html>

validation02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>

<%
Enumeration e = request.getParameterNames();
while(e.hasMoreElements()){
	String name = (String)e.nextElement();
	out.println(name + " = " + request.getParameter(name));
}
%>

</body>
</html>

validation02_process.jsp

6. 비밀번호가 영문, 숫자, 특수기호를 조합한 8자 이상이 되도록 다음 조건에 맞게 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>
function check(){
	var str = /^(?=.*[a-zA-Z]{1,})(?=.*[!@#$%^*+=-]{1,})(?=.*[0-9]{1,}).{8,}$/;
	if(document.frm.passwd.value.length < 8){
		alert("영문+숫자+특수기호 8자리 이상으로 구성하여야합니다.");
		return false;
	}
	if(!str.test(document.frm.passwd.value)){
		alert("영문+숫자+특수기호 8자리 이상으로 구성하여야합니다.");
		return false;
	}
	return true;
}

</script>
<body>

<form action="validation01_process.jsp" name="frm">
<p> 아이디 : <input type="text" name="id">
<p> 비밀번호 : <input type="text" name="passwd">
<p> 비밀번호 확인 : <input type="text" name="passwd2">
<input type="submit" value="전송" onclick="return check();">
</form>

</body>
</html>

validation03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>

<%
Enumeration e = request.getParameterNames();
while(e.hasMoreElements()){
	String name = (String)e.nextElement();
	out.println(name + " = " + request.getParameter(name));
}
%>

</body>
</html>

validation03_process.jsp

7. 다음 조건에 맞게 도서 웹 쇼핑몰을 위한 웹 애플리케이션을 만들고 실행 결과를 확인하시오.

function CheckAddProduct(){
	
	var productId = document.getElementById("productId");
	var name = document.getElementById("name");
	var unitPrice = document.getElementById("unitPrice");
	var unitsInStock = document.getElementById("unitsInStock");
	
	//아이디 체크
	if(!check(/^ISBN[a-zA-Z0-9]{1,8}$/, productId,
		"[도서 코드]\nISBN과 숫자를 조합하여 5~12까지 입력하세요.\n첫글자는 반드시 ISBN로 시작하세요."))
		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(isNaN(unitsInStock.value)){
		alert("[재고 수]\n숫자만 입력하세요.");
		unitsInStock.select();
		unitsInStock.focus();
		return false;
	}
	
	function check(regExp, e, msg){
		if(regExp.test(e.value))
			return true;
		
		alert(msg);
		e.select();
		e.focus();
		return false;
	}
	document.newProduct.submit();
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" 
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="./resources/js/validation.js"></script>
<title>상품 등록</title>

</head>
<body>

<%@ include file="menu.jsp" %>
<div class="jumbotron">
	<div class="contrainer">
		<h1 class="display-3">상품 등록</h1>
	</div>
</div>
<div>
	<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-3">
				<input type="text" name="author" 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="publisher" 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="releaseDate" 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="totalPages" 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="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="unitsInStrock" 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 웹프로그래밍] 7장 연습문제 및 솔루션 총정리

1. 파일 업로드를 위한 form 태그 내에 반드시 설정해야 하는 기법은 무엇인가? form 태그의 action 속성은 파일 업로드를 처리할 페이지를 넣어준다. form 태그의 enctype 속성은 multipart/form-.

tistorysolution.tistory.com

728x90

그리드형

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

[쉽게 배우는 JSP 웹프로그래밍] 10장 연습문제 및 솔루션 총정리 (0)	2021.10.23
[쉽게 배우는 JSP 웹프로그래밍] 9장 연습문제 및 솔루션 총정리 (0)	2021.10.22
[쉽게 배우는 JSP 웹프로그래밍] 7장 연습문제 및 솔루션 총정리 (0)	2021.10.22
[쉽게 배우는 JSP 웹프로그래밍] 6장 연습문제 및 솔루션 총정리 (0)	2021.10.22
[쉽게 배우는 JSP 웹프로그래밍] 5장 연습문제 및 솔루션 총정리 (0)	2021.10.22

문풀이

[쉽게 배우는 JSP 웹프로그래밍] 8장 연습문제 및 솔루션 총정리

1. 유효성 검사란 무엇인가?

2. 유효성 검사를 위한 두 가지 처리 기법을 간단하게 설명하시오.

3. 유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법을 설명하시오.

'IT' 카테고리의 다른 글

댓글

티스토리툴바

[쉽게 배우는 JSP 웹프로그래밍] 8장 연습문제 및 솔루션 총정리

1. 유효성 검사란 무엇인가?

2. 유효성 검사를 위한 두 가지 처리 기법을 간단하게 설명하시오.

3. 유효성 검사를 위한 핸들러 함수와 폼 페이지를 작성하는 기법을 설명하시오.

'IT' 카테고리의 다른 글

관련글

댓글

티스토리툴바