| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- #jQuery#mouse#over
- #db#froup#by
- #자바스크립트#텍스트#알람#alert
- #자바스크립트#만년달력#달력
- #자바스크립트#alert
- #C언어#for#간단#예제
- #html#프레임
- #클릭#숨기기#보이기
- #alert#자바스크립트#checkbox#alert
- #C언어#숫자비교#삼항연산자
- #select#from#distinct
- #C언어#do#while#계산기#함수
- #C언어#scanf#fflush
- #자바스크립트#접속시간#시간
- #C언어#if
- #C언어#do#while#계산기
- #db#join#inner#cross
- #db#데이터베이스#select
- #html#테이블#table
- #getElementById#id
- #C언어#사각형
- #증감#연산자
- #db#order#by
- #자바스크립트#회원가입#유효성#검사
- #C언어#성적처리#점수#등급
- #db#where
- #C언어#타입#printf
- #자바스크립트#시계#실시간시계
- #alert#자바스크립트#radio#check
- #C언어#switch#case#계산기#함수
- Today
- Total
선택장애
자바스크립트 - 회원가입 유효성 검사 본문
//자바스크립트 공부한거라서 유효성을 모두 검사한 후 회원가입을 누르면
//email로 넘어갑니다~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>회원가입</title>
<script language="javascript">
function checked()
{
var idtext = document.getElementById("ide");
//아이디의 id값
var patext = document.getElementById("pass");
//비밀번호의 id값
var cpatext = document.getElementById("cpass");
//비밀번호확인의 id값
var mtext = document.getElementById("mail");
//e-mail의 id값
var nametext = document.getElementById("name");
//이름의 id값
var hobby = document.getElementsByName("hobby");
//체크박스의 취미 id값
var intro = document.getElementById("intro");
//자기소개란 id값
var id = idtext.value;
var password = patext.value;
var cpassword = cpatext.value;
var mail = mtext.value;
var name = nametext.value;
var regExp1 = /^[a-zA-Z0-9]{4,12}$/;
//id와 비밀번호의 유효성 검사
var regExp2 = /[a-z0-9]{2,}@[a-z0-9-]{2,}\.[a-z0-9]{2,}/i;
//e-mail의 유효성 검사
var regname = /^[가-힝]{2,}$/;
//이름의 유효성 검사
if(!regExp1.test(id))
//아이디 유효성 검사 후 4~12자의 영문 대소문자와 숫자의 유효성이 안 맞다면
//공백을 주고 알람을 띄운다.
//밑에 동일한 유효성 검사
{
alert("형식에 맞춰 ID를 입력하세요");
idtext.value = "";
idtext.focus();
return false;
}
else if (!regExp1.test(password))
{
alert("형식에 맞춰 비밀번호를 입력하세요");
patext.value = "";
patext.focus();
return false;
}
else if (!(cpassword.slice(0, cpassword.length) === password.slice(0, password.length)))
{
alert("비밀번호가 동일하지 않습니다.");
cpatext.value = "";
cpatext.focus();
return false;
}
else if ((cpassword.slice(0, cpassword.length) === id.slice(0, id.length)))
{
alert("비밀번호가 ID와 동일하면 안됩니다.");
patext.value = "";
patext.focus();
cpatext.value = "";
cpatext.focus();
return false;
}
else if (!regExp2.test(mail))
{
alert("올바른 이메일 형식이 아닙니다.");
mtext.value = "";
mtext.focus();
return false;
}
else if (!regname.test(name))
{
alert("이름을 제대로 입력하세요");
nametext.value = "";
nametext.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(intro.value==""){
alert("자기 소개란을 100자 내외로 기입해주세요");
return false;
}
else
{
if(checks())
{
alert("회원가입을 진행합니다");
return true;
}
else
{
return false;
}
}
}
//주민등록번호 유효성 검사
function check_jumin() {
var jumin = document.getElementById('pnum').value + document.getElementById('nnum').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 checks() {
if (check_jumin()) {
alert("올바른 주민등록번호입니다.");
var year1 = document.getElementById("year");
var num1 = document.getElementById('pnum');
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('pnum');
var num2 = document.getElementById('nnum');
alert("똑바로 입력하세요");
num1.value = "";
num1.focus();
num2.value = "";
return false;
}
//주민번호 유효성 검사 끝
</script>
</head>
<body>
<!-- form 태그
유효성 검사가 다 된 후 버튼 클릭시 qpalzm200@naver.com로 메일써지도록 설정
-->
<!-- 밑에는 그냥 Html -->
<form action="mailto:qpalzm200@naver.com?subject=[s]" method="post" name="data" onsubmit="return checked()" >
<table name="data" width="800" height="230" border="1" align ="center">
<tr>
<td colspan="2" align ="center" bgcolor="#B0E0E6" >회원 기본 정보</td>
</tr>
<tr>
<td align ="center" >아이디 </td>
<td ><input type="text" name="아이디" id="ide" size="20" maxlength="12"/>4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align ="center">비밀번호 </td>
<td><input type="password" id="pass" name="비밀번호" size="20" maxlength="12" />4~12자의 영문 대소문자와 숫자로만 입력 </td>
<td></td>
</tr>
<tr>
<td align ="center">비밀번호 확인</td>
<td><input type="password" name="비밀번호확인" id="cpass" size="20" maxlength="12" /></td>
</tr>
<tr>
<td align ="center">메일주소</td>
<td ><input type="text" name="메일" id="mail" size="20" />예)1jin94@naver.com</td>
</tr>
<tr>
<td align ="center">이름:</td>
<td ><input type="text" name="이름" id="name" size="20" /></td>
</tr>
<tr>
<td colspan="2" align="center">개인 신상 정보</td>
</tr>
<tr>
<td align ="center">주민등록번호</td>
<td ><input type="text" name="주민번호" id="pnum" size="6"maxlength="6" /> - <input type="text" id="nnum" name="my_name" size="7" maxlength="7"/>예)123456-1234567</td>
</tr>
<tr>
<td align ="center">생일:</td>
<td><input type="text" name="my_name" size="5" maxlength="4" id="year" />년
<select name= "mon" >
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 월
<select name="day">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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 align ="center">관심분야:</td>
<td>
<input type="checkbox" name="hobby" value="컴퓨터">컴퓨터
<input type="checkbox" name="hobby" value="인터넷">인터넷
<input type="checkbox" name="hobby" value="영화" >영화
<input type="checkbox" name="hobby" value="여행" >여행
<input type="checkbox" name="hobby" value="음악감상" >음악감상
</td>
</tr>
<tr align ="center">
<td>자기소개</td>
<td><textarea name="자기소개" id = "intro" cols="70" rows="8"></textarea></td>
</tr>
</table><br />
<div align ="center">
<input type="submit" value="회원가입" />
<input type="reset" value="다시입력" />
</div>
</form>
</body>
</html>
'자바스크립트' 카테고리의 다른 글
| radio box - 클릭시 input box 값 바꾸기 (0) | 2020.09.01 |
|---|---|
| 자바스크립트 - 만년달력 (0) | 2017.08.14 |
| 자바스크립트 - getElementById 간단예제 (0) | 2017.08.14 |
| 자바스크립트 - 마우스 오른쪽 버튼 막기 (0) | 2017.08.14 |
| 자바스크립트 - 글자 입력받아 글자바꾸기 (0) | 2017.08.14 |