개발로그필름

[쉽게 배우는 JSP 웹 프로그래밍] 8장 웹 쇼핑몰 예제 코드 본문

IT/쉽게 배우는 JSP 웹 프로그래밍

[쉽게 배우는 JSP 웹 프로그래밍] 8장 웹 쇼핑몰 예제 코드

yuullog 2022. 12. 1. 14:04
728x90
반응형
SMALL

WebMarket/WebContent/resources/js/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자에서 최대 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();
}

 

WebMarket/WebContent/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" 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-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" 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 clss="col-sm-5">
					<input type="file" name="productImage" class="form-control">
				</div>
				<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>

 

반응형
LIST
저작자표시 비영리 변경금지

'IT > 쉽게 배우는 JSP 웹 프로그래밍' 카테고리의 다른 글

[쉽게 배우는 JSP 웹 프로그래밍] 10장 웹 쇼핑몰 예제 코드  (0) 2022.12.04
[쉽게 배우는 JSP 웹 프로그래밍] 9장 웹 쇼핑몰 예제 코드  (0) 2022.12.03
[쉽게 배우는 JSP 웹 프로그래밍] 7장 웹 쇼핑몰 예제 코드  (1) 2022.11.30
[쉽게 배우는 JSP 웹 프로그래밍] 6장 웹 쇼핑몰 예제 코드  (0) 2022.11.29
[쉽게 배운는 JSP 웹 프로그래밍] 5장 웹 쇼핑몰 예제 코드  (0) 2022.11.27
'IT/쉽게 배우는 JSP 웹 프로그래밍' Related Articles more
Comments