JSP, Servlet, MySQL/JSP - webmarket
유효성 검사 : 상품 등록 데이터의 유효성 검사하기 2
샤리미
2023. 9. 9. 15:46
728x90
반응형
=회원가입 폼 페이지에 입력한 데이터 형식 유효성 검사하기=
/ch08/validation05.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<!-- 자바스크립트로 폼 페이지에서 입력 항목의 데이터를 검사하는 핸들러함수를 checkMember()을 작성한다. -->
<script type="text/javascript">
function checkMember() {
var regExpId = /^[a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;//영문 대소문자,한글자음모음 검사용 정규표현식
var regExpName = /^[가-힣]*$/;//이름에대해 한글만 검사하는 정규표현식
var regExpPasswd = /^[0-9]*$/;//숫자만
var regExpPhone = /^\d{3}-\d{3,4}-\d{4}$/;//전화번호 형태인지 검사하는 정규표현식
var regExpEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;//이메일 형태인지 검사
var form = document.Member;
//폼 페이지에서 입력항목인 아이디, 이름, 비밀번호,전화번호,이메일 등의 입력데이터를 저장한다.
var id = form.id.value;
var name = form.name.value;
var passwd = form.passwd.value;
var phone = form.phone1.value+"-"+form.phone2.value+"-"+form.phone3.value;
var email = form.email.value;
if(!regExpId.test(id)){//입력된 아이디가 위 11행의 정규 표현식에 해당하는지 검사. 해당하지않으면 아래 경고창 및 해당 입력 항목에 커서.
alert("아이디는 문자로 시작햐!");
form.id.select();
return;
}
if(!regExpName.test(name)){//입력된이름이 위 12행의 정규 표현식에 해당하는지 검사. 해당하지않으면 아래 경고창 및 해당 입력 항목에 커서.
alert("이름은 한글만 입력햐");
return;
}
if(!regExpPasswd.test(passwd)){//입력된 비밀번호가 위 13행의 정규 표현식에 해당하는지 검사. 해당하지않으면 아래 경고창 및 해당 입력 항목에 커서.
alert("비밀번호는 숫자만 입력해줘..");
return;
}
if(!regExpPhone.test(phone)){//입력된 전화번호가위 14행의 정규 표현식에 해당하는지 검사. 해당하지않으면 아래 경고창 및 해당 입력 항목에 커서.
alert("연락처 입력을 확인해봐");
return;
}
if(!regExpEmail.test(email)){//입력된이메일이 위 15행의 정규 표현식에 해당하는지 검사. 해당하지않으면 아래 경고창 및 해당 입력 항목에 커서.
alert("이메일 똑바로 입력해라");
return;
}
form.submit(); //폼페이지에 입력된 데이터 값을 서버로 전송한다.
}
</script>
<body>
<h3>회원 가입</h3>
<form action="validation05_process.jsp" name="Member" method="post">
<p> 아이디 : <input type="text" name="id">
<p> 비밀번호 : <input type="password" name="passwd">
<p> 이름 : <input type="text" name="name">
<p> 연락처 : <select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
<p> 이메일 : <input type="text" name="email">
<p> <input type="submit" value="가입하기" onclick="checkMember()">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
ch08/validation05_process.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Validation</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
%>
<p> 아이디 : <%=request.getParameter("id")%>
<p> 비밀번호 : <%=request.getParameter("passwd")%>
<p> 이름 : <%=request.getParameter("name")%>
<p> 연락처 : <%=request.getParameter("phone1")%>-<%=request.getParameter("phone2")%>-<%=request.getParameter("phone3")%>
<p> 이메일 : <%=request.getParameter("email")%>
</body>
</html>
다시 확인했는데도, 틀린게 없다....... 나중에 다시보자.. 정신차리고 다시봐..
NOTE_자주 사용되는 패턴
다음은 폼페이지에 입력 양식의 데이터 형식으로 주로 사용되는 정규 표현식의 예이다
| 데이터 형식 | 패턴 |
| 숫자만 | ^[0-9]*$ |
| 영문자만 | ^[a-zA-Z]*$ |
| 한글만 | ^[가-힣]*$ |
| 영문자와 숫자만 | ^[a-zA-Z0-9]*$ |
| 이메일 | /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i |
| 휴대전화 | ^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$ ^\d{3}-\d{3,4}-\d{4}$ |
| 전화번호 | ^\d{2,3}-\d{3,4}-\d{4}$ |
| 주민등록번호 | \d{6}\-[1-4]\d{6} |
| IP주소 | ([0-9]{1,3})\.([0-9]{1,3})\([0-9]{1,3})\.([0-9]{1,3}) |
| URL | ^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.$ |
| 날짜 | ^\d{1,2}\/\d{1,2}\/\d{2,4}$ |
http://regexlib.com 에서 다양한 정규 표현식을 얻을 수 있다.
04. 웹쇼핑몰 : 상품 등록 데이터의 유효성 검사하기
=상품 등록 페이지의 유효성 검사하기=
1. 자바스크립트 관리 폴더 만들기: /resources/폴더에 자바스크립트 파일 폴터를 만들고 js 에 validarion.js 파일을 생성한다.
2. 유효성 검사흘ㄹ 위한 핸들러 함수 작성하기
function CheckAddProduct(){
//폼 페이지에서 유효성 검사를 위한 입력 항목인 상품 아이디, 상품명,가격,재고 수 등의 id 속성값으로 입력 데이터를 가져올 수 있도록
// getElementById()메소드를 작성한다.
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(uniPrice.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();
unitInStock.focus();
return false;
}
//입력 항목에 대해 정규 표현식으로 검사하여 오류가 있으면 오퓨 메시지를 출력하고 해당 입력 항목에 커서가 놓이도록 check()함수를 작성한다.
function check(regExp,e,msg){
if(regExp.test(e.value)){
return true;
}
alert(msg);
e.select();
e.focus();
return false;
}
document.newProduct.submit() //폼 페이지에 입력된 데이터 값을 서버로 전송한다.
}3. 상품 등록 페이지 수정하기 : addProduct.jsp 파일 수정
<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css">
<!-- 폼 페이지에 입력 항목의 데이터를 검사하는 핸들러 함수가 저장된 바바스크립트 파일 validation.js를 가져오도록 작성 -->
<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">
<!-- 파일업로드를 위한 폼 태그에 enctype 속성값을 추가로 작성해준다. -->
<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" name="productId" 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" name="name" 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" name="unitPrice" id="unitPrice" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상세 정보</label>
<div class="col-sm-3">
<textarea name="description" cols="50" rows="2" class="form-control"></textarea><!-- 상품 설명값을 여러줄로 입력받도록 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" name="unitInStock" id="unitInStock" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상태</label> <!-- 상품 상태값중 하나만 선택 입력받도록 radio로 작성 -->
<div class="col-sm-5">
<input type="radio" name="condition" value="New"> 신규 제품
<input type="radio" name="condition" value="Ole"> 중고 제품
<input type="radio" name="condition" value="Refurbished"> 재생 제품
</div>
</div>
<!-- 파일을 입력받도록 input 태그의 type 속성값을 file로 작성, name 속성을 작성한다. -->
<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">
<!-- <등록>을 클릭하면 핸들러 함수CheckAddProduct()가 실행되도록 onclick속성을 작성한4ㄷ -->
<input type="button" class="btn btn-primary" value="등록" onClick="CheckAddProduct()">
</div>
</div>
</form>
</div>
</body>
</html>
요약
01. 유효성 검사의 개요
- 유효성 검사는 사용자가 폼 페이지에서 입력한 데이터 값이 서버로 전송되기 전에 특정 규칙에 맞게 입력되었는지 검증하는 것을 말한다.
- 유효성 검사를 위한 핸들러 함수는 폼 페이지에서 이벤트가 발생했을 때 (<submit>를 클릭한 경우)의 유효성 검사를 위해 매핑하는 메소드이다
02. 기본 유효성 검사
- 기본 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 있는지 없는지 확인하고 데이터 길이, 숫자 등 기본적인 것이 맞는지 검사한다.
- 데이터 값의 유무에 대한 검사에서는 예를 들어 회원 가입 페이지에서 사용자가 아이디와 비밀번호 등의 필수 입력 항목을 입력하지 않고 <전송>을 클릭하면 입력하지 않았다는 오류 메시지가 나타난다.
- 데이터 길이에 대한 검사는 회원 가입 페이지에서 아이디, 비밀번호 등과 같은 입력 데이터의 제한 길이를 확인한다.
- 숫자 여부는 isNaN()함수를 활용하여 검사한다.
03. 데이터 형식 유효성 검사
- 데이터 형식 유효성 검사는 사용자가 폼 페이지의 입력 항목에 입력한 데이터 값이 특정 형태에 적합한지 검사하기 위해 정규 표현식을 사용하는 방법으로 기본 유효성 검사보다 복잡하다.
- 정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다
- 정규 표현석에서 사용하는 기호를 메타 문자라고 한다. 메타 문자는 정규 표현식 내부에서 특정한 의미를 가진 문자이다.
728x90
반응형