-
회원가입(자바빈즈 이용)jsp자바서버페이지 2021. 3. 10. 20:42
회원가입 폼.HTML,JSP 연동가능, 폼에서 전송 방식과 엑션값을 자바빈즈로 바꿈.
<html> <head> <title>회원 가입 페이지</title> <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <script> function checkAll() { if (!checkUserId(join.userId.value)) { return false; } if (!checkPassword(join.userId.value, join.password1.value, join.password2.value)) { return false; } if (!checkMail(join.mail.value)) { return false; } if (!checkName(join.name.value)) { return false; } if (!checkBirth(join.identi1.value, join.identi2.value)) { return false; }//checkBirth 가 주민번호 , putBirth는 주민번호 입력과 동시에 생년월일로 들어간다. //여기부터 if (!checkExistData(join.Byear.value, "생년월일을" )){ return false; } if (!checkExistData(join.Bmonth.value, "생년월일을" )){ return false; } if (!checkExistData(join.Bday.value, "생년월일을" )){ return false; } //여기까지 날짜 삽입 위한 체크 기본함수 이용 if (!checkFavorite()) { return false; } if (!checkIntro()) { return false; } return true; } // 공백확인 함수 //코드 손실을 막기위해 함수하나를 만들어 둔다. function checkExistData(value, dataName) { if (value == "") { alert(dataName + " 입력해주세요!"); return false; } return true; } function checkUserId(id) { //Id가 입력되었는지 확인하기 if (!checkExistData(id, "아이디를")) return false; var idRegExp = /^[a-zA-Z0-9]{4,12}$/; //아이디 유효성 검사 if (!idRegExp.test(id)) { alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!"); form.userId.value = ""; return false; } return true; //확인이 완료되었을 때 } function checkPassword(id, password1, password2) { //비밀번호가 입력되었는지 확인하기 if (!checkExistData(password1, "비밀번호를")) return false; //비밀번호 확인이 입력되었는지 확인하기 if (!checkExistData(password2, "비밀번호 확인을")) return false; var password1RegExp = /^[a-zA-Z0-9]{4,12}$/; //비밀번호 유효성 검사 if (!password1RegExp.test(password1)) { alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!"); form.password1.value = ""; return false; } //비밀번호와 비밀번호 확인이 맞지 않다면.. if (password1 != password2) { alert("두 비밀번호가 맞지 않습니다."); join.password1.value = ""; join.password2.value = ""; return false; } //아이디와 비밀번호가 같을 때.. if (id == password1) { alert("아이디와 비밀번호는 같을 수 없습니다!"); join.password1.value = ""; join.password2.value = ""; return false; } return true; //확인이 완료되었을 때 } function checkMail(mail) { //mail이 입력되었는지 확인하기 if (!checkExistData(mail, "이메일을")) return false; //[A-Za-z0-9]+[A-Za-z0-9]*는 첫 한글자 는 아무거나 + [A-Za-z0-9]*는 여러 글자 0개부터 상관없이 가능. var emailRegExp = /^[A-Za-z0-9]+[@]{1}[A-Za-z0-9]+[.]{1}[A-Za-z]{1,3}$/; if (!emailRegExp.test(mail)) { alert("이메일 형식이 올바르지 않습니다!"); join.mail.value = ""; return false; } return true; //확인이 완료되었을 때 } function checkName(name) { if (!checkExistData(name, "이름을")) return false; var nameRegExp = /^[가-힣]{2,10}$/; if (!nameRegExp.test(name)) { alert("이름이 올바르지 않습니다."); return false; } return true; //확인이 완료되었을 때 } function goPopup() { 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 + ')'; } // 우편번호와 주소 정보를 해당 필드에 넣는다. join.zipNo.value = data.zonecode; join.roadAddrPart1.value = roadAddr; join.addrDetail.focus(); } }).open(); } function checkBirth(identi1, identi2) { //birth이 입력되었는지 확인하기 //||은 or if (!checkExistData(identi1, "주민등록번호를 ") || !checkExistData(identi2, "주민등록번호를 ")) return false; var totalIdenti = identi1 + identi2; var sum = 0; var plus = 2; //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장 //곱해지는 숫자를 i로 //1~12번째까지 숫자들 을 받으면서 if 0~7번째까지 숫자들을 더한다 for (var i = 0; i < 12; i++) { if (i >= 0 && i <= 7) { sum += totalIdenti[i] * plus; plus++; if (i == 7) plus = 2; } else { sum += totalIdenti[i] * plus; plus++; } } //주민등록번호 길이 확인하기 if (totalIdenti.length < 12) { alert("주민등록번호는 13자리입니다."); join.identi1.value = ""; join.identi2.value = ""; return false; } //주민등록번호 유효한지 확인 var result = 11 - (sum % 11) % 10 if (result != totalIdenti.charAt(12)) { //주민등록번호가 유효하지 않은 경우 alert("유효하지않은 주민번호입니다."); join.identi1.value = ""; join.identi2.value = ""; return false; } return true; //확인이 완료되었을 때 } function putBirth(identi1, identi2){ if(identi2.charAt(0)==1 || identi2.charAt(0)==2) { //성별번호 1,2일경우 1900년대생 + 주민번호 1번째 2번째자리 숫자로 몇년생인지 지정 join.Byear.value = "19" + identi1[0]+identi1[1]; } else if(identi2.charAt(0)==3 || identi2.charAt(0)==4){ join.Byear.value = "20" + identi1[0]+identi1[1]; } //성별번호 3,4일경우 2000년대생 + 주민번호 1번째 2번째자리 숫자로 몇년생인지 지정 //form의 생년월일의 월부분의 날짜를 주민번호 3번째 4번째 자리숫자로 지정 //form의 생년월일의 일부분의 날짜를 주민번호 5번째 6번째 자리숫자로 지정 join.Bmonth.value = identi1[2] + identi1[3]; join.Bday.value = identi1[4] + identi1[5]; } function checkFavorite() { var checkedHa = document.getElementsByName("ha"); //체크된 값이 하나라도 있을경우 바로 true for (var i = 0; i < checkedHa.length; i++) { if (checkedHa[i].checked == true) { return true; } } alert("관심분야를 체크해주세요!"); return false; } //자기소개가 입력되었는지 확인하기 function checkIntro() { var text = document.getElementById("intro"); if (!checkExistData(text.value, "자기소개를")) { alert("자기소개를 입력해 주세요!"); return false; } else return true; } </script> </head> <body> <Form method="post" name= "join" action = "join1.jsp" onsubmit="return checkAll();" > <!-- 메소드 형식 get으로 쓰면 한글화 형식이 다르기때문에 --> <table width = "650" height = "400" border="1"> <tr align= "Center" bgcolor=orange> <td Colspan="2">회원 기본 정보</td> </tr> <tr> <td align= "Center" bgcolor=lightblue>아이디: </td> <td><input type = "text" name="userId" maxlengh = "12">4~12자의 영문 대소문자와 숫자로만 입력<br> </td> </tr> <td align= "Center" bgcolor=lightblue>비밀번호: </td> <td><input type="password" name="password1" maxlengh = "12">4~12자의 영문 대소문자와 숫자로만 입력<br> </td> </tr> <td align= "Center" bgcolor=lightblue>비밀번호(확인): </td> <td><input type="password" name="password2"><br> </td> </tr> <td align= "Center" bgcolor=lightblue>메일주소: </td> <td><input type="email" name="mail">예)id@sungwoo.com<br> </td> </tr> <td align= "Center" bgcolor=lightblue>이름: </td> <td><input type="text" name="name"><br> </td> </tr> <tr align= "Center" bgcolor=orange> <td Colspan="2">개인 신상 정보</td> </tr> <tr> <tr> <th bgcolor="#DCEBFF">우편번호</th> <td> <input type="hidden" id="confmKey" name="confmKey" value=""> <input type="text" id="zipNo" name="zipNo" readonly style="width:100px"> <input type="button" value="주소검색" onclick="goPopup()" > </td> </tr> <tr> <th bgcolor="#DCEBFF">도로명주소</th> <td><input type="text" id="roadAddrPart1" style="width:85%"></td> </tr> <tr> <th bgcolor="#DCEBFF">상세주소</th> <td> <input type="text" id="addrDetail" style="width:40%" value=""> <input type="text" id="roadAddrPart2" style="width:40%" value=""> </td> </tr> <td align= "Center" bgcolor=lightblue>주민등록번호: </td> <td> <input type="text" name="identi1"> - <input type="password" name="identi2" onchange="putBirth(join.identi1.value, this.value)"> <!--this는 같은 줄에 있는 input값을 받아오는 거고 form.name.value는 폼 내에 name에 해당되는 값을 받아온다.--> <!--여기서는 첫번째 폼 값을 받고 , 두번째 input값을 받는다는 말임.--> </td> </tr> <td align= "Center" bgcolor=lightblue>생일: </td> <td><input type = "number" name="Byear" max="3000">년 <select name = "Bmonth">월 <option value = "01">01</option> <option value = "02">02</option> <option value = "03">03</option> <option value = "04">04</option> <option value = "05">05</option> <option value = "06">06</option> <option value = "07">07</option> <option value = "08">08</option> <option value = "09">09</option> <option value = "10">10</option> <option value = "11">11</option> <option value = "12">12</option> </select> <select name = "Bday">일 <option value = "01">01</option> <option value = "02">02</option> <option value = "03">03</option> <option value = "04">04</option> <option value = "05">05</option> <option value = "06">06</option> <option value = "07">07</option> <option value = "08">08</option> <option value = "09">09</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> <td align= "Center" bgcolor=lightblue>관심분야<br> </td> <td> <input type="checkbox" name="ha" value="컴퓨터" >컴퓨터 <input type="checkbox" name="ha" value="인터넷" checked>인터넷 <input type="checkbox" name="ha" value="여행" >여행 <input type="checkbox" name="ha" value="영화감상"checked>영화감상 <input type="checkbox" name="ha" value="음악감상">음악감상 </td> </tr> <td align= "Center" bgcolor=lightblue>자기소개<br> </td> <td><textarea name="introduceMyself" id="intro" name="intro" rows = "10" cols="50"></textarea> </td> </tr> <tr> <td colspan = "2" align = "center"> <input type="submit" value="회원 가입" > <!--이것은 주석임. 폼 엑션을 넣어서 submit 버튼이 눌리면 발동--> <input type="reset" value="다시 입력"> </td> </tr> </table> </Form> </body> </html>회원가입 jsp파일
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html> <html> <jsp:useBean id = "joinBean" class="test.JoinBean" scope="page"/> <%--객체화를 시킨다. --%> <% request.setCharacterEncoding("EUC-KR"); %> <jsp:setProperty name="joinBean" property="*"/> <%--유즈 빈 id와 셋프로펄티 네임을 같게해야한다. --%> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <%-- <%=Bean.getProperty("userId") %> <%=Bean.getName() %> --%> <%--밑에 네임은 빈의 id --%> <jsp:getProperty name="joinBean" property= "userId"/> <br> <jsp:getProperty name="joinBean" property= "password1"/><br> <jsp:getProperty name="joinBean" property= "password2"/><br> <jsp:getProperty name="joinBean" property= "mail"/><br> <jsp:getProperty name="joinBean" property= "name"/><br> <jsp:getProperty name="joinBean" property= "identi1"/><br> <% for(int i= 0; i<joinBean.getHa().length; i++){ out.println(joinBean.getHa(i)+"<br>"); } %> </body> </html>자바빈즈 클래스(자바파일)
package test; public class JoinBean { private String userId; private String password1; private String password2; private String mail; private String name; private int identi1; private int identi2; private int Byear; private int Bmonth; private int Bday; private String[] ha; public String getUserId() { return userId; } public void setUserId(String userId) { this.userId = userId; } public String getPassword1() { return password1; } public void setPassword1(String password1) { this.password1 = password1; } public String getPassword2() { return password2; } public void setPassword2(String password2) { this.password2 = password2; } public String getMail() { return mail; } public void setMail(String mail) { this.mail = mail; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getIdenti1() { return identi1; } public void setIdenti1(int identi1) { this.identi1 = identi1; } public int getIdenti2() { return identi2; } public void setIdenti2(int identi2) { this.identi2 = identi2; } public int getByear() { return Byear; } public void setByear(int byear) { Byear = byear; } public int getBmonth() { return Bmonth; } public void setBmonth(int bmonth) { Bmonth = bmonth; } public int getBday() { return Bday; } public void setBday(int bday) { Bday = bday; } public String[] getHa() { return ha; } public String getHa(int index) { return ha[index]; } public void setHa(String[] ha) { this.ha = ha; } }'jsp자바서버페이지' 카테고리의 다른 글
JDBC 이벤트처리 in jsp (0) 2021.03.15 redirect 사용하여 전송하기. (0) 2021.03.10 jsp 간단한 장바구니 만들기 (0) 2021.03.10 jsp 구구단 (0) 2021.03.09