반응형

[HTML 레이아웃]




[HTML 코드]

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
<body>
    <form name=form method="post" onsubmit="return checkAll()">
      <table width=750 border="1px" align=center>
        <tr>
          <th colspan="2" bgcolor="#E4F7BA" >회원 기본 정보</th>
        </tr>
        <tr>
          <td>아이디</td>
          <td><input type="text" name="userId"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
          <td>비밀번호</td>
          <td><input type="password" name="password1"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
          <td>비밀번호 확인</td>
          <td><input type="password" name="password2"></td>
        </tr>
        <tr>
          <td>메일주소</td>
          <td><input type="text" name="mail"> 예)id@domain.com</td>
        </tr>
        <tr>
          <td>이름</td>
          <td><input type="text" name="name"></td>
        </tr>
        <tr>
          <td>주민등록번호</td>
          <td>
              <input type="text" name="identi1" style="width:70px">
              -
              <input type="password" name="identi2" style="width:70px">
              </td>
        </tr>
        <tr>
          <td>관심분야</td>
          <td>
            <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>자기소개</td>
          <td><textarea name="introduceMyself" id=intro name=intro cols=50 rows=10></textarea>
            </td>
        </tr>
      </table>
      <p align=center>
        <input type="submit" name="join" value="회원 가입">
        <input type="reset" name="reset" value="다시 입력">
      </p>
    </form>
    </body>
cs


코드설명
1
<form name=form method="post" onsubmit="return checkAll()">
cs
submit 버튼을 누르면 script의 checkAll()가 호출된다.




[JavaScript 코드]



코드설명

checkAll()함수에서는 각각의 input값을 확인하는 함수를 호출하는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function checkAll() {
        if (!checkUserId(form.userId.value)) {
            return false;
        } else if (!checkPassword(form.userId.value, form.password1.value,
                form.password2.value)) {
            return false;
        } else if (!checkMail(form.mail.value)) {
            return false;
        } else if (!checkName(form.name.value)) {
            return false;
        } else if (!checkBirth(form.identi1.value, form.identi2.value)) {
            return false;
        } else if (!checkFavorite()) {
            return false;
        } else if (!checkIntro()) {
            return false;
        }
        return true;
    }
}
s

조건문을 보면 checkUserId함수에서 폼에 입력된 값이 유효성 검사에 맞으면 true를 return해준다.

따라서 if조건문 내로 들어가지 않으므로 다음 조건문을 실행하게 된다.

아래의 else if문도 마찬가지로 똑같이 수행한다.

함수의 매개변수로는 form내에 있는 해당되는 input태그의 id의 값을 가져온다.




1
2
3
4
5
6
7
8
// 공백확인 함수
    function checkExistData(value, dataName) {
        if (value == "") {
            alert(dataName + " 입력해주세요!");
            return false;
        }
        return true;
    }
cs

checkAll함수를 제외한 모든 함수에 첫번째로 들어가 있는 코드가 공백 확인 함수이다.

유효성 검사하면서 값이 공백이라면 "영문 대소문자와 숫자 4~12자리로 입력해야합니다!"라고 출력해도 되지만 공백임을 알려주기 위해 따로 함수로 빼내었다.

매개변수로 들어오는 value는 input태그의 값이고 dataName은 해당되는 input태그의 종류가 무엇인지 알려주는 String 변수이다.

값이 공백일 경우 alert를 통해 사용자에게 공백임을 알리고 false를 return하면서 이 함수를 호출한 함수를 끝내버린다.


이제부터 각각의 유효성 검사 함수를 알아보자.



