티스토리 뷰

코딩/JSP

웹쇼핑몰 : 상품 등록 데이터의 유효성 검사하기

ehzim 2023. 12. 11. 23:26

 

 

js추가

 

 

vaildation.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 language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="./resources/js/validation.js"></script>
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="menu.jsp"></jsp:include>
	<div class="jumbotron">

		<div class="container">
			<form name="newproduct" action="./processaddproduct.jsp"
			class="form-horizontal" method="post" enctype="multipart/form-data">
				<h1 class="display-3">상품 등록</h1>
				<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" rows="2" cols="50" 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="untisinstock" 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" class="new ">
							신규 제품
							<input type="radio" name="condition" class="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>

 

저작자표시

'코딩 > JSP' 카테고리의 다른 글

[10주 2일차] 다국어 처리 (2)  (0) 2023.12.12
웹쇼핑몰 : 상품 등록 페이지의 다국어 처리하기  (0) 2023.12.12
[10주 1일차] 다국어 처리  (0) 2023.12.11
[10주 1일차] 유효성 검사  (0) 2023.12.11
[9주 5일차] 파일 업로드 (2)  (1) 2023.12.08
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday