스프링

[스프링] 15장 쇼핑몰 시스템4

반응형

 

상품 등록 시 유효성 검사 실시

 

 

addProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<title></title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
// 동일 jsp 내에 1개의 달러function
// document 내의 모든 요소들이 로딩된 후에 실행
$(function(){
	console.log("개똥이");
	
	// object를 선택(<input type="file" ..)
	$("#productImage").on("change", handleImg);
	
	// e : onchange 이벤트
	function handleImg(e) {
		console.log("파일 선택 이벤트");
		//e.target : <input type="file" id="productImage" name="productImage" class="form-control"...
		let files = e.target.files; // 파일들
		
		// fileArr = [a.jpg, b.jpg, c.jpg]
		let fileArr = Array.prototype.slice.call(files);
		
		// f : 파일(a.jpg)
		fileArr.forEach(function(f) {
			// 이미지 체킹 (MIME타입)
			if(!f.type.match("image.*")) {
				alert("이미지만 가능합니다.");
				return; // handleImg함수 자체를 종료
			}
			// 이미지가 맞다면
			let reader = new FileReader();
			
			//e : reader가 이미지 객체를 읽는 이벤트
			reader.onload = function(e) {
				let img_html = "<img src='" + e.target.result + "' style='width:100%' />";
				// <p id="pImg"><img src='oewrpasdofiasdo..' ../></p>
				// 요소.append : 누적, 요소.html : 새로고침 , 요소.innerHTML : Javascript에서 새로고침
				$("#pImg").append(img_html);
			}
			reader.readAsDataURL(f);
		});
	}
});

function CheckAddProduct() {
	console.log("개또잉");
	
	//상품 아이디 체크. 
	//1) 첫글자는 P.  2) 숫자를 조합하여 5~12자까지 입력 가능
	//i) P1234 => if(!true) => if(false) => if문을 건너뜀
	//ii) S1234 => if(!false) => if(true) => if문을 수행
	let regExpProductId = /^P[0-9]{4,11}$/;
	let productId = document.newProduct.productId.value;
	console.log("productId : " + productId);
	if(!regExpProductId.test(productId)) {
		alert("[상품 코드]\nP와 숫자를 조합하여 5~12자까지 입력해주세요");
		return;
	}
	
	// 상품명 체크
	// 4 ~ 12자까지 입력 가능
	// ex) 삼성갤럭시S22
	let regExpPname = /[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣0-9]{4,12}/;
	let pname = document.newProduct.pname.value;
	console.log("pname : " + pname);
	if(pname.length<4||pname.length>12) {
		alert("[상품명]\n최소 4자에서 최대 12자까지만 입력해주세요");
		document.newProduct.pname.select();
		document.newProduct.pname.focus();
		return;
	}
	
	// 상품 가격 체크
	// 숫자만 입력 가능
	let unitPrice = document.newProduct.unitPrice.value;
	console.log("unitPrice : " + unitPrice);
	if(unitPrice == 0 || isNaN(unitPrice)) {
		alert("[가격]\n숫자만 입력해주세요");
		document.newProduct.unitPrice.select();
		document.newProduct.unitPrice.focus();
		return;
	}
	
	// -12000 막아보자
	if(unitPrice < 0) {
		alert("[가격]\n음수는 입력할 수 없습니다.");
		document.newProduct.unitPrice.select();
		document.newProduct.unitPrice.focus();
		return;
	}
	
	// 소수점 2자리까지만 허용
	// i) 120000.35 (O)
	// ii) 120000.2234242 (X)
	// 역슬러시d : 숫자
	// + : 1이상, * : 0이상
	// ? : 있어도 되고, 없어도 됨
	// 숫자로 시작하는데(숫자가 한 자리 이상 반복) 소수점이 있어도 되고, 없어도 된다. 소수 첫째자리나 둘째자리가 있어도 되고 없어도 된다.  ?
	let regExpUnitPrice = /^\d+(?:[.]?[\d]?[\d])?$/;
	if(!regExpUnitPrice.test(unitPrice)) {
		alert("[가격]\n소수점 둘째 자리까지만 입력해주세요.")
		document.newProduct.unitPrice.select();
		document.newProduct.unitPrice.focus();
		return;
	}
	
	let unitsInStock = document.newProduct.unitsInStock.value;
	console.log("unitsInStock : " + unitsInStock);
	if(unitsInStock.length == 0 || isNaN(unitsInStock)) {
		alert("[재고 수]\n숫자만 입력해주세요");
		document.newProduct.unitsInStock.select();
		document.newProduct.unitsInStock.focus();
		return;
	}
	
	// <form name="newProduct" ..
	document.newProduct.submit();
}

