회원가입을 할 때 각 항목이 올바른 형식인지 검사를 한다. 이러한 유효성 검사 기능을 자바스크립트와 html로 구현해 보았다.
각 항목별 유효성 검사는 아래와 같은 기준으로 하였다.
유효성 검사 기준
아이디 : 4~12자 숫자와 영어 대소문자문 가능
비밀번호 : 4~12자 숫자와 영어 대소문자문 가능
비밀번호 확인 : 비밀번호와 같은지 확인
메일주소 : @이가 있는지와 .com .kr 로 끝나듯이 끝자리에서 2~3번째에 .이 있어야 한다.
주민번호 : 주민번호 계산식으로 확인
주소 : 다음 postcode로 입력 받는다.
생일 : 주민번호가 맞으면 자동으로 입력
관심분야 : 적어도 1개가 선택 되어야 한다.
본래 유효성 검사는 주로 자바스크립트로 이루어지지만 html5에서 pattern 기능이 추가되어 html에서 정규표현식으로 유효성 검사가 가능하여 pattern을 비록하여 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
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script src="회원가입_유효성.js"></script>
</head>
<audio src="Kalimba.mp3" controls autoplay loop> </audio>
<form class="" action="mailto:2015270241@korea.ac.kr" method="post" onsubmit="return checked()">
<table align="center" bordercolor="#CCDDFF" border="1" cellspacing="0">
<tr>
<th colspan="2" bgcolor="#CCDDFF">회원 기본 정보</th>
</tr>
<tr>
<th bgcolor="#EEEEEE">아이디:</th>
<td>
<input type="text" name="my_id" value="" minlength="4" maxlength="12" size="15" pattern="[a-zA-Z0-9]{4,12}" title="4~12자의 영문 대소문자와 숫자로만 입력." required/> <!--patter으로 아이디 유효성 검사 minlength와 maxlength로 글자 수 제한-->
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">비밀변호:</th>
<td>
<input type="password" id="pw" name="my_password" value="" minlength="4" maxlength="12" size="15" pattern="[a-zA-Z0-9]{4,12}" title="4~12자의 영문 대소문자와 숫자로만 입력."required/> <!--patter으로 비밀번호 유효성 검사 minlength와 maxlength로 글자 수 제한-->
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">비밀번호확인:</th>
<td>
<input type="password" id="pw_cf" name="my_password_confirm" onkeyup="check_pw()" value="" maxlength="12" size="15" required>
<span id="pw_check_msg"></span>
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">메일주소:</th>
<td>
<input type="email" name="my_mail" value="" size="20" pattern="[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}" required> 예) id@domain.com <!--patter으로 메일 유효성 검사 -->
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">이름:</th>
<td>
<input type="text" name="my_name" value="" size="20" required>
</td>
</tr>
<tr>
<th colspan="2" bgcolor="#CCDDFF">개인 신상 정보</th>
</tr>
<tr>
<th bgcolor="#EEEEEE">주민등록번호:</th>
<td>
<input type="text" id="my_address1" name="my_address" value="" size="20" maxlength="6" pattern="[0-9]{6}" title="잘못입력하였습니다. 예)123456-1234567." required/> -
<input type="password" id="my_address2" name="my_address" value="" size="20" maxlength="7" pattern="[0-9]{7}" title="잘못입력하였습니다. 예)123456-1234567." onkeyup="my_address_check()" required/>
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">주소:</th>
<td>
<input type="text" id="postcode" placeholder="우편번호" readonly >
<input type="button" id="postcode_button" onclick="open_Postcode()" value="우편번호 찾기"><br>
<input type="text" id="road_address" placeholder="도로 주소" readonly><input type="text" id="address" placeholder="지번 주소"readonly><br>
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">생일:</th>
<td>
<input type="text" name="my_year" id="my_year" value="" size="4" maxlength="4" readonly>년
<input type="text" name="my_month" id="my_month" value="" size="2" maxlength="2" readonly>월
<input type="text" name="my_day" id="my_day" value="" size="2" maxlength="2" readonly>일
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">관심분야:</th>
<td>
<input type="checkbox" name="my_hobby" value="computer">컴퓨터
<input type="checkbox" name="my_hobby" value="internet">인터넷
<input type="checkbox" name="my_hobby" value="trip">여행
<input type="checkbox" name="my_hobby" value="movie">영화감상
<input type="checkbox" name="my_hobby" value="music">음악감상
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE">자기소개:</th>
<td>
<textarea name="my_intro" rows="5" cols="50" style="resize: none;"></textarea>
</td>
</tr>
</table>
<div class="" align="center">
<br>
<input type="submit" value="회원 가입">
<input type="reset" value="다시 입력">
</div>
</form>
</body>
</html>
|
cs |
회원가입_유효성.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
|
function open_Postcode(){ //다음 카카오 주소찾기
new daum.Postcode({
oncomplete: function(data) {
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('postcode').value = data.zonecode;
document.getElementById("road_address").value = data.roadAddress;
document.getElementById("address").value = data.jibunAddress;
}
}).open();
}
function check_pw(){ //비밀번호 확인
var p = document.getElementById('pw').value;
var p_cf = document.getElementById('pw_cf').value;
if (p!=p_cf) {
document.getElementById('pw_check_msg').innerHTML = "비밀번호가 다릅니다. 다시 확인해 주세요.";
}
else {
document.getElementById('pw_check_msg').innerHTML = "";
}
if (p_cf=="") {
document.getElementById('pw_check_msg').innerHTML = "";
}
}
function my_address_check(){ //주민번호 검사
var addr1 = document.getElementById('my_address1').value;
var addr2 = document.getElementById('my_address2').value;
var num = 0;
if (addr1.length == 6 && addr2.length == 7) { //주민번호가 다 입력되면 공식적용
for (var i = 0; i < addr1.length; i++) {
num += parseInt(addr1[i])*(i+2);
}
for (var i = 0; i < addr2.length-1; i++) {
num += parseInt(addr2[i])*(((i+6)%8)+2);
}
num = num %11;
if(num ==1||num==0){
num=11;
}
if(parseInt(addr2[6]) == (11-num)){
if(addr2[0]=='1'||addr2[0]=='2'){
document.getElementById('my_year').value="19"+addr1.substring(0,2); //주민번호가 맞으면 생일에 적용
}
else if(addr2[0]=='3'||addr2[0]=='4'){
document.getElementById('my_year').value="20"+addr1.substring(0,2); //주민번호가 맞으면 생일에 적용
}
document.getElementById('my_month').value=addr1.substring(2,4);
document.getElementById('my_day').value=addr1.substring(4,6);
}
else{
document.getElementById('my_address2').value=""; //틀리면 alert
alert("주민번호가 잘못되었습니다.");
document.getElementById('my_year').value="";
document.getElementById('my_month').value="";
document.getElementById('my_day').value="";
}
}
else {
document.getElementById('my_year').value=""; //주민번호 고칠시 생일도 초기화
document.getElementById('my_month').value="";
document.getElementById('my_day').value="";
}
}
function checked(){ //form 유효성 검사
var p = document.getElementById('pw');
var p_cf = document.getElementById('pw_cf');
var count = 0;
var check = document.getElementsByName('my_hobby');
for (var i = 0; i < check.length; i++) { // 관심분야 검사
if (check[i].checked) {
count = 1;
break;
}
}
if (p.value != p_cf.value) { //비밀번호 확인
alert("비밀번호가 일치하지 않습니다. 확인해 주세요");
p_cf.focus();
return false;
}
if (document.getElementById('postcode').value=="") { //주소 확인
alert("주소를 입력해주세요");
document.getElementById('postcode_button').focus();
return false;
}
if (count == 0) { //관심분야 확인
alert("관심분야를 체크해 주세요");
return false;
}
else {
return true;
}
}
|
cs |
'html, javacript' 카테고리의 다른 글
| [HTML][display속성] span 과 div의 차이 (1) | 2020.07.11 |
|---|---|
| [HTML] 회원가입 폼 만들기 (0) | 2020.07.04 |
| [HTML][Java Script] 배열 메소드 (push, pop, shift, sort, reverse) (0) | 2020.07.04 |
| [HTML][Java Script] 현재시간 출력하기 (1) | 2020.07.04 |
| [HTML] CSS, 자바스크립트 외부에서 호출하기 (0) | 2020.07.04 |
댓글