본문 바로가기
자바과정/JSP

JSP 회원가입 (자바빈즈 사용)

by Parkej 2021. 3. 10.

 

 

 

 

 

 

// beanInput.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
<%
	request.setCharacterEncoding("EUC-KR");
%>

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>회원가입 유효성 검사 정규식</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
      <script type = "text/javascript" src="./js/script.js" charset="utf-8"></script>
      <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
      <link rel="stylesheet" href="bootst/css/bootstrap.css">
    </head>
  
    <body>
    
  
    <form id = "sm"name="pej" method="post" onsubmit="return allCheck()" action="beanView.jsp">
    	<!-- 빈즈 클래스 생성 -->
	<div class = "row"><div class = "col-sm-6">	
    <table class = "table table-bordered table-dark">

    
      <tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
        <td align = "center" colspan="2" style = "color:black" >회원 기본 정보</td>
      </tr>
      
      <tr> <!-- 2 --> 
        <td>아이디:</td>
        <td><input type="text" id="_id" name="id" size=12 maxlength=12> 4~12자의 영문 대소문자와 숫자로만 입력</td>     
      	
      </tr>

      <tr> <!-- 3 --> 
        <td>비밀번호:</td>
        <td><input type="password" id="_pw" name="pw" size=12 maxlength=12> 4~12자의 영문 대소문자와 숫자로만 입력</td>     
      </tr>
      
      <tr> <!-- 4 행--> 
        <td>비밀번호확인:</td>
        <td><input type="password" id="_pw2" size=12 maxlength=12></td>
      </tr>

      <tr> <!-- 5 --> 
        <td>메일주소:</td>
        <td><input type="text" id="_mail" name="email" size=15> 예) id@domain.com</td>
      </tr>

      <tr> <!-- 6 --> 
        <td>이름:</td>
        <td><input type="text" id="_name" name="name" size=15 maxlength=4></td>
      </tr>

      <tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
        <td align = "center" colspan="2" style = "color:black" >개인 신상 정보</td>
      </tr>
      
      <tr>
        <td>주소</td> <!-- zib코드 입력-->
        <td><input type="text" id="tbox1" name="addr" placeholder="우편번호" size=8>
        <input type="button" onclick="addrFind()" value="우편번호 찾기"><br>
        <input type="text" id="tbox2" name="addr" placeholder="주소" size=28><br>
        <input type="text" id="tbox4" name="addr" placeholder="참고항목" size=28>
        <input type="text" id="tbox3" name="addr" placeholder="상세주소">
        </td>
      </tr>

      <tr> <!-- 7 --> 
        <td>주민등록번호:</td>
        <td><input type="text" id="_ju" name="pin" size=15 minlength=13 maxlength=13> 예) 1234561234567</td>
      </tr>

      <tr> <!-- 8 --> 
        <td>생일:</td>
        <td>
          <input type="text" id="birth" name="birth1" size=5 maxlength=12>년
          <select id="month" name="birth2">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          </select>월
          <select id="day" name="birth3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>

          </select>일
        </td>
      </tr>

      <tr> <!-- 9 --> 
        <td>관심분야:</td>
        <td>
          <input type="checkbox" value = "컴퓨터" name="hobby">컴퓨터
          <input type="checkbox" value = "인터넷" name="hobby">인터넷
          <input type="checkbox" value = "여행" name="hobby">여행
          <input type="checkbox" value = "영화감상" name="hobby">영화감상
          <input type="checkbox" value = "음악감상" name="hobby">음악감상
      </tr>

      <tr> <!-- 9 --> 
        <td>자기소개:</td>
        <td><textarea id="my_intro" name="content" cols="55" rows="5" maxlength="700"></textarea></td>
      </tr>
      
   		<tr>
   		 <td colspan="2" align = "center">
    		  <input type="submit" value="회원 가입">
    		  <input type="reset" value="다시입력">
     	 </td>
     	</tr>
      </table>
     </div></div>
    </form>
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="bootst/js/bootstrap.js"></script>
    </body>
  </html>