먼저 볼 함수는 id를 검사하는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function checkUserId(id) {
        //Id가 입력되었는지 확인하기
        if (!checkExistData(id, "아이디를"))
            return false;
 
        var idRegExp = /^[a-zA-z0-9]{4,12}$/; //아이디 유효성 검사
        if (!idRegExp.test(id)) {
            alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.userId.value = "";
            form.userId.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

함수 매개변수로 넘어오는 값은 input태그에 들어가는 값이다.


3라인은 방금전 언급했던 공백확인 함수이다.

만약 id의 값이 공백일 경우 checkExistData함수에서는 false를 return해주므로 !에 의해 if조건문은 true가 된다.

4라인에서 return false를 해주면서 checkAll함수 2번3번 라인에서 script가 끝난다.


이어서 6라인은 아이디 유효성을 검사하는 정규표현식(Regular Expression)이다.

위의 코드에서 사용한 정규표현식을 간단하게 언급하고 가면..

→ / : 자바스크립트의 정규표현식의 처음과 끝을 의미한다.

→ [ ] : 문자셋이다. 예를 들면 [a-z]라고 적을경우 정규표현식에 만족해야하는 값들은 반드시 a~z사이의 값만 넣을 수 있다.

→ ^ : 문장의 처음을 뜻한다.

→ $ : 문장의 마지막을 뜻한다.

→ { } : 문자열 길이를 뜻한다. 예를 들어 {4,12}일 경우 최소 길이 4, 최대 길이 12이다.


/^[a-zA-z0-9]{4,12}$/ 을 분석하면..

→ 영문 대/소문자, 숫자만 사용할 수 있고 길이는 최소 4, 최대 12를 만족해야 정규표현식에 만족한다.


정규표현식에 대해 더 알아보고싶으면

→ https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

여기 들어가서 참고하면 된다.


if조건문에서 test는 정규표현식과 id의 값이 일치하는지 아닌지 확인하는 함수이다.

일치하면 true를 return 일치하지 않으면 false를 return한다.

만약 일치하지 않을 경우 사용자에게 해당 조건을 알려주는 알림창을 띄워준다.

그리고 폼에 입력된 값을 공백으로 초기화하고 포커스를 맞춰준다.


정규표현식과 id의 값이 같을 경우 return true를 하고 다음 함수를 실행한다.



다음은 비밀번호 검사 함수이다.

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
    function checkPassword(id, password1, password2) {
        //비밀번호가 입력되었는지 확인하기
        if (!checkExistData(password1, "비밀번호를"))
            return false;
        //비밀번호 확인이 입력되었는지 확인하기
        if (!checkExistData(password2, "비밀번호 확인을"))
            return false;
 
        var password1RegExp = /^[a-zA-z0-9]{4,12}$/; //비밀번호 유효성 검사
        if (!password1RegExp.test(password1)) {
            alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.password1.value = "";
            form.password1.focus();
            return false;
        }
        //비밀번호와 비밀번호 확인이 맞지 않다면..
        if (password1 != password2) {
            alert("두 비밀번호가 맞지 않습니다.");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
 
        //아이디와 비밀번호가 같을 때..
        if (id == password1) {
            alert("아이디와 비밀번호는 같을 수 없습니다!");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }    
cs

비밀번호가 만족해야할 조건은 

1. 영문 대/소문자와 숫자 4~12자리로 입력할 것

2. 비밀번호 두번 입력했을 때 두번 다 일치할 것

3. 아이디와 비밀번호는 불일치 할 것


3~7라인은 비밀번호 / 비밀번호 확인이 공백인지 확인하기 위한 조건문이다.

조건문이 어떻게 동작하는지 알고싶을 땐 위의 checkId함수 설명을 참고하길 바란다.


checkPassword함수는 매개변수로 id와 두 개로 입력된 password를 받는다.


9~15라인은 비밀번호 유효성을 검사하는 코드로 아이디 유효성 검사 정규표현식과 같다.

위의 checkId함수 설명을 참고하길 바란다.


만약 두번 입력된 값이 틀릴경우 17~23라인 조건문을 실행한다.

사용자에게 입력된 두 비밀번호가 일치하지 않음을 알려준다.

그리고 두 비밀번호 입력창을 공백으로 설정해준 다음 포커스를 첫번째 비밀번호 입력창에 준다.

마지막으로 return false


만약 아이디와 비밀번호가 같을 경우 26~32라인 조건문을 실행한다.

아래의 조건문 실행은 위의 비밀번호 일치 여부 확인하는 조건문과 같다.


비밀번호 모든 조건이 맞을 경우 true를 return..



다음은 이메일을 검사하는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function checkMail(mail) {
        //mail이 입력되었는지 확인하기
        if (!checkExistData(mail, "이메일을"))
            return false;
 
        var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
        if (!emailRegExp.test(mail)) {
            alert("이메일 형식이 올바르지 않습니다!");
            form.mail.value = "";
            form.mail.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

6라인.. 이메일 정규표현식을 보면 

→ ^[A-Za-z0-9_]+[A-Za-z0-9] : 이메일의 경우 첫글자 _가 허용되므로 첫번째 글자 검사식을 따로 두었다.

그 뒤 영문 대/소문자 숫자만 사용 할 수 있게 조건을 걸었다.

→ *[@]{1} : @는 반드시 하나만 입력되어야 한다.

→ *[.]{1} : .은 반드시 하나만 입력되어야 한다.

→ [A-Za-z]{1,3} : 최소 한글자 최대 세글자 까지 입력 가능하다.


7~12라인은 정규표현식과 이메일의 값이 일치하지 않을 경우 조건문을 실행한다.


이메일 값이 정규표현식에 만족할 경우 return true.



다음은 이름 검사 함수이다.

1
2
3
4
5
6
7
8
9
10
11
    function checkName(name) {
        if (!checkExistData(name, "이름을"))
            return false;
 
        var nameRegExp = /^[가-힣]{2,4}$/;
        if (!nameRegExp.test(name)) {
            alert("이름이 올바르지 않습니다.");
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs


5라인은 한글만 입력할 수 있는 정규표현식이다.


이름 값이 정규표현식에 만족할 경우 return true.



다음은 주민등록번호를 검사하는 함수이다.


주민등록번호 유효성을 검사하는 식이 따로 있는데 

주민등록번호 13자리를...

 

1

2 

3 

4 

5 

6 

- 

1 

2 

3 

4 

5 

6 

7 

× 

2 

3 

4 

5 

6 

7 

 

8 

9 

2 

3 

4 

5 

 


주민등록번호 13번째 자리 값을 제외하고 위아래로 각각 값을 곱한 후 각 결과값을 모두 더한다.

더한 값을 sum이라 하면

<11 - (sum % 11) %10>

위의 식에서 도출되는 값과 주민등록번호 13번째 값과 일치하면 유효한 주민등록번호이다.


이를 토대로 주민등록번호 검사하는 함수를 보면..

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
    function checkBirth(identi1, identi2) {
        //birth이 입력되었는지 확인하기
        if (!checkExistData(identi1, "주민등록번호를 ")
                || !checkExistData(identi2, "주민등록번호를 "))
            return false;
 
        var totalIdenti = "" + identi1 + identi2;
 
        var identiArr = new Array();
        var sum = 0;
        var plus = 2;
 
        //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장
        for (var i = 0; i < 12; i++) {
            identiArr[i] = totalIdenti.charAt(i);
            if (i >= 0 && i <= 7) {
                sum += totalIdenti[i] * plus;
                plus++;
                if (i == 7)
                    plus = 2;
            } else {
                sum += totalIdenti[i] * plus;
                plus++;
            }
        }
        //주민등록번호 길이 확인하기
        if (identiArr.length < 12) {
            alert("주민등록번호는 13자리입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        //주민등록번호 유효한지 확인
        var result = 11 - (sum % 11) % 10
        if (result != totalIdenti.charAt(12)) { //주민등록번호가 유효하지 않은 경우
            alert("유효하지않은 주민번호입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
cs

매개변수가 두개인 이유는 폼에서 주민번호 입력창을 두개로 두었다.

이 때문에 totalIdenti라는 변수에 문자열 결합을 해준다.


13~24라인은 유효성 검사를 위해 totalIdenti 값을 identiArr배열에 하나하나 입력을 해준다.

배열에 입력하면서 sum값을 바로 계산해 준다.


위의 주민등록번호 유효성 검사 표를 보면 1번째부터 8번째 자리까지 2부터 순차적으로 값이 올라가면서 곱해지다가

9번째 자리부터는 다시 2로 돌아간다.

6~24라인이 이를 조건식으로 변환한 라인이다.


27~33라인은 주민등록번호 길이가 13자리인지 확인하고


마지막으로 35~42라인이 주민등록번호가 유효한지 확인하는 조건식이다.


주민등록번호가 모든 조건에 만족하였을 경우 return true



다음은 관심분야에서 하나 이상 체크되었는지 확인하는 함수다.

1
2
3
4
5
6
7
8
9
10
11
12
    function checkFavorite() {
        var checkedFavorite = document.getElementsByName("favorite");
 
        //체크된 값이 하나라도 있을경우 바로 true
        for (var i = 0; i < checkedFavorite.length; i++) {
            if (checkedFavorite[i].checked == true) {
                return true;
            }
        }
        alert("관심분야를 체크해주세요!");
        return false;
    }
cs

document.getElementsByName("favorite")는 HTML에서 같은 name("favorite")으로 묶인 checkbox의 값을 배열로 가져온다.


5~9라인은 체크된 값이 하나라도 있을 경우 바로 true를 return시켜줌으로써 함수를 끝낸다.

for문에서 return되지 않는다면 체크된 값이 하나라도 되지 않는 경우이므로 알림창을 띄워주고 return false를 한다.



마지막으로 자기소개 항목에서 값이 들어있는지 확인하는 함수이다.

1
2
3
4
5
6
7
8
    function checkIntro() {
        var text = document.getElementById("intro");
        if (!checkExistData(text.value, "자기소개를")) {
            alert("자기소개를 입력해 주세요!");
            return false;
        } else
            return true;
    }
cs

document.getElementById("intro")는 HTML에서 id("intro")를 가져와 그에 해당되는 값을 입력해준다.

만약 값이 공백일 경우 알림창을 띄워주고 return false를 한다.




전체적인 JavaScript코드이다.

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
<script language="javascript">
    function checkAll() {
        if (!checkUserId(form.userId.value)) {
            return false;
        }
        if (!checkPassword(form.userId.value, form.password1.value,    form.password2.value)) {
            return false;
        }
        if (!checkMail(form.mail.value)) {
            return false;
        }
        if (!checkName(form.name.value)) {
            return false;
        }
        if (!checkBirth(form.identi1.value, form.identi2.value)) {
            return false;
        }
        if (!checkFavorite()) {
            return false;
        }
        if (!checkIntro()) {
            return false;
        }
 
        return true;
    }
 
    // 공백확인 함수
    function checkExistData(value, dataName) {
        if (value == "") {
            alert(dataName + " 입력해주세요!");
            return false;
        }
        return true;
    }
 
    function checkUserId(id) {
        //Id가 입력되었는지 확인하기
        if (!checkExistData(id, "아이디를"))
            return false;
 
        var idRegExp = /^[a-zA-z0-9]{4,12}$/; //아이디 유효성 검사
        if (!idRegExp.test(id)) {
            alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.userId.value = "";
            form.userId.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkPassword(id, password1, password2) {
        //비밀번호가 입력되었는지 확인하기
        if (!checkExistData(password1, "비밀번호를"))
            return false;
        //비밀번호 확인이 입력되었는지 확인하기
        if (!checkExistData(password2, "비밀번호 확인을"))
            return false;
 
        var password1RegExp = /^[a-zA-z0-9]{4,12}$/; //비밀번호 유효성 검사
        if (!password1RegExp.test(password1)) {
            alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야합니다!");
            form.password1.value = "";
            form.password1.focus();
            return false;
        }
        //비밀번호와 비밀번호 확인이 맞지 않다면..
        if (password1 != password2) {
            alert("두 비밀번호가 맞지 않습니다.");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
 
        //아이디와 비밀번호가 같을 때..
        if (id == password1) {
            alert("아이디와 비밀번호는 같을 수 없습니다!");
            form.password1.value = "";
            form.password2.value = "";
            form.password2.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkMail(mail) {
        //mail이 입력되었는지 확인하기
        if (!checkExistData(mail, "이메일을"))
            return false;
 
        var emailRegExp = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
        if (!emailRegExp.test(mail)) {
            alert("이메일 형식이 올바르지 않습니다!");
            form.mail.value = "";
            form.mail.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkName(name) {
        if (!checkExistData(name, "이름을"))
            return false;
 
        var nameRegExp = /^[가-힣]{2,4}$/;
        if (!nameRegExp.test(name)) {
            alert("이름이 올바르지 않습니다.");
            return false;
        }
        return true; //확인이 완료되었을 때
    }
 
    function checkBirth(identi1, identi2) {
        //birth이 입력되었는지 확인하기
        if (!checkExistData(identi1, "주민등록번호를 ")
                || !checkExistData(identi2, "주민등록번호를 "))
            return false;
 
        var totalIdenti = "" + identi1 + identi2;
 
        var identiArr = new Array();
        var sum = 0;
        var plus = 2;
 
        //배열에 주민등록번호 입력 후 유효값 확인하기 위해 sum에 저장
        for (var i = 0; i < 12; i++) {
            identiArr[i] = totalIdenti.charAt(i);
            if (i >= 0 && i <= 7) {
                sum += totalIdenti[i] * plus;
                plus++;
                if (i == 7)
                    plus = 2;
            } else {
                sum += totalIdenti[i] * plus;
                plus++;
            }
        }
        //주민등록번호 길이 확인하기
        if (identiArr.length < 12) {
            alert("주민등록번호는 13자리입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        //주민등록번호 유효한지 확인
        var result = 11 - (sum % 11) % 10
        if (result != totalIdenti.charAt(12)) { //주민등록번호가 유효하지 않은 경우
            alert("유효하지않은 주민번호입니다.");
            form.identi1.value = "";
            form.identi2.value = "";
            form.identi1.focus();
            return false;
        }
        return true; //확인이 완료되었을 때
    }
    function checkFavorite() {
        var checkedFavorite = document.getElementsByName("favorite");
 
        //체크된 값이 하나라도 있을경우 바로 true
        for (var i = 0; i < checkedFavorite.length; i++) {
            if (checkedFavorite[i].checked == true) {
                return true;
            }
        }
        alert("관심분야를 체크해주세요!");
        return false;
    }
 
    //자기소개가 입력되었는지 확인하기
    function checkIntro() {
        var text = document.getElementById("intro");
        if (!checkExistData(text.value, "자기소개를")) {
            alert("자기소개를 입력해 주세요!");
            return false;
        } else
            return true;
    }
</script>
cs


★ 잘못된 정보나 피드백은 언제든 환영입니다. ★


반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[HTML] 회원가입 폼 만들기  (0) 2018.08.17
[HTML/JavaScript] 계산기 만들기  (0) 2018.07.30

+ Recent posts

티스토리툴바