member/join.jsp > SPRING1

• 목록

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="/WEB-INF/views/include/header.jsp" %>

<script>

$(document).ready(function(){

$("#useremail").keyup(function(event){

if (!(event.keyCode >=37 && event.keyCode<=40)) {

$(this).val($(this).val().replace(/[^_a-z0-9@.]/gi,"")); //_(underscore), 영어,숫자,@,.(마침표)만 가능

}

$.ajax({

url: "/member/id_ok", //전송 페이지 경로

type: "get", //데이터 전송 방식

dataType: "text",

data: "useremail="+$("#useremail").val(),

error:function(){ //실패일 경우

alert("실패");

},

success:function(num){ //성공일 경우

if(num == 1) {

msg = "<font color=red>이미 존재하는 이메일입니다.</font>";

}else if(num == 0) {

msg = "<font color=blue>사용 가능한 이메일입니다.</font>";

}

$("#id_result").html(msg);

}

});

});

});

</script>

<script>

function goEmail(email){

$(document).ready(function(){

$.ajax({

url: "/member/email", //전송 페이지 경로

type: "get", //데이터 전송 방식

dataType: "text",

data: "email="+email,

error:function(){ //실패일 경우

alert("실패");

},

success:function(str){ //성공일 경우

if(str == "success"){

alert("메일 발송되었습니다.\n인증번호를 확인후 기입하세요.");

}else{

alert("메일 발송 실패");

}

}

});

});

}

function okEmail(email){

$(document).ready(function(){

$.ajax({

url: "/member/ok", //전송 페이지 경로

type: "get", //데이터 전송 방식

dataType: "text",

data: "str="+email,

error:function(){ //실패일 경우

alert("실패");

},

success:function(str){ //성공일 경우

if(str == "yes"){

alert("인증번호가 확인되었습니다.");

emailresult.value = "Y";

}else{

alert("인증번호를 잘못 입력하셨습니다.");

}

}

});

});

}

</script>

<center>

<h3>JOIN PAGE</h3>

<form method="post">

<input type="hidden" id="emailresult" name="emailresult" value="N">

<table width=600 border=1>

<tr>

<td width=100>메일주소</td>

<td>

<input id="useremail" name="useremail"><span id="id_result"></span><br>

<input type="button" value="메일인증" onclick="goEmail(useremail.value)">

<input type="text" id="confirmation" name="confirmation" placeholder="인증번호입력">

<input type="button" value="확인" onclick="okEmail(confirmation.value)">

</td>

</tr>

<tr>

<td>비밀번호</td>

<td><input type="password" name="userpw"></td>

</tr>

<tr>

<td>이름</td>

<td><input name="username"></td>

</tr>

<tr>

<td>연락처</td>

<td>

<input name="phone1" value="010" style="width:22px"> - <input name="phone2" style="width:30px"> - <input name="phone3" style="width:30px">

</td>

</tr>

<tr>

<td>주소</td>

<td>

<input type="text" id="sample4_postcode" name="zipcode" placeholder="우편번호">

<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>

<input type="text" id="sample4_roadAddress" name="zipcode1" placeholder="도로명주소">

<input type="text" id="sample4_jibunAddress" name="zipcode2" placeholder="지번주소">

<br>

<span id="guide" style="color:#999;display:none"></span>

<input type="text" id="sample4_detailAddress" name="zipcode3" placeholder="상세주소">

<input type="text" id="sample4_extraAddress" name="zipcode4" placeholder="참고항목">

</td>

</tr>

<tr>

<td></td>

<td><button type="submit">회원가입</button></td>

</tr>

</table>

</form>

</center>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<script>

    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.

    function sample4_execDaumPostcode() {

        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('sample4_postcode').value = data.zonecode;

                document.getElementById("sample4_roadAddress").value = roadAddr;

                document.getElementById("sample4_jibunAddress").value = data.jibunAddress;

                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.

                if(roadAddr !== ''){

                    document.getElementById("sample4_extraAddress").value = extraRoadAddr;

                } else {

                    document.getElementById("sample4_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();

    }

</script>

<%@ include file="/WEB-INF/views/include/footer.jsp" %>