[JavaScript] 회원가입 유효성검사

Web/HTML5&CSS&JavaScript 2018. 10. 22. 11:15





UI




코드


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
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
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function Validation(){
        var RegExp = /^[a-zA-Z0-9]{4,12}$/; //id와 pwassword 유효성 검사 정규식
//이메일 유효성검사
        var e_RegExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
        var n_RegExp = /^[가-힣]{2,15}$/; //이름 유효성검사 정규식
        
        var jnumArr = new Array(); // 입력 한 주민번호를 저장해줄 배열 선언
        var jnumplus = [2,3,4,5,6,7,8,9,2,3,4,5,1]; // 주민번호 계산할때 쓰이는 배열
        var jnumSum = 0; //objNum[i] * jnumplus[i] 더한 값
        
        var objId = document.getElementById("id"); //아이디
        var objPwd = document.getElementById("pwd"); //비밀번호
        var objPwd2 = document.getElementById("pwd2"); //비밀번호확인
        var objEmail = document.getElementById("mail");//메일
        var objName = document.getElementById("name"); //이름
        var objNum = document.getElementById("num"); //주민번호
    
        
        // ================ ID 유효성검사 ================ //
        
        if(objId.value==''){
            alert("ID를 입력해주세요.");
            return false;
        }
        if(!RegExp.test(objId.value)){ //아이디 유효성검사
            alert("ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");        
            return false;
        }
        
        // ================ PASSWORD 유효성검사 ===============//
        if(objPwd.value==''){ // 비밀번호 입력여부 검사
            alert("Password를 입력해주세요.");
            return false;
        }
        if(!RegExp.test(objPwd.value)){ //패스워드 유효성검사
            alert("Password는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.");
            return false;
        }
        if(objPwd.value==objId.value){ //패스워드와 ID가 동일한지 검사
            alert("Password는 ID와 동일하면 안됩니다.");
            return false;
        }
        
        if(objPwd2.value!=objPwd.value){ //비밀번호와 비밀번호확인이 동일한지 검사
            alert("비밀번호가 틀립니다. 다시 확인하여 입력해주세요.");
            return false;
        }
        
        // ================ email 유효성검사 ================ //
        if(e_RegExp.value == ''){ // 이메일 입력여부 검사
            alert("이메일을 입력해주세요.");
            return false;
        }
        
        if(!e_RegExp.test(objEmail.value)){ //이메일 유효성 검사
            alert("올바른 이메일 형식이 아닙니다.");
            return false;
        }
        
        // ================ 이름 유효성검사 ================ //        
        if(objName.value ==''){
            alert("이름을 입력해주세요.");
            return false;
        }
        if(!n_RegExp.test(objName.value)){
            alert("특수문자,영어,숫자는 사용할수 없습니다. 한글만 입력하여주세요.");
            return false;
        }
        
        // ================ 주민등록번호 유효성검사 ================ //
        if(objNum.value == ''){ // 주민번호입력 형식이 알맞은지 검사 
            alert("주민번호 형식이 올바르지 않습니다."); 
            
            return false;
        }
        
        for(var i = 0; i<objNum.value.length;i++){ // 입력받은 주민번호 jnumArr배열에 넣기
            jnumArr[i] = objNum.value.charAt(i);
        }
 
        for(var i = 0; i<objNum.value.length-1;i++){ // 입력받은 주민번호 jnumArr배열에 넣기
            jnumSum+=jnumArr[i]*jnumplus[i];
        }
        jnumSum = (11-(jnumSum % 11)) % 10; //주민번호 계산
        
        if(jnumSum != jnumArr[12]){ // 계산되서 나온 결과값(jnumSum)과 입력한 주민번호의 마지막이 맞지 않으면 
            alert("주민번호가 올바르지 않습니다."); //alert 창 띄우기
            
            return false;
        } else{ //형식이 올바르면 생년월일 자동으로 입력하기
            
        }
    }
</script>
</head>
<body>
    <form action="MAILTO:kboyeon58@daum.net" method="post" enctype="text/plain" onsubmit="return Validation();">
        <table align="center" width="600" height="200" border="1"  cellpadding="3" cellspacing="0" bordercolor=#0872b0>
    
        <!-- 회원정보 -->
        <tr>
            <td bgcolor=#ccecff align="center" colspan="2"><b>회원 기본 정보</b></td>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>아이디: </b></td>
            <td><input type="text" Name="id" id="id" SIZE="20" maxlength="12">&nbsp4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>비밀번호: </b></td>
            <td><input type="password" Name="pwd" id="pwd" SIZE="20" maxlength="12">&nbsp4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>비밀번호 확인:</b></td>
            <td><input type="password" Name="pwd" id="pwd2" SIZE="20" maxlength="12"></td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>메일주소: </b></td>
            <td><input type="text" Name="mail" id="mail" SIZE="20">&nbsp예&#41id&#64domain.com</td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>이름: </b></td>
            <td><input type="text" Name="name" id="name" SIZE="20"> </td>
        </tr>
        
    
        <!-- 개인신상정보 -->
        <tr>
            <td bgcolor=#ccecff align="center" colspan="2"><b>개인 신상 정보</b></td>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>주민등록번호: </b></td>
            <td><input type="text" Name="num" id="num" SIZE="20" maxlength="13">&nbsp예&#41 1234561234567</td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>생일: </b></td>
            <td><input type="text" Name="birt" SIZE="10" maxlength="4">년
                <select name="mon">
                          <option value="1" selected="selected">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="day">
                          <option value="1" selected="selected">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=#e6e6e6 align="center"><b>관심분야:</b></td>
            <td><input type="checkbox" name="com" value="컴퓨터"> 컴퓨터
                <input type="checkbox" name="com" value="인터넷"> 인터넷
                <input type="checkbox" name="com" value="여행"> 여행
                <input type="checkbox" name="com" value="영화감상"> 영화감상
                <input type="checkbox" name="com" value="음악감상"> 음악감상
            </td>
        </tr>
        <tr>
            <td bgcolor=#e6e6e6 align="center"><b>자기소개: </b></td>
            <td><textarea cols="70" rows="7" id="introduce" name="introduce"></textarea></td>
        </tr>
    </table>
    <br>
    <div align="center">
        <input type="submit" value="회원가입">
        <input type="reset" value="다시입력">
    </div>
    </form>
</body>
</html>

cs



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

'Web > HTML5&CSS&JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트(js) push, shift, pop, sort, reverse 함수  (0) 2018.10.19
[JavaScript] 자바스크립트를 이용한 계산기 만들기  (0) 2018.10.19
[JavaScript]자바스크립트를 이용한 배경색 변경하기  (0) 2018.10.19

티스토리툴바