주소 API 연동

728x90

1) Daum Postcode Service User Guide_우편번호찾기_기능구현시_웹서버구동필요함

https://postcode.map.daum.net/guide#usage

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

예제1) 팝업을 이용하여 도로명 주소와 지번주소 모두 보여주기

code 복사

body에 코드 붙여넣기

예제2)

! : not

!= : 같지 않다면

 //패스워드 확인용 자바 스크립트 소스 코딩
        function passwordChk(){
            var password01 = document.getElementById("password01").value;
            var password02 = document.getElementById("password02").value;

            // 만약에 password01 입력란에 6글자 미만으로 
            // 값이 입력된다면
            if(password01.length < 6){
                // alert() 메서드의 메시지가 나타나게 하고,
                // return false; 처리를 종료합니다.
                alert('비밀번호를 6글자 이상으로 입력해 주세요');
                return false;
            }

            // 만약에 password01 입력 글자와 password02 입력 글자가 다르다면,
            // alert() 메서드의 메시지를 나타나게하고,
            // return false; 처리를 종료합니다.
            // 그렇지 않다면 else문으로 처리를 진행합니다.
            if(password01 != password02){
                alert('비밀번호가 일치하지 않습니다')
                return false;
            }else{
                return true;
            }
        }

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .extraAddress{
            display: none;
        }
    </style>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script>

        //패스워드 확인용 자바 스크립트 소스 코딩
        function passwordChk(){
            var password01 = document.getElementById("password01").value;
            var password02 = document.getElementById("password02").value;

            // 만약에 password01 입력란에 6글자 미만으로 
            // 값이 입력된다면
            if(password01.length < 6){
                // alert() 메서드의 메시지가 나타나게 하고,
                // return false; 처리를 종료합니다.
                alert('비밀번호를 6글자 이상으로 입력해 주세요');
                return false;
            }

            // 만약에 password01 입력 글자와 password02 입력 글자가 다르다면,
            // alert() 메서드의 메시지를 나타나게하고,
            // return false; 처리를 종료합니다.
            // 그렇지 않다면 else문으로 처리를 진행합니다.
            if(password01 != password02){
                alert('비밀번호가 일치하지 않습니다')
                return false;
            }else{
                return true;
            }
        }


        function sample6_execDaumPostcode() {
            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("sample6_extraAddress").value = extraAddr;
                    
                    } else {
                        document.getElementById("sample6_extraAddress").value = '';
                    }

                    // 우편번호와 주소 정보를 해당 필드에 넣는다.
                    document.getElementById('sample6_postcode').value = data.zonecode;
                    document.getElementById("sample6_address").value = addr;
                    // 커서를 상세주소 필드로 이동한다.
                    document.getElementById("sample6_detailAddress").focus();
                }
            }).open();
        }
    </script>
</head>
<body>
  <div class="signup">
    <form>
        <fieldset>
            <legend>
                예스24 <br>
                로그인
            </legend>

            <div class="signup_box">
                <label for="id">
                    <input type="text" name="id" id="id" placeholder="아이디를 입력해주세요" required />
                </label>
                <label for="email">
                    <input type="email" name="email" id="email" autocomplete="on" placeholder="이메일을 입력해주세요" required />
                </label> <br><br>

                    <input type="password" name="password01" id="password" placeholder="6자리 이상 비밀번호를 입력해주세요" required size="30"/> <br>

                    <input type="password" name="password02" id="password" placeholder="6자리 이상 비밀번호를 입력해주세요" required  size="30"/> <br><br>

                    <input type="text" name="name" id="name" placeholder="이름을 입력해주세요" required /><br>
            </div>

            <div class="gender">
                <input type="radio" name="chk_gender" value="여성">여성
                <input type="radio" name="chk_gender" value="남성">남성
                <input type="radio" name="chk_gender" value="선택안함">선택안함
            </div><br>

            <label for="birthday"><b>생년월일</b></label>
            <br>
            <span><input type="date" class="birthday" name="birthday" min="1900-01-01" max="2099-12-31"></span>
            <br><br>

            <b>선호하는 색상</b>
            <label for="favcolor"></label><br>
            <span>
                <input type="color" id="favcolor" name="favcolor" value="#ff0000">
            </span>
            <br><br>

            <b>관심 분야</b>
            <label><input type="checkbox" value="소설">소설</label>
            <label><input type="checkbox" value="에세이">에세이</label>
            <label><input type="checkbox" value="자격증">자격증</label>
            <label><input type="checkbox" value="만화책">만화책</label>
            <br><br>

            <b>파일 업로드</b>
            <label for="fileUpload">
                <input type="file" id="file" multiple="multiple">
            </label>
            <br><br>

            <!-- 회원가입 : DAUM 카카오 주소 API 연동소스(시작) -->

            <input type="text" id="sample6_postcode" placeholder="우편번호">
            <input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
            <input type="text" id="sample6_address" placeholder="주소" size="35"><br>
            <input type="text" id="sample6_detailAddress" placeholder="상세주소" size="35">
            <input class="extraAddress" type="text" id="sample6_extraAddress" placeholder="참고항목">

            <input type="submit" value="등록" onclick="passwordChk()">


        </fieldset>
    </form>
  </div>

</body>
</html>

HTML INPUT TYPE

https://www.w3schools.com/html/html_form_input_types.asp

HTML Input Types

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

date) W3Schools Tryit Editor

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

color) W3Schools Tryit Editor

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_color

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

PARALLAX_SCROLLING (0)	2023.08.07
CAROUSEL (0)	2023.08.07
LANDING PAGE 구현 (0)	2023.08.04
[JAVASCRIPT] AJAX _2 (0)	2023.08.03
[JQUERY] 플러그인 (0)	2023.08.02