1
2
3
 
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>무제 문서</title>
 
<style>
 
    table td, th{ border-bottom:1px solid;border-bottom-color:#999;}
 
    table tr {height:35px;}
 
</style>
 
<script src = "script.js">
    
</script>
 
</head>
 
 
 
<body>
 
    <center>
 
        <form  name= "join" method="get">
 
            <table width="60%">
 
                <tr bgcolor="#CCFFFF">
 
                        <th colspan="2">회원 기본 정보</th>
 
                </tr>
 
                <tr>
 
                    <td>아이디 : </td>
 
                    <td><input type="text" maxlength="12" id="id" min="4" size="12" />  4~12자의 영문 대소문자와 숫자로만 입력</td>
 
                </tr>
 
                 <tr>
 
                    <td>비밀번호 : </td>
 
                    <td><input type="password" maxlength="12" id="password" min="4" size="12" />  4~12자의 영문 대소문자와 숫자로만 입력</td>
 
                </tr>
 
                <tr>
 
                    <td>비밀번호 확인 : </td>
 
                    <td><input type="password" maxlength="12" id="checkpw" min="4" size="12" /></td>
 
                </tr>
 
                <tr>
 
                    <td>메일 주소 : </td>
 
                    <td><input type="email" id="email" size="20" />  예) id@domain.com</td>
 
                </tr>
 
                <tr>
 
                    <td>이름 : </td>
 
                    <td><input type="text" id="name" size="25" /></td>
 
                </tr>
 
                 <tr bgcolor="#CCFFFF">
 
                        <th colspan="2">개인 신상 정보</th>
 
                </tr>
 
                 <tr>
 
                    <td>주민등록번호 : </td>
 
                    <td><input type="text" id= "jumin" maxlength="13" size="15" onkeypress="checkJumin()"/> 예)1234561234567</td>
 
                </tr>
 
                 <tr>
 
                    <td>생일 : </td>
 
                    <td>
 
                        <input type="text" id="year" size = "4"> 년
                        
                        <select name="getBDayMonth" id="getBDayMonth" size="1">
                           <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 name="getBDayDay" size="1">
                           <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>
 
                    </td>
 
                </tr>
 
                <tr>
 
                    <td>관심분야 확인 : </td>
 
                    <td><input type="checkbox" name="hobby" value="computer"/>컴퓨터
 
                        <input type="checkbox" name="hobby" value="internet"/>인터넷
 
                        <input type="checkbox" name="hobby" value="travel"/>여행
 
                        <input type="checkbox" name="hobby" value="movie"/>영화감상
 
                        <input type="checkbox" name="hobby" value="music"/>음악감상
 
                    </td>
 
                </tr>
 
                 <tr>
 
                    <td>자기소개 : </td>
 
                    <td><textarea id = "introduce" cols="50" rows="5"></textarea>
 
                    </td>
 
                </tr>
 
            </table>
 
            <br /><br />
 
            <input type="button" onclick = "checking()" value="회원 가입"/>
            <input type="reset" value="초기화" />
 
         </form>
 
    </center>
 
</body>
 
</html>
 
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var check = /^[a-zA-Z0-9]{4,12}$/;                                    //영문자 소문자, 대문자 사용, 0-9까지 숫자 허용, 문자는 4자리에서 12자리 까지만
var emailcheck = /^[0-9a-zA-Z]*@[0-9a-zA-Z]*.[a-zA-Z]{2,3}$/;        //영문자 소문자, 대문자 사용, 0-9까지 숫자 허용,@, . 필수, i는 대소문자 상관 없음
var namecheck = /^[가-힣]{2,6}$/;                                        //한글 가 부터 힇까지 사용 가능하고 2-6자리 까지만
      
