상품 등록 페이지의 유효성 검사하기
1. 자바스크립트 관리 폴더 만들기 : /WebContent/resources/ 폴더에 자바스크립트 파일을 관리하는 js 폴더를 만들고 이 폴더에 validation.js 파일 생성
2. 유효성 검사를 위한 핸들러 함수 작성
validation.js
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자에서 최대 50자까지 입력하세요");
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()
}
상품 등록 페이지 수정
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" 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" 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" 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" 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>
'Study > WebServer' 카테고리의 다른 글
| [웹 쇼핑몰 실습] 장바구니 페이지 만들기 (0) | 2021.08.22 |
|---|---|
| [웹 쇼핑몰 실습] 로그 기록하기 (0) | 2021.08.22 |
| [웹 쇼핑몰 실습] 상품 이미지 등록하기 (0) | 2021.08.22 |
| [웹 쇼핑몰 실습] 상품 등록 페이지 만들기 (0) | 2021.08.22 |
| [웹 쇼핑몰 실습] 상품 상세 정보 표시 (0) | 2021.08.22 |