🌐JSP

[쉽게 배우는 JSP 웹 프로그래밍] 8장 정리, 연습문제

자바스크립트를 이용한 웹 폼의 유효성 검사에 대한 내용을 다루고 있습니다. 핸들러 함수는 이벤트 발생 시 유효성 검사를 위해 사용되며, 이를 통해 서버 부하를 줄이고 처리 속도를 빠르게 할 수 있습니다. 기본 유효성 검사는 사용자의 입력 데이터의 존재 여부와 기본적인 형식을 검사합니다. 데이터 형식 유효성 검사는 정규 표현식을 사용하여 사용자 입력이 특정 형태에 적합한지 검사합니다.
Feb 23, 2024
[쉽게 배우는 JSP 웹 프로그래밍] 8장 정리, 연습문제
Contents
유효성 검사를 위한 핸들러 함수Validation01.jsp핵심 키워드기본 유효성 검사Validation02.jspValidation02_process.jsp핵심 키워드데이터 형식 유효성 검사Validation05.jspValidation05_process.jsp핵심 키워드연습문제practice01.jsppractice04.jsppractice04_process.jsppractice05.jsppractice06.jsppractice07validation.jsaddBook.jspaddBook.jsp결론

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

Validation01.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Validation</title>
</head>
<body>
	<form name="loginForm" onsubmit="return checkform()">
		<p>
			아 이 디 :<input type="text" name="id">
		<p>
			비밀번호 :<input type="password" name="passwd">
		<p>
			<input type="submit" value="전송">
	</form>
	<script>
		function checkform() {
			alert("아이디 : " + document.loginForm.id.value + "\n" + "비밀번호 : "
					+ document.loginForm.passwd.value);
		}
	</script>
</body>
</html>
 

핵심 키워드

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

기본 유효성 검사

Validation02.jsp

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

<body>
	<form name="loginForm" action="validation02_process.jsp" method="post" onsubmit="return checkform();">
		<p> 아 이 디 :<input type="text" name="id">
		<p> 비밀번호 :<input type="password" name="passwd">
		<p><input type="submit" value="전송">
	</form>
	<script>
		function checkform(){
			var form = document.loginForm;
			/*if(form.id.value.length<4 || form.id.value.length>12){
				alert("아이디는 4~12자 이내로 입력 가능합니다!");
				form.id.focus();
				return false;
			}else if(form.passwd.value.length<4){
				alert("비밀번호는 4자 이상으로 입력해야 합니다!");
				form.passwd.focus();
				return false;
			}*/
			
			for(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 false;
				}
			}
			if(isNaN(form.passwd.value)){
				alert("비밀먼호는 숫자만 입력 가능합니다!");
				form.passwd.select();
				return false;
			}
		}
	</script>
</body>
</html>

Validation02_process.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<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>
 

핵심 키워드

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

데이터 형식 유효성 검사

Validation05.jsp

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

<body>
	<h3>회원 가입</h3>
	<form name="Member" action="validation05_process.jsp" method="post"
		onsubmit="return checkMember();">
		<p>
			아이디 : <input type="text" name="id">
		<p>
			비밀번호 : <input type="password" name="passwd">
		<p>
			이름 : <input type="text" name="name">
		<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>
			이메일 : <input type="text" name="email">
		<p>
			<input type="submit" value="가입하기">
	</form>
	<script>
		function checkMember() {
			var regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
			var regExpName = /^[가-힣]*$/;
			var regExpPasswd = /^[0-9]*$/;
			var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;
			var regExpEmail = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;

			var form = document.Member;
			var id = form.id.value;
			var name = form.name.value;
			var passwd = form.passwd.value;
			var phone = form.phone1.value + "-" + form.phone2.value + "-"
					+ form.phone3.value;
			var email = form.email.value;

			if (!regExpId.test(id)) {
				alert("아이디는 문자로 시작해주세요!");
				form.id.select();
				return false;
			}
			if (!regExpName.test(name)) {
				alert("이름은 한글만 입력해주세요!");
				return false;
			}
			if (!regExpPasswd.test(passwd)) {
				alert("비밀번호는 숫자만 입력해주세요!");
				return false;
			}
			if (!regExpPhone.test(phone)) {
				alert("연락처 입력을 확인해주세요!");
				return false;
			}
			if (!regExpEmail.test(email)) {
				alert("이메일 입력을 확인해주세요!");
				return false;
			}
		}
	</script>