// beanView.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
<%
	request.setCharacterEncoding("EUC-KR");
%>

<!-- 빈즈 클래스 선언 과 동시에 클래스안의 값들을 올 셋함 -->
<jsp:useBean id="people" class="test.BeanPeople" scope="request"/>
<jsp:setProperty name = "people" property="*"/>

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>회원가입 유효성 검사 정규식</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="bootst/css/bootstrap.css">
    </head>
  
    <body>
    <div class = "row"><div class = "col-sm-6">	
    
    
    <table align="center" class = "table table-bordered table-dark">
    
      <tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
        <td align = "center" colspan="2" style = "color:black" >회원 기본 정보</td>
      </tr>
      
      <tr> <!-- 2 --> 
        <td>아이디:</td>
        <td><jsp:getProperty name="people" property="id"/></td>     
      	
      </tr>

      <tr> <!-- 3 --> 
        <td>비밀번호:</td>
        <td><jsp:getProperty name="people" property="pw"/></td>     
      </tr>


      <tr> <!-- 5 --> 
        <td>메일주소:</td>
        <td><jsp:getProperty name="people" property="email"/></td>
      </tr>

      <tr> <!-- 6 --> 
        <td>이름:</td>
        <td><jsp:getProperty name="people" property="name"/></td>
      </tr>

      <tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
        <td align = "center" colspan="2" style = "color:black" >개인 신상 정보</td>
      </tr>
      
      <tr>
        <td>주소</td> <!-- zib코드 입력-->
        <td>
        <jsp:getProperty name="people" property="addrarr"/>
        </td>
      </tr>

      <tr> <!-- 7 --> 
        <td>주민등록번호:</td>
        <td><jsp:getProperty name="people" property="pin"/></td>
      </tr>

      <tr> <!-- 8 --> 
        <td>생일:</td>
        <td>
		<jsp:getProperty name="people" property="birth1"/> -
		<jsp:getProperty name="people" property="birth2"/> -
		<jsp:getProperty name="people" property="birth3"/>
        </td>
      </tr>

      <tr> <!-- 9 --> 
        <td>관심분야:</td>
        <td><jsp:getProperty name="people" property="hobbyarr"/></td>
      </tr>

      <tr> <!-- 9 --> 
        <td>자기소개:</td>
        <td><jsp:getProperty name="people" property="content"/></td>
      </tr>
      
      <tr>
      <td colspan="2" align = "center">
      <form>
			<input type="button" value="가입"> 
			<input type="button" value="다시 작성" onclick="history.back()">
	  </form>
	  </td>
	  <tr>
	  
      </table>
      </div></div>
    	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="bootst/js/bootstrap.js"></script>
    </body>
  </html>

// script.js

var re = /^[a-zA-Z0-9]{4,12}$/; // 아이디와 패스워드가 적합한지 검사할 정규식
var re2 = /^[0-9a-zA-Z]{1,}@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; // 이메일 조건 정규 표현식
function allCheck(){
  return (idCheck()&&pwCheck()&&checkMail()&&nameCheck()&&checkAddr()&&ymdCheck()&&checkInterest()&&introCheck());
}

// 아이디
function idCheck(){
  var id = document.getElementById("_id");
  // ^ 이 규칙으로 문장을 시작한다. 
  // [문자 규칙을 입력]
  // {} = [] 안에 포함되는 문자가 최소 4개부터 12개까지
  
  if(id.value == ""){
    window.alert("ID를 입력하세요");
    id.focus();
    id.value = "";
    return false;
  }
  else if(!re.test(id.value)){
    window.alert("아이디는 4~12자와 영어 숫자로만 입력");
    id.focus();
    id.value = "";
    return false;
  }
  else return true;
}

// 주소 유효성 판별 체크 (상세주소)
function checkAddr(){
  var sangaddr = document.getElementById("tbox3").value;
  var numaddr = document.getElementById("tbox1").value;
  if(numaddr == ""){
    alert("주소를 입력해 주세요.");
    document.getElementById("tbox1").focus;
    return false;
  }
  if(sangaddr == ""){ //상세주소 없으면 안받아줌
    alert("상세주소를 입력해 주세요.");
    document.getElementById("tbox3").focus();
    return false;
  }
  else return true;
}