</script>
</head>
<body>
	<!-- include 액션 태그 -->
	<jsp:include page="menu.jsp" />

	<!-- --------------------상품등록 시작-------------------- -->
	<div class="jumbotron">
	   <!-- container : 이 안에 내용있다 -->
	   <div class="container">
	      <h1 class="display-3">상품 등록</h1>
	   </div>
	</div>
	<!-- 내용 -->
	<div class="container">
		<!-- 폼태그, 폼페이지 -->
		<form name="newProduct" action="processAddProduct.jsp" method="post"
			class="form-horizontal" enctype="multipart/form-data">
			<div class="form-group row">
				<!-- 후보키(N.N, N.D) -> 중 1 속성 선택 -> 기본키(N.N, N.D) -->
				<label class="col-sm-2">상품 아이디</label>
				<div class="col-sm-3">
					<input type="text" id="productId" name="productId"
						class="form-controler" placeholder="상품 아이디" required/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품 명</label>
				<div class="col-sm-3">
					<input type="text" id="pname" name="pname"
						class="form-controler" placeholder="상품 명" required/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품 가격</label>
				<div class="col-sm-3">
					<input type="number" id="unitPrice" name="unitPrice"
						class="form-controler" placeholder="상품 가격" required/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품 설명</label>
				<div class="col-sm-3">
					<input type="text" id="description" name="description"
						class="form-controler" placeholder="상품 설명" required/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">제조사</label>
				<div class="col-sm-3">
					<input type="text" id="manufacturer" name="manufacturer"
						class="form-controler" placeholder="제조사"/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">분류</label>
				<div class="col-sm-3">
					<input type="text" id="category" name="category"
						class="form-controler" placeholder="분류"/>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">재고 수</label>
				<div class="col-sm-3">
					<input type="number" id="unitsInStock" name="unitsInStock"
						class="form-controler" placeholder="재고 수"/>
				</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" id="condition1"/><label for="condition1">신상품</label>
					<input type="radio" name="condition" value="Old" id="condition2"/><label for="condition3">중고</label>
					<input type="radio" name="condition" value="Refurbished" id="condition3"/><label for="condition3">재생품</label>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">제품 이미지</label>
				<div class="col-sm-5">
				<p id="pImg"></p>
					<input type="file" id="productImage" name="productImage" class="form-control" 
						placeholder="제품 이미지" multiple/>
				</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()"/>
					<button type="button" class="btn btn-info" 
						onclick="javascript:location.href='products.jsp'">목록보기</button>
				</div>
			</div>
		</form>
	</div>
	
	<jsp:include page="footer.jsp" />
</body>
</html>

 

결과 화면1

 

 

반응형

'스프링' 카테고리의 다른 글

[스프링] 16.5장 과제  (0) 2024.04.15
[스프링] 16장 시큐리티, 쇼핑몰 시스템5(시큐리티 작업)  (0) 2024.04.15
[스프링] 14장 정규 표현식  (0) 2024.04.12
[스프링] 13장 유효성 검사  (0) 2024.04.11
[스프링] 11장 파일 업로드  (0) 2024.04.09

티스토리툴바