티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<title>회원가입</title>
<script type="text/javascript">
function checks(){
//값 불러오기
var getId = document.getElementById("id");
var getPw = document.getElementById("password");
var getPwCheck = document.getElementById("password_check");
var getMail = document.getElementById("mail");
var getName = document.getElementById("name");
var getHobby = document.getElementsByName("hobby");
var getNum = document.getElementById("id_num");
var getNumBack = document.getElementById("id_num_back");
var getIntro = document.getElementById("intro");
//value 불러오기
var id = getId.value;
var pw = getPw.value;
var pwCheck = getPwCheck.value;
var mail = getMail.value;
var name = getName.value;
var idNum = getNum.value;
var idNumBack = getNumBack.value;
//유효성 검사
var regExp = /^[a-zA-Z0-9]{4,12}$/; //id, password
var regName = /^[가-힝]{2,}$/; //name
var regMail = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i; //mail
if(!regExp.test(id)) { //id
alert("아이디 다시 설정");
getId.value ="";
getId.focus();
return false;
} else if(!regExp.test(pw)) { //password
alert("비밀번호 다시 설정");
getPw.value="";
getPw.focus();
return false;
} else if(!(pwCheck.slice(0, pwCheck.length) == pw.slice(0, pw.length))) { //password 동일한지 확인
alert("비밀번호 서로 안맞아");
getPwCheck.value="";
getPwCheck.focus();
return false;
} else if((pw.slice(0, pwCheck.length) == id.slice(0, id.length))) { //password랑 id 다른지 확인
alert("비밀번호와 id가 동일하면 다매요!");
getPw.value="";
getPwCheck.value="";
getPw.focus();
return false;
} else if(!regMail.test(mail)){ //메일주소 확인
alert("이메일 형식 이상하노");
getMail.value="";
getMail.focus();
return false;
} else if(!regName.test(name)) { //이름 확인
alert("이름 다시");
getName.value="";
getName.focus();
return false;
} else if(document.data.hobby[0].checked==false &&
document.data.hobby[1].checked==false &&
document.data.hobby[2].checked==false &&
document.data.hobby[3].checked==false &&
document.data.hobby[4].checked==false){ //체크박스
alert("박스 체크좀");
return false;
} else if(getIntro.value=="") { //자기소개
alert("자기소개 적어주셈");
return false;
}
}
//주민등록번호 유효성 검사
function check_jumin() {
var jumin = document.getElementById("id_num").value + document.getElementById("id_num_back").value;
//pnum = 주민번호 앞자리
//nnum = 주민번호 뒷자리
var fmt = /^\d{6}[1234]\d{6}$/;
if (!fmt.test(jumin)) {
return false;
}
var birthYear = (jumin.charAt(6) <= "2") ? "19" : "20";
birthYear += jumin.substr(0, 2);
var birthMonth = jumin.substr(2, 2) - 1;
var birthDate = jumin.substr(4, 2);
var birth = new Date(birthYear, birthMonth, birthDate);
if (birth.getYear() % 100 != jumin.substr(0, 2) ||
birth.getMonth() != birthMonth ||
birth.getDate() != birthDate) {
return false;
}
var buf = new Array(13);
for (var i = 0; i < 13; i++) buf[i] = parseInt(jumin.charAt(i));
multipliers = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
for (var sum = 0, i = 0; i < 12; i++) sum += (buf[i] *= multipliers[i]);
if ((11 - (sum % 11)) % 10 != buf[12]) {
return false;
}
return true;
}
function checked() {
if (check_jumin()) {
alert("올바른 주민등록번호입니다.");
var year1 = document.getElementById("year");
var num1 = document.getElementById('id_num');
var num2 = num1.value;
var num3 = num2.substring(0, 2);
var num4 = num2.substring(2, 4);
var num5 = num2.substring(4, 6);
year1.value = "19" + num3;
document.data.mon.value = num4;
document.data.day.value = num5;
return true;
}
else
var num1 = document.getElementById('id_num');
var num2 = document.getElementById('id_num_back');
alert("똑바로 입력하세요");
num1.value = "";
num1.focus();
num2.value = "";
return false;
}
</script>
</head>
<body>
<form action="mailto:jessicasla@nate.com?subject=[s]" name="data" method="post" onsubmit="return checks()">
<!--밑에 submit 누르면 메일로 보내짐-->
<table border="1" bordercolor="grey" align="center">
<tbody>
<tr>
<td colspan="2" bgcolor="lightblue" align="center">회원 기본 정보</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">아이디</td>
<td><input size="15" type="text" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">비밀번호</td>
<td><input size="15" type="password" id="password"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">비밀번호 확인</td>
<td><input size="15" type="password" id="password_check"></td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">메일 주소</td>
<td><input type="text" id="mail"> 예) id@domain.com</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">이름</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td colspan="2" bgcolor="lightblue" align="center"> 개인 신상 정보</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">주민등록번호</td>
<td>
<input size="7" type="text" id="id_num">
- <input size="7" type="password" id="id_num_back">
예)123456-1234567
</td>
</tr>
<tr>
<td bgcolor="lightgrey" align="center">생일</td>
<td>
<input size="5" type="text" id="year">년
<select id="month">
<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 id="day">
<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>
<tr>
<td bgcolor="lightgrey" align="center">관심분야</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 bgcolor="lightgrey" align="center">자기소개</td>
<td><textarea cols="50" style="margin: 0px; height: 300px; width:480px" id="intro"></textarea>
<!--크기 조정 가능-->
</td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="회원 가입">
<!--누르면 메일이 보내짐-->
<input type="reset" value="다시 입력">
<!--누르면 초기화-->
</p>
</form>
</body>
</html>
'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글
| [JAVA SCRIPT] 자료형 (0) | 2018.09.28 |
|---|---|
| [JAVA SCRIPT] 이미지 자동 변경 (0) | 2018.04.15 |
| [JAVA SCRIPT] 만년 달력 (0) | 2018.04.05 |
| [JAVA SCRIPT] 계산기 (0) | 2018.04.05 |
| [JAVA SCRIPT] 배열 관련 객체 (0) | 2018.04.05 |
댓글