// 비밀번호체크
function pwCheck(){
      var pw1 = document.getElementById("_pw");
      var pw2 = document.getElementById("_pw2");

      // 아이디랑 비번이랑 같을 경우
      if (pw1.value == document.getElementById("_id").value)
      {
        alert("아이디랑 비밀번호가 같으면 안됩니다.")
        pw1.focus;
        pw1.value = "";
        pw2.value = "";
        return false;
      }
      // 비번 길이와 영어소대문자 입력값이 올바른지
      // 정규표현식을 true false로 반환할거면 test
      else if (!re.test(pw1.value))
      {
        alert("비밀번호는 4~12자 또는 영문 대소문자만 입력하세요.");
        pw1.focus;
        pw1.value = "";
        pw2.value = "";
        return false;
      }
      // 비번 확인이 잘 안된 경우
      else if (pw1.value != pw2.value)
      {
        alert("비밀번호를 확인해주세요")
        pw1.focus;
        pw1.value = "";
        pw2.value = "";
        return false;
      }
      else return true;
}

// 메일주소
function checkMail(){
  var mail = document.getElementById("_mail");
  if(mail.value == ""){
    alert("이메일 내용을 입력해주세요.");
    mail.focus;
    mail.value = "";
    return false;
  }
  else if(!re2.test(mail.value)){
    alert("이메일 형식을 확인바랍니다.");
    mail.focus;
    mail.value = "";
    return false;
  }
  else return true;  
}

//이름
function nameCheck(){
  var name = document.getElementById("_name");
  var reKor = /^[가-힣]{1,}$/;
  if (name.value == null){
    alert("이름을 입력해주세요");
    name.focus;
    name.value = "";
    return false;
  }
  else if(!reKor.test(name.value)){
    alert("한글을 입력해 주세요.")
    name.focus;
    name.value = "";
    return false;
  }
  else return true;
}


// 주소팝업
function addrFind() {
  new daum.Postcode({
    oncomplete: function(data) {
    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
    var addr = ''; // 주소 변수
    var extraAddr = ''; // 참고항목 변수

    //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
    if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
      addr = data.roadAddress;
    } else { // 사용자가 지번 주소를 선택했을 경우(J)
      addr = data.jibunAddress;
    }
    // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
    if(data.userSelectedType === 'R'){
    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
      extraAddr += data.bname;
    }
    // 건물명이 있고, 공동주택일 경우 추가한다.
    if(data.buildingName !== '' && data.apartment === 'Y'){
      extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
    }
    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
    if(extraAddr !== ''){
      extraAddr = ' (' + extraAddr + ')';
    }
    // 조합된 참고항목을 해당 필드에 넣는다.
    document.getElementById("tbox4").value = extraAddr;
    } else {
      document.getElementById("tbox4").value = '';
    }
    // 우편번호와 주소 정보를 해당 필드에 넣는다.
    document.getElementById('tbox1').value = data.zonecode;
    document.getElementById("tbox2").value = addr;
    // 커서를 상세주소 필드로 이동한다.
    document.getElementById("tbox3").focus();
    }
  }).open();

}

