본문으로 바로가기

(Java)JSP 빈즈를 이용한 회원가입폼(DB x)

category Java/eclipse 연습 2020. 8. 28. 17:35

joinForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script src="checkreg.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
</head>
<body>
<div align="center">
	<form id="f1" action="joinChk.jsp" method="post">
		<table border="1">
			<tr>
				<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30">회원 기본 정보</th>
			</tr>
			<tr>
				<td width="20%" align="center" bgcolor="#D4F4FA" height="25">아이디 : </td>
				<td width="80%"><input type="text" maxlength="12" name="my_id" id="my_id" height="25" onchange="chkId(this.value)"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">비밀번호 : </td>
				<td><input type="password" maxlength="12" name="my_pw" id="my_pw" onchange="chkPw(this.value)"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">비밀번호확인 : </td>
				<td><input type="password" maxlength="12" id="pwd_check"  onchange="chkPwc(this.value)"></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">메일주소 : </td>
				<td><input type="email" id="my_email" name="my_email" onchange="chkEmail(this.value)"> 예) id@domain.com </td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">이름 : </td>
				<td><input type="text" id="my_name" name="my_name" onchange="chkName(this.value)"></td>
			</tr>
			<tr>
				<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30" height="25">개인 신상 정보</th>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA">우편번호 : </td>
				<td><input type="text" id="postcode" name="postcode" value="우편번호" readonly>
        			<input type="button" value="우편번호 찾기" onclick="DaumPostcode()"><br>
       			  	<input type="text" id="roadAddress" name="roadAddress" value="도로면 주소" readonly>
         			<input type="text" id="jibunAddress" name="jibunAddress" value="지번주소" readonly><br>
         			<input type="text" name="detailAddress" value="상세주소">
          			<input type="text" id="extraAddress" name="extraAddress" value="참고주소" readonly></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25" height="25">주민등록번호 : </td>
				<td><input type="text" id="my_num1" name="my_num1" maxlength="6" size = "15">
				- <input type="password" id="my_num2" name="my_num2" maxlength="7" size = "15" onchange="chkNum()"> 
				 예)123456-1234567 </td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25" height="25">생일 : </td>
				<td><input type="text" id="my_year" name="my_year" size="4" >년
				<input type="text" id="my_month" name="my_month" size="2" >월
				<input type="text" id="my_day" name="my_day" size="2" >일
				</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">관심분야 : </td>
				<td>
					<input type="checkbox" id="interest" name="interest" value="컴퓨터">컴퓨터
					<input type="checkbox" id="interest" name="interest" value="인터넷">인터넷
					<input type="checkbox" id="interest" name="interest" value="여행">여행
					<input type="checkbox" id="interest" name="interest" value="영화감상">영화감상
					<input type="checkbox" id="interest" name="interest" value="음악감상">음악감상
				</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA">자기소개</td>
				<td><textarea rows="8" cols="60" id="intro" name="intro"></textarea></td>
			</tr>
		</table>
		<br>
		<input type="button" value="회원 가입" onclick="chk()">&nbsp;
		<input type="reset" value="다시 입력">
	</form>
</div>
<embed src="ItGMa.mp3" loop="true" autostart="true" height="100" hidden="true">
<!-- embed=미디어플레이어 loop=반복여부 autostart=자동실행여부 hidden=화면숨김여부 -->
</body>
</html>

JoinBean.java

package test;

public class JoinBean {
	
	private String my_id;	// 아이디
	private String my_pw;	// 비밀번호
	private String my_email;	// 이메일
	private String my_name;	// 이름
	private int postcode;	// 우편 번호
	private String roadAddress;	// 도로명 주소
	private String jibunAddress;	// 지번 주소
	private String detailAddress;	// 상세 주소
	private String extraAddress;	// 참고 주소
	private int my_num1;	// 주민번호 앞자리
	private int my_num2;	// 주민번호 뒷자리
	private int my_year;	// 생일 : 년
	private int my_month; 	// 생일 : 월
	private int my_day;		// 생일 : 일
	private String[] interest;	// 관심항목
	private String intro;	// 자기소개
	