function checking(){
 
    var id = document.getElementById("id");
    var pw = document.getElementById("password");
    var checkpw = document.getElementById("checkpw");
    var email = document.getElementById("email");
    var name = document.getElementById("name");
    var jumin = document.getElementById("jumin");
    var hobby = document.getElementsByName("hobby");
    var introduce = document.getElementById("introduce");
    var year = document.getElementById("year");  
    
    if(!check.test(id.value)) { alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력");id.value = "";id.focus(); return false;}        //사용자가 입력한 id가 정규식 만족 안할 때 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(!check.test(pw.value)) { alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력");pw.value = "";pw.focus();return false;}        //사용자가 입력한 pw가 정규식 만족 안할 때 alert로 알려주고 포커스 주고, return으로 함수 종료
    if (id.value==pw.value){alert("아이디와 비밀번호는 달라야합니다. 다시 설정해주세요."); pw.focus(); return false;}                        //사용자가 입력한 id와 pw가 같을 시 다시 입력하도록
    if(pw.value!= checkpw.value) { alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");checkpw.value="";checkpw.focus();return false;}    //사용자가 입력한 checkpw가 비밀번호와 일치 안할 때 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(!emailcheck.test(email.value)) { alert("이메일이 일치하지 않습니다.");email.value="";email.focus();return false;}            //사용자가 입력한 email가 정규식 만족 안할 때 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(!namecheck.test(name.value)) { alert("이름을 다시 입력하세요.");name.value="";name.focus();return false;}                //사용자가 입력한 name가 정규식 만족 안할 때 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(jumin.value == ""을 || jumin.value.length != 13){ alert("주민번호를 입력해주세요"); jumin.focus();return false;}                                        //사용자가 입력한 주민번호가 입력 안될 시 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(year.value == ""){ alert("생년월일을 입력해주세요"); year.focus();return false;}                                        //사용자가 입력한 주민번호가 입력 안될 시 alert로 알려주고 포커스 주고, return으로 함수 종료
    if(!hobby[0].checked &&!hobby[1].checked &&!hobby[2].checked && !hobby[3].checked &&!hobby[4].checked ){        //사용자가 관심 분야 선택하지 않았을 때 alert로 알려주고 return으로 함수 종료
        alert("관심분야를 선택하세요.");return false;
    }
    if(introduce.value==""){alert("자기소개 입력하세요");introduce.focus();introduce.value="";return false;}                //사용자가 자기소개 입력하지 않았을 때 alert로 알려주고 return으로 함수 종료
 
}
 
function checkJumin(){                                            //사용자 주민번호 입력 시 호출되는 함수
        var jumin = document.getElementById("jumin");
        var year = document.getElementById("year");     
            
        if(isNaN(jumin.value)){alert("숫자만 입력해 주세요.");jumin.focus();}                                                    //숫자로 입력하지 않았을 때        
        
        else if(jumin.value.length==13){                                                                                                            //위에 조건 만족 할 때
                
                    var arr=new Array(13);
                    for(var i=0;i<jumin.value.length;i++){                                                                    //사용자가 입력한 주민번호 arr라는 배열에 저장
                        arr[i]=parseInt(jumin.value.charAt(i));}
 
                    var M=11 - (((arr[0] * 2) + (arr[1] * 3) + (arr[2] * 4) + (arr[3] * 5) + (arr[4] * 6) + (arr[5] * 7) + (arr[6] * 8) + (arr[7] * 9) + (arr[8] * 2) + (arr[9] * 3) + (arr[10] * 4) + (arr[11] * 5)) % 11);
                    if (M > 9){                                                    
                            M -= 10;
                    }
                    if(M == arr[12]){                                        //주민번호 바를 때
                          var y = parseInt(jumin.value.substring(0,2));        //년 저장
                          var m = parseInt(jumin.value.substring(2,4));        //달 저장
                          var d = parseInt(jumin.value.substring(4,6));        //날 저장
                          if(jumin.value.substring(6,7) == 3 ||jumin.value.substring(6,7) == 4 )year.value = 2000 + y;    //뒷 번호 3,4로 시작할 경우 2000년 생으로 
                          else year.value = 1900 + y;                        //아닐 시 1900년 생으로
 
                          if(m>0 && m<13)  {
                              join.getBDayMonth.value = m;                    //select 달을 value로 저장
                              if(d>0 && d<32) 
                                  join.getBDayDay.value = d;                //select 날을 value로 저장
                              else {                                                                                                //계산 한 값이 주민번호 마지막 번호와 일치하지 않을 때                                        
                                    alert("잘못된 주민번호 입니다. 다시 입력해 주세요");
                                    jumin.value="";
                                    jumin.focus();
                                    return false;
                                }
                          } else {                                                                                                //계산 한 값이 주민번호 마지막 번호와 일치하지 않을 때                                        
                                    alert("잘못된 주민번호 입니다. 다시 입력해 주세요");
                                    jumin.value="";
                                    jumin.focus();
                                    return false;
                                }
                    }
                    else {                                    //계산 한 값이 주민번호 마지막 번호와 일치하지 않을 때                                        
                        alert("잘못된 주민번호 입니다. 다시 입력해 주세요");
                        jumin.value="";
                        jumin.focus();
                        return false;
                    }
                    
                }
        
    }
 
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  
저작자표시 비영리

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

GET/POST 데이터 디코딩  (0) 2019.06.20
쿠키와 세션  (0) 2019.06.20
예제_push,pop  (0) 2019.06.20
예제_input type 활용  (0) 2019.06.20
예제_계산기  (0) 2019.06.20

+ Recent posts

티스토리툴바