</body>
</html>

Validation05_process.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>Validation</title>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");
	%>
	<p>아이디 : <%=request.getParameter("id") %>
	<p>비밀번호 : <%=request.getParameter("passwd") %>
	<p>이름 : <%=request.getParameter("name") %>
	<p>연락처 : <%=request.getParameter("phone1")%>-<%=request.getParameter("phone2")%>-<%=request.getParameter("phone3")%>
	<p>연락처 : <%=request.getParameter("email")%>
</body>
</html>
 

핵심 키워드

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

연습문제

practice01.jsp

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

02	기본 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인
	것이 맞는지 검사한다. 데이터 형식 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지
	검사하시 위해 정규 표현식을 사용하는 방법이다.
	
03	1. input 태그의 type 속성 값이 submit인 경우 onclick 속성을 이용하여 핸들러 함수를 설정한다. 또는 form 태그의
	    onsubmit 속성 값에 설정한다.
		2. 자바스크립트를 이용하여 <script>...</script> 내에 핸들러 함수를 작성한다. <script>...</script> 구문은
	    JSP 페이지 어디에 위치해도 된다.
		3. 폼 페이지에서 입력된 데이터 값을 핸들러 함수로 가져오기 위해 form 태그의 name 속성 또는 forms 객체를 이용한다.
	    forms 객체를 이용하는 경우, forms 객체는 배열의 형태이기 때문에 length 속성으로 크기를 알 수 있고 배열 값인 
	    index는 form 태그가 나타나는 순서로 0부터 시작한다.

practice04.jsp

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

<body>
	<form name="loginForm" action="practice04_process.jsp" method="post" onsubmit="return checkform();">
		<p> 아 이 디 :<input type="text" name="id">
		<p> 비밀번호 :<input type="password" name="passwd">
		<p><input type="submit" value="전송">
	</form>
	<script>
		function checkform(){
			var form = document.loginForm;
			if(form.id.value.length==0){
				alert("아이디를 입력해주세요");
				form.id.focus();
				return false;
			}else if(form.passwd.value.length==0){
				alert("비밀번호를 입력해주세요");
				form.passwd.focus();
				return false;
			}else if(form.passwd.value.includes(form.id.value)){
				alert("비밀번호는 ID를 포함할 수 없습니다");
				form.passwd.focus();
				return false;
			}
		}
	</script>
</body>
</html>

practice04_process.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<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>

practice05.jsp

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

<body>
	<form name="loginForm" action="practice04_process.jsp" method="post" onsubmit="return checkform();">
		<p> 아 이 디 :<input type="text" name="id">
		<p> 비밀번호 :<input type="password" name="passwd">
		<p> 비밀번호 확인 :<input type="password" name="passwdCheck">
		<p><input type="submit" value="전송">
	</form>
	<script>
		function checkform(){
			var form = document.loginForm;
			if (/(\w)\1\1/.test(form.passwd.value)) {
				alert("영문, 숫자는 3자 이상 연속 입력할 수 없습니다");
				form.passwd.focus();
				return false;
			}  else if (form.passwd.value != form.passwdCheck.value) {
				alert("비밀번호가 일치하지 않습니다.");
				form.passwdCheck.focus();
				return false;
			}
		}
	</script>
</body>
</html>

practice06.jsp

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

<body>
	<form name="loginForm" action="practice04_process.jsp" method="post" onsubmit="return checkform();">
		<p> 아 이 디 :<input type="text" name="id">
		<p> 비밀번호 :<input type="password" name="passwd">
		<p> 비밀번호 확인 :<input type="password" name="passwdCheck">
		<p><input type="submit" value="전송">
	</form>
	<script>
		function checkform(){
			var form = document.loginForm;
			if (!/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/.test(form.passwd.value)) {
				alert("영문+숫자+특수기호 8자리 이상으로 구성하여야 합니다");
				form.passwd.focus();
				return false;
			}  else if (form.passwd.value != form.passwdCheck.value) {
				alert("비밀번호가 일치하지 않습니다.");
				form.passwdCheck.focus();
				return false;
			}
		}
	</script>
