디지털 컨버전스/Java Script

[Regex] 예제 - 회원가입폼 : html5 내장 기능

gimyeondong 2020. 4. 17. 10:19 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

        <style>

            .wrapper div{

                border: 1px solid black;
                margin: 0px;
                padding: 1px;
            }
            .wrapper{
                width: 75%;
                margin: auto;
            }
            .tel{
                width: 100px;
            }
            .center{
                text-align: center;
            }
            .right{
                text-align: right;
            }
            .addressbox{
                width: 100%;
            }

        </style>
    </head>
    <body>

        <div class = wrapper>
            <form action="abc.html">

                <div class="row center">

                    <div class="col-sm-12 ">
                        회원가입 정보 입력
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-2  right">
                        아이디 :
                    </div>
                    <div class="col">
                        <input type="text" pattern="\w{1,10}" required>
                        <input type="button" value="중복확인">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        패스워드 :
                    </div>
                    <div class="col">
                        <input type="password" id="pw1" pattern=".{6,12}" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        패스워드 확인 :
                    </div>
                    <div class="col">
                        <input type="password" id="pw2" pattern=".{6,12}" required>
                    </div>
                    <div id="result"></div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        이름 :
                    </div>
                    <div class="col">
                        <input type="text" pattern="[가-힣]{2,5}" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 right">
                        핸드폰 번호 :
                    </div>
                    <div class="col">
                        <input type ="text" pattern="\d{11}" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        이메일 :
                    </div>
                    <div class="col">
                        <input type="text" pattern=".+@.+\..+">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2 right">
                        우편번호 :
                    </div>
                    <div class="col">
                        <input type="text" id="postcode" placeholder="우편번호" pattern="\d{5}">
                        <input type="button" onclick="sample4_execDaumPostcode()" value="찾기"><br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        주소1 :
                    </div>
                    <div class="col">
                        <input type="text" id="Address1" placeholder="도로명주소" class="addressbox">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2  right">
                        주소2 :
                    </div>
                    <div class="col">
                        <input type="text" id="Address2" placeholder="상세주소" class="addressbox">
                    </div>
                </div>
                <div class="row center">
                    <div class="col">
                        <input type="submit" value="회원가입">
                        <input type="button" value="다시입력">
                    </div>
                </div>
            </form>
        </div>

        <script>
            document.getElementById("pw2").onkeyup	 = function(){
                if(document.getElementById("pw1").value==document.getElementById("pw2").value){
                    document.getElementById("result").innerHTML = "패스워드가 일치합니다"
                    document.getElementById("result").style.color = "blue";
                }else{
                    document.getElementById("result").innerHTML = "패스워드가 일치하지 않습니다"
                    document.getElementById("result").style.color = "red";
                }
            };

            function sample4_execDaumPostcode() {
                new daum.Postcode({
                    oncomplete: function(data) {
                        var roadAddr = data.roadAddress; 
                        document.getElementById('postcode').value = data.zonecode;
                        document.getElementById("Address1").value = roadAddr;
                    }
                }).open();
            }
        </script>

    </body>
</html>