[JSP] 회원가입 - 주소 검색, 유효성 검사

---

1.  회원가입 양식

html 코드

    <h3>회원가입</h3>
    <form action="form01_process.jsp" name="member" method="post">
        <p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복검사"></p>
        <p> 비밀번호 : <input type="password" name="passwd"></p>
        <p> 이름 : <input type="text" name="name"></p>
        <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>
        <p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
            <input type="radio" name="sex" value="여성">여성</p>
        <p> 취미 : 독서 <input type="checkbox" name="hobby" value="독서" checked>
            운동<input type="checkbox" name="hobby" value="운동">
            영화<input type="checkbox" name="hobby" value="영화"></p>

        <p> 주소 : <input name="zipcode" id="zipcode" size="10" maxlength="7" readonly>
            <input type="button" value="우편번호 검색" id="address"><br />
            <input name="address01" id="address01" size="70" maxlength="70" readonly>
            <input name="address02" id="address02" size="70" maxlength="70"> </p>

        <p> <textarea name="comment" cols="30" rows="3" placeholder="가입인사를 입력해주세요"></textarea></p>
        <p> <input type="submit" value="가입하기">
            <input type="reset" value="다시쓰기"></p>
    </form>

 

자바스크립트 코드

       /*
        카카오 우편번호 검색 가이드 페이지 :  https://postcode.map.daum.net/guide
        getElementById() : html 에서 매개변수로 받은 id 값이 있는 요소를 반환.
        */
        function execDaumPostcode() {
            new daum.Postcode({
                oncomplete: function(data) {
                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                    var fullAddr = ''; // 최종 주소 변수
                    var extraAddr = ''; // 조합형 주소 변수

                    // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                    if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                        fullAddr = data.roadAddress;
                    }
                    else { // 사용자가 지번 주소를 선택했을 경우(J)
                        fullAddr = data.jibunAddress;
                    }

                    // 사용자가 선택한 주소가 도로명 타입일때 조합한다.
                    if(data.userSelectedType === 'R'){
                        //법정동명이 있을 경우 추가한다.
                        if(data.bname !== ''){
                            extraAddr += data.bname;
                        }
                        // 건물명이 있을 경우 추가한다.
                        if(data.buildingName !== ''){
                            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                        }
                        // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                        fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
                    }

                    // 우편번호와 주소 정보를 해당 필드에 넣는다.
                    document.querySelector('input[name=zipcode]').value = data.zonecode; //5자리 새우편번호 사용
                    document.querySelector('input[name=address01]').value = fullAddr;

                    // 커서를 상세주소 필드로 이동한다.
                    document.querySelector('input[name=address02]').focus();
                }
            }).open();
        }

        document.addEventListener("DOMContentLoaded", function () {
            const addrBtn = document.querySelector('input[id=address]');
            addrBtn.addEventListener('click', execDaumPostcode);
        });

 

JSP 코드

    <%
        request.setCharacterEncoding("utf-8");
        String userid = request.getParameter("id");
        String password = request.getParameter("passwd");
        String name = request.getParameter("name");
        String phone = request.getParameter("phone1");
        String sex = request.getParameter("sex");
        String[] hobby = request.getParameterValues("hobby");
        String comment = request.getParameter("comment");
    %>
    <p> 아이디 : <%=userid%>
    <p> 비밀번호 : <%=password%>
    <p> 이름 : <%=name%>
    <p> 연락처 : <%=phone%>
    <p> 성별 : <%=sex%>
    <p> 취미 : <%
        if (hobby != null) {
            for(String s: hobby) {
                out.println(" " + s);
            }
        }
        %>
    <p> 가입인사 : <%=comment%>

 

---

2.  유효성 검사

회원가입시 아이디와 비밀번호를 입력하지 않을 시 + 비밀번호에 아이디가 포함된 경우 경고창 띄우기

html 코드

<body>
    <h3>회원가입</h3>
    <form action="validation_process.jsp" name="member" method="post">
        <p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복검사"></p>
        <p> 비밀번호 : <input type="password" name="passwd"></p>

        <p> <input type="submit" value="가입하기"> </p>
    </form>
</body>

 

javascript 코드

<script>
    document.addEventListener("DOMContentLoaded", function() {
       const id = document.querySelector("input[name=id]");
       const pwd = document.querySelector("input[name=passwd]");
       const submitBtn = document.querySelector('input[value="가입하기"]');

       submitBtn.addEventListener('click', function(event) {
           if (id.value.trim() === "") {
               alert('아이디를 입력해 주세요.');
               event.preventDefault(); // Prevent form submission
               id.focus();
           } else if (pwd.value.trim() === "") {
               alert('비밀번호를 입력해 주세요.');
               event.preventDefault(); // Prevent form submission
               pwd.focus();
           } else if (pwd.value.indexOf(id.value) !== -1) {
               alert('비밀번호는 아이디를 포함할 수 없습니다.');
               event.preventDefault(); // Prevent form submission
               pwd.focus();
           }
       });

    });
</script>

 

JSP 코드

<body>
    <%
        request.setCharacterEncoding("utf-8");
        String userid = request.getParameter("id");
        String password = request.getParameter("passwd");
    %>
       <p> 아이디 : <%=userid%>
       <p> 비밀번호 : <%=password%>

</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]