    // getter & setter
	public String getMy_id() {
		return my_id;
	}
	public void setMy_id(String my_id) {
		this.my_id = my_id;
	}
	public String getMy_pw() {
		return my_pw;
	}
	public void setMy_pw(String my_pw) {
		this.my_pw = my_pw;
	}
	public String getMy_email() {
		return my_email;
	}
	public void setMy_email(String my_email) {
		this.my_email = my_email;
	}
	public String getMy_name() {
		return my_name;
	}
	public void setMy_name(String my_name) {
		this.my_name = my_name;
	}
	public int getPostcode() {
		return postcode;
	}
	public void setPostcode(int postcode) {
		this.postcode = postcode;
	}
	public String getRoadAddress() {
		return roadAddress;
	}
	public void setRoadAddress(String roadAddress) {
		this.roadAddress = roadAddress;
	}
	public String getJibunAddress() {
		return jibunAddress;
	}
	public void setJibunAddress(String jibunAddress) {
		this.jibunAddress = jibunAddress;
	}
	public String getDetailAddress() {
		return detailAddress;
	}
	public void setDetailAddress(String detailAddress) {
		this.detailAddress = detailAddress;
	}
	public String getExtraAddress() {
		return extraAddress;
	}
	public void setExtraAddress(String extraAddress) {
		this.extraAddress = extraAddress;
	}
	public int getMy_num1() {
		return my_num1;
	}
	public void setMy_num1(int my_num1) {
		this.my_num1 = my_num1;
	}
	public int getMy_num2() {
		return my_num2;
	}
	public void setMy_num2(int my_num2) {
		this.my_num2 = my_num2;
	}
	public int getMy_year() {
		return my_year;
	}
	public void setMy_year(int my_year) {
		this.my_year = my_year;
	}
	public int getMy_month() {
		return my_month;
	}
	public void setMy_month(int my_month) {
		this.my_month = my_month;
	}
	public int getMy_day() {
		return my_day;
	}
	public void setMy_day(int my_day) {
		this.my_day = my_day;
	}
	public String[] getInterest() {
		return interest;
	}
	public String getInterest(int num) {
		return interest[num];
	}
	public void setInterest(String[] interest) {
		this.interest = interest;
	}
	public void setInterest(int num, String interest) {
		this.interest[num] = interest;
	}
	public String getIntro() {
		return intro;
	}
	public void setIntro(String intro) {
		this.intro = intro;
	}
	
}

joinChk.jsp

<%@page import="test.JoinBean"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<jsp:useBean id="joinbean" class="test.JoinBean" scope="request"/>	<%-- 빈즈 객체 생성 --%>
<jsp:setProperty property="*" name="joinbean"/>	<%-- submit으로 넘어온 값을 전부 빈즈에 set --%>
<html>
<head>
<meta charset="UTF-8">
<title>joinChk.jsp</title>
</head>
<body>
<div align="center">
	<form>
		<table border="1">
			<tr>
				<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30">회원 기본 정보</th>
			</tr>
			<tr>
				<td width="20%" align="center" bgcolor="#D4F4FA" height="25">아이디 : </td>
				<td width="80%"><%=joinbean.getMy_id() %></td> <%-- bean getter로 값 가져와서 출력 --%>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">비밀번호 : </td>
				<td><%=joinbean.getMy_pw() %></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">메일주소 : </td>
				<td><%=joinbean.getMy_email() %></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">이름 : </td>
				<td><%=joinbean.getMy_name() %></td>
			</tr>
			<tr>
				<th colspan="2" bgcolor="skyblue" align="center" width="600" height="30" height="25">개인 신상 정보</th>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA">우편번호 : </td>
				<td><%=joinbean.getPostcode() %><br>
       			  	<%=joinbean.getRoadAddress() %>
         			<%=joinbean.getJibunAddress() %><br>
         			<%=joinbean.getDetailAddress() %>
          			<%=joinbean.getExtraAddress() %></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25" height="25">주민등록번호 : </td>
				<td><%=joinbean.getMy_num1() %>	- <%=joinbean.getMy_num2() %> </td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25" height="25">생일 : </td>
				<td><%=joinbean.getMy_year() %>년
				<%=joinbean.getMy_month() %>월
				<%=joinbean.getMy_day() %>일
				</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA" height="25">관심분야 : </td>
				<td>
					<%
						for(String str : joinbean.getInterest()){	// 관심분야 배열값으로 for문
							out.println(str);
						}
					%>
				</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#D4F4FA">자기소개</td>
				<td><%=joinbean.getIntro() %></td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>

