<html>
    <head>
        <title>회원 가입 페이지</title>
        <script language="javascript">
            function validate() {
                var bIsValid = false;

                bIsValid = validateID();
                if (!bIsValid) return false;

                bIsValid = validatePassword();
                if (!bIsValid) return false;
               
                bIsValid = validateEmail();
                if (!bIsValid) return false;

                bIsValid = validatePIN();
                if (!bIsValid) return false;

                //첫 번째 날짜 검사 함수를 사용합니다.
                validateBirth1();
                //두 번째 날짜 검사 함수를 사용하려면
                //위의 줄을 주석처리하고 아래 두 줄의 주석을 해제하세요.
                //bIsValid = validateBirth2();
                //if (!bIsValid) return false;

                alert("모든 정보가 올바르게 입력되었습니다.");
                return bIsValid;
            }

            function validateID() {
                var objID = document.getElementById("id");
                var objRegex = new RegExp(/^[a-zA-Z0-9]{4,12}$/);

                var bResult = objRegex.test(objID.value);
                if (!bResult) {
                    alert("ID는 4자에서 12자 사이의 영문 대/소문자와 숫자로만 입력해야 합니다.");
                    objID.value = "";
                    objID.focus();
                }

                return bResult;
            }

            function validatePassword() {
                var objID = document.getElementById("id");
                var objPwd1 = document.getElementById("pwd1");
                var objPwd2 = document.getElementById("pwd2");
                var objRegex = new RegExp(/^[a-zA-Z0-9]{4,12}$/);

                var bResult = objRegex.test(objPwd1.value);
                if (!bResult) {
                    alert("비밀 번호는 4자에서 12자 사이의 영문 대/소문자와 숫자로만 입력해야 합니다.");
                    objPwd1.value = "";
                    objPwd2.value = "";
                    objPwd1.focus();

                    return false;
                }

                bResult = objPwd1.value == objPwd2.value;
                if (!bResult) {
                    alert("두 비밀 번호가 일치하지 않습니다.");
                    objPwd1.value = "";
                    objPwd2.value = "";
                    objPwd1.focus();

                    return false;
                }

                bResult = objPwd1.value != objID.value;
                if (!bResult) {
                    alert("비밀 번호는 ID와 동일하면 안됩니다.");
                    objPwd1.value = "";
                    objPwd2.value = "";
                    objPwd1.focus();

                    return false;
                }

                return true;
            }

            function validateEmail() {
                var objEmail = document.getElementById("email");
                var objRegex = new RegExp(/^[a-zA-Z0-9][w.-]*[a-zA-Z0-9]@[a-zA-Z0-9][w.-]*[a-zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]$/);

                if (!objRegex.test(objEmail.value)) {
                    alert("올바른 메일 주소가 아닙니다.");
                    objEmail.value = "";
                    objEmail.focus();
                    return false;
                }

                return true;
            }

            function validatePIN() {
                var objPin = document.getElementById("jumin");
                var key = "234567892345";
                var objArray = new Array();

                if (objPin.value.length != 13) {
                    alert("주민등록번호 13자리를 입력해 주세요.");
                    objPin.value = "";
                    objPin.focus();
                    return false;
                }

                if (isNaN(objPin.value)) {
                    alert("주민등록번호는 숫자로만 이루어져 있습니다.");
                    objPin.value = "";
                    objPin.focus();
                    return false;
                }

                for (var i=0;i<key.length;i++) {
                    var num1 = objPin.value.charAt(i);
                    var key1 = key.charAt(i);

                    objArray.push(parseInt(num1) * parseInt(key1));
                }

                var sum = 0;
                for (var i=0;i<objArray.length;i++) {
                    sum += parseInt(objArray[i]);
                }

                sum = 11 - (sum % 11);
                if (objPin.value.charAt(12) != sum) {
                    alert("잘못된 주민번호 입니다.");
                    objPin.value = "";
                    objPin.focus();
                    return false;
                }

                return true;
            }

            function validateBirth1() {
                var objPin = document.getElementById("jumin");
                var nYear = 0, nMonth = 0, nDay = 0;

                switch (objPin.value.charAt(6)) {
                    case "1":
                    case "2":
                        nYear = 1900 + parseInt(objPin.value.substr(0, 2));
                        break;
                    case "3":
                    case "4":
                        nYear = 2000 + parseInt(objPin.value.substr(0, 2));
                        break;
                }
               
                nMonth = parseInt(objPin.value.substr(2, 2));
                nDay = parseInt(objPin.value.substr(4, 2));

                var objYear = document.getElementById("byear");
                var objMonth = document.getElementById("bmonth");
                var objDay = document.getElementById("bday");

                objYear.value = nYear;

                for (var i=0;i<objMonth.length;i++) {
                    if (objMonth.options[i].value == nMonth) {
                        objMonth.options[i].selected = true;
                        break;
                    }
                }

                for (var i=0;i<objDay.length;i++) {
                    if (objDay.options[i].value == nDay) {
                        objDay.options[i].selected = true;
                        break;
                    }
                }
            }

            function validateBirth2() {
                var objYear = document.getElementById("byear");
                var objMonth = document.getElementById("bmonth");
                var objDay = document.getElementById("bday");

                var nYear = objYear.value;
                var nMonth = objMonth.options[objMonth.selectedIndex].value - 1;
                var nDay = objDay.options[objDay.selectedIndex].value;

                var date = new Date(nYear, nMonth, nDay);
               
                if (date.getMonth() != nMonth) {
                    alert("올바른 날짜가 아닙니다.");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form action="mailto:iwebgenie@hanmail.net" method="post" onsubmit="return validate()">
        <table border="0" cellpadding="3" cellspacing="1" bgcolor="#6CAEFC" align="center">
            <tr>
                <td bgcolor="#B6CFF1" colspan="2" align="center">
                    <b>회원 기본 정보</b>
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>아이디:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="text" id="id" size="15">
                    4~12자의 영문 대소문자와 숫자로만 입력
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>비밀번호:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="password" id="pwd1" size="15">
                    4~12자의 영문 대소문자와 숫자로만 입력
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>비밀번호확인:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="password" id="pwd2" size="15">
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>메일주소:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="text" id="email" size="20">
                    예) id@domain.com
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>이름:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="text" id="id" size="20">
                </td>
            </tr>
            <tr>
                <td bgcolor="#B6CFF1" colspan="2" align="center">
                    <b>개인 신상 정보</b>
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>주민등록번호:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="text" id="jumin" size="20">
                    예) 1234561234567
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>생일:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="text" id="byear" size="5">년
                    <select id="bmonth">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>월
                    <select id="bday">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</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>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>관심분야:</b></td>
                <td bgcolor="#FFFFFF">
                    <input type="checkbox" name="favorite" value="컴퓨터">컴퓨터
                    <input type="checkbox" name="favorite" value="인터넷">인터넷
                    <input type="checkbox" name="favorite" value="여행">여행
                    <input type="checkbox" name="favorite" value="영화감상">영화감상
                    <input type="checkbox" name="favorite" value="음악감상">음악감상
                </td>
            </tr>
            <tr>
                <td bgcolor="#EAEAEA" align="center"><b>자기소개:</b></td>
                <td bgcolor="#FFFFFF">
                    <textarea id="intro" cols="55" rows="5"></textarea>
                </td>
            </tr>
        </table><br>
        <center>
            <input type="submit" value="회원 가입">
            <input type="reset" value="다시 입력">
        </center>
        </form>
    </body>

</html>
이 게시물을..