// 주민번호 , 생일
function ymdCheck(){
  var today = new Date();
  var yearcheck = today.getFullYear()
  var ssn = document.getElementById("_ju").value;
  var birth = ssn.substr(0,6);
  var reymd = /^[0-9]{1,}$/; // 숫자만 판별하고 1개이상들어가야함.
  
  // 몇년생인지 구분
  if(!reymd.test(ssn)){
    alert("숫자만 입력하세요.");
    document.getElementById("_ju").focus;
    document.getElementById("_ju").value = "";
    return false;
  }else{
    if(parseInt("20"+birth.substr(0,2)) > yearcheck){
      document.getElementById("birth").value = "19"+ birth.substr(0,2);
    }
    else {
      document.getElementById("birth").value = "20"+ birth.substr(0,2);
    }
    // 월 체크
    month[parseInt(birth.substr(2,2))-1].selected = true;
    day[parseInt(birth.substr(4,2))-1].selected = true;
    
    if(parseInt(ssn[6]) > 4)
    {
      alert("너는 성별이 어떻게 되냐?");
    }
    else if(
      ssn[12] != (11-((2*parseInt(ssn[0])+ 3*parseInt(ssn[1])+ 4*parseInt(ssn[2])+
      5*parseInt(ssn[3])+ 6*parseInt(ssn[4])+ 7*parseInt(ssn[5])+
      8*parseInt(ssn[6])+ 9*parseInt(ssn[7])+ 2*parseInt(ssn[8])+
      3*parseInt(ssn[9])+ 4*parseInt(ssn[10])+5*parseInt(ssn[11]))%11))) 
      {
        alert("주민번호가 매우 수상해~");
    }
    return true;
  }
}

//관심분야
function checkInterest(){
    var interest = document.getElementsByName("hobby")
    var cnt = 0;
    for(var i =0; i<interest.length; i ++){
      if(interest[i].checked){cnt++};
    }
    if (cnt == 0)
    {
      alert("관심분야를 체크해 주세요.")
    return false;
    }
    else return true;
}

// 자기소개
function introCheck(){
  var intro = document.getElementById("my_intro");

  if(intro.value == ""){
    alert("자기소개란에 내용을 입력해주세요.");
    intro.focus;
    return false;
  }
  else return true;
}

// BeanPeople.java

package test;

public class BeanPeople {
	private String id; // 아이디
	private String pw; // 비번
	private String email; // 이메일
	private String name; // 이름
	private String addr[]; // 주소
	private String pin; // 주민번호
	private String birth1; // 생일
	private String birth2; // 생일
	private String birth3; // 생일
	private String hobby[]; // 관심분야
	private String content; // 자기소개 
	
	public BeanPeople() {
		this.id = "";
		this.pw = "";
		this.email = "";
		this.name = "";
		this.addr = null;
		this.pin = "";
		this.birth1 = "";
		this.birth2 = "";
		this.birth3 = "";
		this.hobby = null;
		this.content = "";
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPw() {
		return pw;
	}

	public void setPw(String pw) {
		this.pw = pw;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String[] getAddr() {
		return addr;
	}

	public void setAddr(String[] addr) {
		this.addr = addr;
	}
	
	public String getAddrarr() {
		String addrarr="";
		for(int i=0;i<addr.length;i++) {
			addrarr += addr[i];
			if(i<addr.length -1) {
				addrarr += "<br>";
			}
		}
		return addrarr;
	}

	public String getPin() {
		return pin;
	}

	public void setPin(String pin) {
		this.pin = pin;
	}


	public String getBirth1() {
		return birth1;
	}

	public void setBirth1(String birth1) {
		this.birth1 = birth1;
	}

	public String getBirth2() {
		return birth2;
	}

	public void setBirth2(String birth2) {
		this.birth2 = birth2;
	}

	public String getBirth3() {
		return birth3;
	}

	public void setBirth3(String birth3) {
		this.birth3 = birth3;
	}
	public String[] getHobby() {
		return hobby;
	}
	public String getHobbyarr() {
		
		String hobbyarr = "";
		// 관심분야가 null 이 아니어도 for문이 돌아감
		for(int i=0;i<hobby.length;i++) {
			hobbyarr += hobby[i];
			if(i<hobby.length -1) {
				hobbyarr += ',';
			}
		}
		return hobbyarr;
	}

	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

}
반응형

'자바과정 > JSP' 카테고리의 다른 글

JSP 실습 (이벤트 등록)  (0) 2021.03.15
JSP 파일 업로드  (0) 2021.03.12
JSP 실습 Template  (0) 2021.03.10
JSP 실습 application과 session (scope)  (0) 2021.03.10
JSP 장바구니(로그아웃, 페이지 4개, 빈 장바구니 처리, 아이디 공백처리)  (0) 2021.03.10

관련글

댓글

티스토리툴바