checkreg.js

// 주소
	function DaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {	
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
            // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var roadAddr = data.roadAddress; // 도로명 주소 변수
            var extraRoadAddr = ''; // 참고 항목 변수
            // 법정 동명이 있을 경우 추가한다. (법정리는 제외)
            // 법정 동의 경우 마지막 문자가 "동/로/가"로 끝난다.
            if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                extraRoadAddr += data.bname;
            }
            // 건물명이 있고, 공동주택일 경우 추가한다.
            if(data.buildingName !== '' && data.apartment === 'Y'){
               extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
            }
            // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
            if(extraRoadAddr !== ''){
                extraRoadAddr = ' (' + extraRoadAddr + ')';
            }
            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('postcode').value = data.zonecode;   // 우편번호
            document.getElementById("roadAddress").value = roadAddr;   // 도로명
            document.getElementById("jibunAddress").value = data.jibunAddress;   // 동 주소
            
            // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
            if(roadAddr !== ''){
                document.getElementById("extraAddress").value = extraRoadAddr;
            } else {
                document.getElementById("extraAddress").value = '';
            }
            var guideTextBox = document.getElementById("guide");
            // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
            if(data.autoRoadAddress) {
                var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                guideTextBox.style.display = 'block';
//////////////예상 지번수////////////////////
        	 }   /*else if(data.autoJibunAddress) {
                var expJibunAddr = data.autoJibunAddress;
                guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                guideTextBox.style.display = 'block';
            } else {
                guideTextBox.innerHTML = '';
                guideTextBox.style.display = 'none';
            }*/
        }
    }).open();
}
		// 정규식
		var idPwChk = /^[a-zA-Z0-9]{4,12}$/;	// 아이디, 비밀번호 정규식
		var emailChk = /^[a-zA-Z0-9]+@([a-zA-Z0-9]{1,10})\.([a-zA-Z]{1,10})+$/;	//이메일 정규식
		var nameChk = /[가-힣]{2,}/;	// 이름 정규식
		var numChk = /^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/; // 주민번호 정규식
		
		// true/false
		var ynId="no";	// ID check Yes or No
		var ynPw="no";	// Password
		var ynPwc="no";	// Password Check
		var ynMail="no";// Email
		var ynName="no";// Name
		var ynNum="no";	// Num
		
		function chk() {
			var inter = 0;
			var arrInterest = document.getElementsByName("interest");	// 관심분야
			var introTa = document.getElementById("intro");	// 자기소개
			var pcode = document.getElementById("postcode");	// 우편번호
			
			for(var i=0; i<arrInterest.length; i++){
				if(arrInterest[i].checked){
					inter++;
					break;
				}
			}
			
			if(ynId!="yes"){
				chkId("");
			}else if(ynPw!="yes"){
				chkPw("");
			}else if(ynPwc!="yes"){
				chkPwc("");
			}else if(ynMail!="yes"){
				chkEmail("");
			}else if(ynName!="yes"){
				chkName("");
			}else if(pcode.value=="우편번호"){
				alert("주소를 입력해주세요.");
				pcode.focus();
			}else if(ynNum!="yes"){
				chkNum("");
			}else if(inter==0){
				alert("관심분야를 선택해주세요.");
			}else if(introTa.value==""){
				alert("자기소개를 입력해주세요.");
				introTa.focus();
			}
			else{
				f1.submit();
			}
			
		}
		
	function chkId(myId) {	// 아이디 검사
		if(idPwChk.test(myId)){
			ynId="yes"
		}else{
			alert("아이디를 다시 확인해주세요.")
			ynId="no";
			f1.my_id.value="";
			f1.my_id.focus();
		}
	}
	function chkPw(myPw) {	// 비밀번호 검사
		var myId = document.getElementById("my_id").value;
		
		if(myPw==myId){
			alert("아이디와 비밀번호는 동일하게 사용할 수 없습니다.");
			f1.my_pw.value="";
			ynPw="no";
			f1.my_pw.focus();
		}else if(idPwChk.test(myPw)){
			ynPw="yes";
		}else{
			alert("비밀번호를 다시 확인해주세요.")
			ynPw="no";
			f1.my_pw.value="";
			ynPw="no";
			f1.my_pw.focus();
		}
		
	}
	function chkPwc(pwChk) {
		var myPw = document.getElementById("my_pw").value;	// 비밀번호 확인 검사
		
		if(pwChk==""){
			alert("비밀번호 확인을 다시 확인해주세요.");
			f1.pwd_check.value="";
			ynPwc="no";
			f1.pwd_check.focus();
		}else if(pwChk==myPw){
			ynPwc="yes";
		}else{
			alert("비밀번호가 일치하지 않습니다.");
			f1.pwd_check.value="";
			ynPwc="no";
			f1.pwd_check.focus();
		}
	}
	function chkEmail(myEmail) {	// 이메일 검사
		if(emailChk.test(myEmail)){
			ynMail="yes";
		}else{
			alert("이메일을 다시 확인해주세요.");
			ynMail="no";
			f1.my_email.value="";
			f1.my_email.focus();
		}
		
	}
	function chkName(myName) {	// 이름 검사
		if(nameChk.test(myName)){
			ynName="yes";
		}else{
			alert("이름을 다시 확인해주세요.");
			ynName="no";
			f1.my_name.value="";
			f1.my_name.focus();
		}
		
	}
	function chkNum() { // 주민등록번호 검사
		var num1 = document.getElementById("my_num1"); // 주민등록번호 앞
		var num2 = document.getElementById("my_num2"); // 주민등록번호 뒤
		
		var addYear = document.getElementById("my_year"); // 생일 - 년
		var addMon = document.getElementById("my_month"); // 생일 - 월
		var addDay = document.getElementById("my_day"); // 생일 - 일
		
		var FirstNum = num1.value.substring(0, 1);	// 맨 앞자리 숫자
		
		var num = (num1.value)+"-"+(num2.value);	// 주민등록번호
		
		if(numChk.test(num)){
			var arrNum1 = new Array(); // 앞자리를 담을 배열
			var arrNum2 = new Array(); // 뒷자리를 담을 배열
			for (var i = 0; i < num1.value.length; i++) {
				arrNum1[i] = num1.value.charAt(i);
			} // 주민번호 앞자리를 배열에 순서대로 담는다.
			for (var i = 0; i < num2.value.length; i++) {
				arrNum2[i] = num2.value.charAt(i);
			} // 주민번호 뒷자리를 배열에 순서대로 담는다.
			var tempSum = 0;
			for (var i = 0; i < num1.value.length; i++) {
				tempSum += arrNum1[i] * (2 + i);
			} // 주민번호 검사방법을 적용하여 앞 번호를 모두 계산하여 더함
			for (var i = 0; i < num2.value.length - 1; i++) {
				if (i >= 2) {
					tempSum += arrNum2[i] * i;
				} else {
					tempSum += arrNum2[i] * (8 + i);
				}
			} // 같은방식으로 앞 번호 계산한것의 합에 뒷번호 계산한것을 모두 더함
			if ((11 - (tempSum % 11)) % 10 != arrNum2[6]) {
				alert("주민번호를 다시 확인해주세요.");
				num1.value = "";
				num2.value = "";
				ynNum="no";
				num1.focus();
			} else {
				ynNum = "yes";
				
				addYear.value = arrNum1[0]+arrNum1[1];	// 년
				console.log(addYear.value);
				
				if(arrNum1[0]=="0"){
					addYear.value = "20"+addYear.value;	// 맨 앞이 0이면 20+년		
				}else{
					addYear.value = "19"+addYear.value;	// 아니면 19+년
				}
				
				addMon.value = arrNum1[2]+arrNum1[3];	// 월
				addDay.value = arrNum1[4]+arrNum1[5];	// 일
			}
		}else{
			alert("주민등록번호를 다시 확인해주세요.");
			num1.value = "";
			num2.value = "";
			ynNum="no";
			num1.focus();
		}
	}
반응형
저작자표시 비영리

'Java > eclipse 연습' 카테고리의 다른 글

(Java)파일 업로드.jsp  (0) 2020.09.22
(Java)계산기 Servlet version  (0) 2020.08.25
(JavaScript)계산기  (0) 2020.08.20
(JavaScript)현재 시간(1초마다 갱신)  (0) 2020.08.20
(Java)Thread Synchronization - ATM  (0) 2020.08.13
댓글 , 엮인글
THE STAR SHINING IN THE MIDDLE
블로그 이미지 #1997 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바