Web

회원가입 유효성 검사

GOD03219 2018. 10. 19. 21:12
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
<html>
 
<head>
  <title>회원가입 유효성 검사</title>
 
</head>
 
<body>
 
  <br>
 
  <form action="mailto:dmsqlcjstk77@naver.com" method="post" onsubmit="return validate()">
    <table border="1" cellspacing="0.5" align="center">
      <tr>
        <td colspan="2" bgcolor="#F5A9D0" align="center"> <b> 회원 기본 정보 </td>
      </tr>
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 아이디: </td>
        <td> <input type="text" id="id" size="12">
          4~12자리의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
      <tr>
        <td bgcolor="#BDBDBD" align="center"><b> 비밀번호:</td>
        <td> <input type="password" id="pass" size="12">
          4~12자리의 영문 대소문자와 숫자로만 입력
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 비밀번호확인: </b></td>
        <td> <input type="password" id="passcheck" size="12"> </td>
      </tr>
 
      <tr>
        <td bgcolor="#BDBDBD" align="center"> <b>메일주소:</td>
        <td> <input type="text" id="email" size="20">
          예) id@domain.com
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b>이름:</td>
        <td> <input type="text" id="name" size="20"> </td>
      </tr>
 
      <tr>
        <td colspan="2" bgcolor="#F5A9D0" align="center"><b>개인 신상 정보 </td>
      </tr>
      <tr>
        <td bgcolor="#BDBDBD" align="center"> <b>주민등록번호:</td>
        <td> <input type="text" id="citizenNum1" onkeypress="birth()" size="20">
          예)1234561234567
        </td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"><b> 생일:</td>
        <td> <input type="text" id="year1" size="4"> 년
          <select id="month1">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select> 월
          <select id="date">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</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="#BDBDBD" align="center"><b> 관심분야:</td>
        <td>
          <input type="checkbox" name="radio" value="컴퓨터"> 컴퓨터
          <input type="checkbox" name="radio" value="인터넷"> 인터넷
          <input type="checkbox" name="radio" value="여행"> 여행
          <input type="checkbox" name="radio" value="영화감상">영화감상
          <input type="checkbox" name="radio" value="음악감상"> 음악감상</td>
      </tr>
 
      <tr>
        <td bgcolor="#D8D8D8" align="center"> <b> 자기소개:</td>
        <td> <textarea rows=5 cols=60 size=100></textarea> </td>
      </tr>
 
 
    </table>
    <br><br>
 
    <div align="center">
      <input type="submit" value="회원 가입">
      <INPUT TYPE="RESET" value="다시 입력">
    </div>
 
  </form>
<script src="signup.js"></script>
</body>
 
</html>
 
cs

 

signup.js

 

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
//<script>
 
 
  function validate(){
 
    var check=/^[a-zA-Z0-9]{4,12}$/// 아이디, 비밀번호, 비밀번호 확인 유효성검사
    var emailCheck = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //메일주소 유효성검사
 
    var id=document.getElementById("id");
    var pass=document.getElementById("pass");
    var passcheck=document.getElementById("passcheck");
    var email = document.getElementById("email");
    var name=document.getElementById("name");
    var citizenNum = document.getElementById("citizenNum1");
    var cnFormulation =0;
    var total = 0;
 
// 아이디 입력 안 했을때
if(id.value==""){
  alert("아이디를 입력해주세요.");
  id.focus();
  return false;
 
}
// 아이디 정규식 체크
   if(check.test(id.value)){
 
     //return true;
   }else {
     alert("아이디가 잘못된 형식입니다. 다시 입력해주세요.");
     id.value="";
     id.focus();
     return false;
   }
 
   // 비밀번호 입력 안했을때
         if(pass.value==""){
             alert("비밀번호를 입력해주세요.");
             pass.focus();
             return false;
         }
 
        //비밀번호 정규식 체크
    if(check.test(pass.value)&&id.value!=pass.value){
      //정규식 체크를 통과하고 아이디와같지 않을때 통과
      //return true;
    }else{
 
      if(id.value==pass.value)
      {
        alert("아이디와 비밀번호가 일치합니다. 다시 입력해주세요.");
        pass.value="";
        pass.focus();
        return false;
      }else{
 
        alert("비밀번호가 잘못된 형식입니다. 다시 입력해주세요.");
        pass.value="";
        pass.focus();
        return false;
      }
 
    }
    // 비밀번호 확인란 입력 안했을 때
   if(passcheck.value==""){
       alert("비밀번호 확인란에 입력해주세요.");
       passcheck.focus();
       return false;
   }
 
   //비밀번호 확인 정규식 체크
   if(check.test(passcheck.value)&&pass.value==passcheck.value){
     //return true;
   }else {
 
     alert("비밀번호가 일치하지 않습니다. 다시 확인해주세요.");
     passcheck.value="";
     passcheck.focus();
     return false;
   }
 
   // 이메일 입력 안했을 때
   if(email.value=="")
   {
      alert("이메일을 입력해 주세요");
      email.focus();
      return false;
  }
   // 이메일 정규식 체크
  if(!check2(emailCheck, email, "적합하지 않은 이메일 형식입니다."))
  {
    return false;
  }
 
 
 
   // 이름란 입력안했을때
   if(name.value==""){
     alert("이름을 입력해 주세요");
     name.focus();
     return false;
   }
 
 
   //주민번호란 입력안했을 때
   if(citizenNum.value==""){
     alert("주민번호를 입력해 주세요");
     citizenNum.focus();
     return false;
 
   }
 
 
 
             if(citizenNum.value.length == 13){
 
                //주민등록번호 계산공식
                total=   (citizenNum.value[0]*2)+(citizenNum.value[1]*3)+(citizenNum.value[2]*4)+
                (citizenNum.value[3]*5)+(citizenNum.value[4]*6)+(citizenNum.value[5]*7)+
                (citizenNum.value[6]*8)+(citizenNum.value[7]*9)+(citizenNum.value[8]*2)+
                (citizenNum.value[9]*3)+(citizenNum.value[10]*4)+(citizenNum.value[11]*5);
                cnFormulation =(11-(total%11))%10;
 
                //주민등록번호 유효여부
                if(citizenNum.value[12!= cnFormulation){
                   alert("잘못된 주민등록번호입니다.");
                   citizenNum.value="";
                   citizenNum.focus();
                   return false;
                }
 
             }else{
                    alert("주민등록번호는 13자리 입니다.");
                    citizenNum.value="";
                    citizenNum.focus();
                    return false;
             }
 
 } // validate ()함수끝
 
 function check2(re, what, message) {
 
        if(re.test(what.value)) {
            return true;
        }else{
 
          alert(message);
          what.value = "";
          what.focus();
          return false;
        }
 
 
    }//check2()
 
    //주민등록번호란의 입력 주민번호로 생년월일로 자동입력
         function birth(){
            var citizenNum1 = document.getElementById("citizenNum1");
            var year = document.getElementById("year1");
            var month = document.getElementById("month1");
            var day = document.getElementById("date");
 
            year.value = "19"+citizenNum1.value[0]+citizenNum1.value[1];
            month.value = citizenNum1.value[2]+citizenNum1.value[3];
            day.value =  citizenNum1.value[4]+citizenNum1.value[5];
 
         }//birth()
 
 
//</script>
 
cs