K 개발자
JSP BookMarket 만들기 - 7 본문
이전 글
JSP BookMarket 만들기 - 1
JSP BookMarket 만들기 - 2
JSP BookMarket 만들기 - 3
JSP BookMarket 만들기 - 4
JSP BookMarket 만들기 - 5
JSP BookMarket 만들기 - 6
실행 환경
자바 개발 환경 : jdk-15.0.2
웹 서버 환경 : Apache Tomcat v9.0
통합 개발 환경 : Eclipse IDE for Enterprise Java Developers
도서 등록 데이터의 유효성 검사하기
WebContent/resources 폴더에 자바스크립트 파일을 관리하는 js 폴더를 생성하고 이 폴더에 validation.js 파일을 생성한다.
생성된 validation.js 파일에 유효성 검사를 위한 핸들러 함수를 작성한다.
- 도서 아이디가 ISBN으로 시작되고 숫자를 포함하며 문자 길이가 5~12자인지 검사한다.
- 도서명의 문자 길이가 4~12자인지 검사한다.
- 가격의 문자 길이가 0인지 숫자인지 검사한다.
- 가격이 음수인지 검사한다.
- 재고 수가 숫자인지 검사한다.
// validation.js
function CheckAddBook() {
var bookId = document.getElementById("bookId"); // 도서 아이디
var name = document.newBook.name.value; // 도서명
var unitPrice = document.newBook.unitPrice.value; // 가격
var unitsInStock = document.newBook.unitsInStock.value; // 재고 수
if (!check(/^ISBN[0-9]{1,8}$/, bookId, "[도서코드]\nISBN과 숫자를 조합하여 5~12자까지 입력하세요.\n첫글자는 반드시 ISBN으로 시작하세요."))
return false;
if (name.length < 4 || name.length > 12) { // 도서명의 문자 길이가 4~12자인지 유효성 검사
alert("도서명은 4~12자까지 입력 가능합니다.");
document.newBook.name.select();
document.newBook.name.focus();
return false;
}
if (unitPrice.length == 0 || isNaN(unitPrice)) { // 가격의 문자 길이가 0인지 숫자인지 유효성 검사
alert("가격은 숫자를 입력해야 합니다.");
document.newBook.unitPrice.select();
document.newBook.unitPrice.focus();
return false;
}
if (unitPrice < 0) { // 가격이 음수인지 유효성 검사
alert("가격에 음수는 입력 불가능합니다.");
document.newBook.unitPrice.select();
document.newBook.unitPrice.focus();
return false;
}
if (isNaN(unitsInStock)) { // 재고 수가 숫자인지 유효성 검사
alert("재고 수에 숫자만 입력 가능합니다.");
document.newBook.unitsInStock.select();
document.newBook.unitsInStock.focus();
return false;
}
function check(regExp, e, msg) {
if (regExp.test(e.value)) { // 정규 표현식 검사
return true;
}
// 오류 시
alert(msg); // 에러 메시지 msg 출력
e.select(); // 입력 항목 선택
e.focus(); // 입력 항목 커서 맞춤
return false;
}
document.newBook.submit();
}WebContent 폴더의 addBook.jsp 파일을 수정한다.
- 폼 페이지에서 입력되는 도서 아이디, 도서명, 가격, 재고 수의 유효성 검사를 위해 핸들러 함수가 저장되어 있는 validation.js 파일을 연결하도록 작성한다.
- <등록>을 클릭하면 핸들러 함수가 실행되도록 onclick 속성을 작성한다.
<%-- addBook.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-4">도서 등록</h1>
</div>
</div>
<div class="container">
<form name="newBook" 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" placeholder="100자 이상 적어주세요"></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="EBook">E-Book
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">이미지</label>
<div class="col-sm-5">
<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="button" class="btn btn-primary" value="등록"
onclick="CheckAddBook()">
</div>
</div>
</form>
</div>
</body>
</html>웹 브라우저에 'http://localhost:8080/BookMarket/addBook.jsp'를 입력하고 도서 정보를 등록한다.
다음 글
JSP BookMarket 만들기 - 8
JSP BookMarket 만들기 - 9
JSP BookMarket 만들기 - 10
JSP BookMarket 만들기 - 11
JSP BookMarket 만들기 - 12
JSP BookMarket 만들기 - 13
JSP BookMarket 만들기 - 마지막
'Web > JSP' 카테고리의 다른 글
| JSP BookMarket 만들기 - 9 (0) | 2021.08.06 |
|---|---|
| JSP BookMarket 만들기 - 8 (0) | 2021.08.06 |
| JSP BookMarket 만들기 - 6 (0) | 2021.08.06 |
| JSP BookMarket 만들기 - 5 (0) | 2021.08.06 |
| JSP BookMarket 만들기 - 4 (0) | 2021.08.06 |
'Web/JSP' Related Articles
more
Comments