function CheckAddBook() {
let bookId = document.getElementById("byId");
let name = document.getElementById("name");
let unitPrice = document.getElementById("unitPrice");
let unitsInStock = document.getElementById("unitsInStock");
let description = document.getElementById("description");
// 도서 아이디 체크
if (!check(/^ISBN[0-9]{4,11}$/, bookId, "[도서 코드]\nISBN과 숫자를 조합하여 5~12자까지 입력하세요\n첫 글자는 반드시 ISBN으로 시작하세요")) {
return false;
}
// 도서명 체크
if (name.value.length < 4 || name.value.length > 50) {
alert("[도서명]\n최소 4자에서 최대 50자까지 입력하세요");
name.focus();
return false;
}
// 도서 가격 체크
if (unitPrice.value.length==0 || isNaN(unitPrice.value)) {
alert("[가격]\n숫자만 입력하세요");
unitPrice.focus();
return false;
}
if (unitPrice.value < 0) {
alert("[가격]\n음수를 입력할 수 없습니다.");
unitPrice.focus();
return false;
}
// 재고 수 체크
if (isNaN(unitsInStock.value)) {
alert("[재고 수]\n숫자만 입력하세요");
unitsInStock.focus();
return false;
}
if (description.value.length < 100) {
alert("[상세설명]\n최소 100자 이상 입력하세요");
description.focus();
return false;
}
function check(regExp, e, msg) {
if (regExp.test(e.value)) {
return true;
}
alert(msg);
e.focus();
return false;
}
document.newBook.submit();
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<link href="./resources/css/bootstrap.min.css"/>
<script type="text/javascript" src="./resources/js/validation.js"></script>
<meta charset="UTF-8">
<title>도서 등록</title>
</head>
<body>
<div class="container py-4">
<%@include file="menu.jsp" %>
<div>
<div>
<h1>도서 등록</h1>
<p>Book Addition</p>
</div>
</div>
<div class="row align-items-md-stretch">
<form name="newBook" action="./processAddBook.jsp" class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="mb-3 row">
<label class="col-sm-2">도서코드</label>
<div class="col-sm-3">
<input type="text" id="byId" name="bookId" class="form-control">
</div>
</div>
<div class="mb-3 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="mb-3 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="mb-3 row">
<label class="col-sm-2">저자</label>
<div class="col-sm-3">
<input type="text" name="author" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">출판사</label>
<div class="col-sm-3">
<input type="text" name="publisher" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">출판일</label>
<div class="col-sm-3">
<input type="text" name="releaseDate" class="form-control">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">상세정보</label>
<div class="col-sm-5">
<textarea id="description" name="description" cols="50" rows="2" class="form-control" placeholder="100자 이상 적어주세요"></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2">분류</label>
<div class="col-sm-3">
<input type="text" name="category" class="form-control">
</div>
</div>
<div class="mb-3 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="mb-3 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="mb-3 row">
<label class="col-sm-2">이미지</label>
<div class="col-sm-5">
<input type="file" name="BookImage" class="form-control">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-primary" value="등록" onclick="CheckAddBook()">
</div>
</div>
</form>
</div>
<jsp:include page="footer.jsp"/>
</div>
</body>
</html>
값을 제대로 입력 하지 않았을때 나타나는 alert