</body>
</html>

practice07

validation.js

function CheckAddBook() {
	var bookId = document.getElementById("bookId");
	var name = document.getElementById("name");
	var unitPrice = document.getElementById("unitPrice");
	var unitsInStock = document.getElementById("unitsInStock");

	//상품 아이디 체크
	if (!check(/^ISBN[0-9]{4,11}$/, bookId, "[도서코드]\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;
	}
	
	document.newProduct.submit()
}

function check(regExp, e, msg){
		if(regExp.test(e.value)){
			return true;
		}
		alert(msg);
		e.select();
		e.focus();
		return false;
	}

addBook.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<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>
	<fmt:setLocale value='<%=request.getParameter("language")%>' />
	<fmt:bundle basename="bundle.message">
		<jsp:include page="menu.jsp" />
		<div class="jumbotron">
			<div class="container">
				<h1 class="display-3">
					<fmt:message key="title" />
				</h1>
			</div>
		</div>
		<div class="container">
			<div class="text-right">
				<a href="?language=ko">Korean</a>|<a href="?language=en">English</a>
			</div>
			<form name="newProduct" action="./processAddBook.jsp"
				class="form-horizontal" method="post" enctype="multipart/form-data">
				<div class="form-group row">
					<label class="col-sm-2"><fmt:message key="bookId" /></label>
					<div class="col-sm-3">
						<input type="text" id="bookId" name="bookId" class="form-control">
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-2"><fmt:message key="name" /></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"><fmt:message key="unitPrice" /></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"><fmt:message key="author" /></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"><fmt:message key="publisher" /></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"><fmt:message key="releaseDate" /></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"><fmt:message key="totalPages" /></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"><fmt:message key="description" /></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"><fmt:message key="category" /></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"><fmt:message key="unitsInStock" /></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"><fmt:message key="condition" /></label>
					<div class="col-sm-5">
						<input type="radio" name="condition" value="New ">
						<fmt:message key="condition_New" />
						<input type="radio" name="condition" value="Old ">
						<fmt:message key="condition_Old" />
						<input type="radio" name="condition" value="Refurbished ">
						<fmt:message key="condition_Refurbished" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-2"><fmt:message key="bookImage" /></label>
					<div class="col-sm5">
						<input type="file" name="bookImage" class="form-control">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-sm-offset-2 col-sm-10">
						<input type="submit" class="btn btn-primary"
							value="<fmt:message key="button" />" onclick="CheckAddBook()">
					</div>
				</div>
			</form>
		</div>
	</fmt:bundle>
</body>
</html>

addBook.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<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">
			<div class="text-right">
				<a href="?language=ko">Korean</a>|<a href="?language=en">English</a>
			</div>
			<form name="newProduct" action="./processAddBook.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="bookId" name="bookId" 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="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 ">
						E-Book
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-2">이미지</label>
					<div class="col-sm5">
						<input type="file" name="bookImage" class="form-control">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-sm-offset-2 col-sm-10">
						<input type="submit" class="btn btn-primary"
							value="등록" onclick="CheckAddBook()">
					</div>
				</div>
			</form>
		</div>
</body>
</html>
 

결론

해당 코드를 작성하면서 유효성 검사의 개념, 유효성 검사를 위한 핸들러 함수의 작성 방법, 유효성 검사를 처리하는 방법을 익힐 수 있었다.
Share article

More articles

See more posts

[programmers] 짝지어 제거하기 - Java

February 25, 2024
[programmers] 짝지어 제거하기 - Java

[programmers] 크기가 작은 부분 문자열 - Java

February 23, 2024
[programmers] 크기가 작은 부분 문자열 - Java

[programmers] 3진법 뒤집기 - Java

February 22, 2024
[programmers] 3진법 뒤집기 - Java

[쉽게 배우는 JSP 웹 프로그래밍] 7장 정리, 연습문제

February 22, 2024
[쉽게 배우는 JSP 웹 프로그래밍] 7장 정리, 연습문제

👨🏻‍💻DriedPollack's Blog

RSS·Powered by Inblog