① 소스 내용
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>회원가입 유효성 체크</title>
<script type="text/javascript">
function validate() {
// 이메일검사
// 4글자이상(\w=[a-zA-Z0-9_],[\w-]:'-'까지는 허용) @가 나오고
// hanmail.net, naver.com, lycos.co.kr, iei.or.kr
// 1글자 이상(주소).글자 가 1~3번 반복
var userid = document.getElementById("userid");
// 첫글자는 반드시 영문소문자, 4~12자로 이루어지고, 숫자가 하나 이상 포함되어야한다.
// 영문소문자와 숫자로만 이루어져야 한다.
// \d : [0-9]와 같다. {n,m} : n에서 m사이
if(!chk(/^[a-z][a-z\d]{3,11}$/, userid, "잘못된 형식의 ID입니다.")) return false;
if(!chk(/[\d]/, userid, "잘못된 형식의 ID입니다.")) return false;
//alert(re.test(userid.value));
var pass = document.getElementById("pass");
var pass1 = document.getElementById("pass1");
if(!pwchk(pass, pass1, "비밀번호가 다릅니다."))
//if(!pwchk(pass.value, pass2.value)) return false;
// 이름 검사 : 2글자 이상,한글로만 입력
// 통과하지 못하면 한글로 2글자 이상을 넣으세요 메세지 출력
var name = document.getElementById("name");
if(!chk(/^[가-힝]{2,}$/, name, "한글만 입력하세요!!!(2글자 이상)")) return false;
var email = document.getElementById("email");
if(!chk(/^[\w-]{4,}@[\w-]+(\.\w+){1,3}$/, email, "이메일 형식이 잘못되었습니다."));
var tel1 = document.getElementById("tel1");
var tel2 = document.getElementById("tel2");
var tel3 = document.getElementById("tel3");
if(tel1.value != ''){
if(!chk(/^0(2|1[016789])$/, tel1, "앞자리는 2~3자리 숫자")) return false;
if(!chk(/^\d{3,4}$/, tel2, "둘째자리는 3~4자리 숫자")) return false;
if(!chk(/^\d{4}$/, tel3, "셋째자리는 4자리 숫자")) return false;
}
var email = document.getElementById("email");
//return false;
}
function chk(re, e, msg){
if(re.test(e.value)) return true;
alert(msg);
e.value="";
e.focus();
return false;
}
function pwchk(e1, e2, msg){
if(e1 == e2) return true;
alert(msg);
e.value="";
e.focus();
return false;
}
</script>
</head>
<body>
<h1>회원가입 유효성 체크</h1>
<form action="" method="post" onsubmit="return validate();">
<!-- input타입이 텍스트인경우 일반 텍스트로 입력받는다. -->
<label for="userid">* 유저아이디</label>
<input type="text" name="userid" id="userid" /> <br />
<!-- password인 경우 입력한 값이 보이지 않는다. -->
<label for="pass">* 비밀번호</label>
<input type="password" name="pass" id="pass" /> <br />
<label for="pass1">* 비밀번호확인</label>
<input type="password" name="pass1" id="pass1" /> <br />
<label for="name">* 이름</label>
<input type="text" name="name" id="name" /> <br />
<label for="email">* 이메일</label>
<input type="text" name="email" id="email" /> <br />
<label for="tel1">전화번호</label>
<input type="text" name="tel1" id="tel1" maxlength="3"/>-
<input type="text" name="tel2" id="tel2" maxlength="4"/>-
<input type="text" name="tel3" id="tel3" maxlength="4"/> <br />
<!-- select는 option중 한가지를 선택하도록 한다. -->
<label for="job">직업</label>
<select name="job" id="job">
<option>개발자</option>
<option>프로그래머</option>
<option>자영업자</option>
</select> <br />
<!-- radio는 여러개 선택이 불가능하다. -->
<label for="gender">성별</label>
<input type="radio" name="gender" value ="m" /> 남
<input type="radio" name="gender" value ="f" /> 여 <br />
<label for="hobby">취미</label>
<!-- checkbox는 여러개 선택이 가능하다. -->
<input type ="checkbox" name="hobby" value="reading" /> 독서
<input type ="checkbox" name="hobby" value="drama" /> 드라마보기
<input type ="checkbox" name="hobby" value="soccer" /> 축구 <br />
<input type ="checkbox" name="hobby" value="movie" /> 영화보기
<input type ="checkbox" name="hobby" value="basket" /> 농구
<input type ="checkbox" name="hobby" value="game" /> 게임 <br />
<!-- 입력한 값을 리셋한다. -->
<input type="reset" value="리셋" />
<!-- 입력한 값을 제출한다. -->
<input type="submit" value="완료" />
</form>
</body>
</html>
② 실행 화면
회원가입 유효성 체크
'WEB > JavaScript' 카테고리의 다른 글
| WEB 3일차 네번째) 자바스크립트의 정규식 (0) | 2012.09.13 |
|---|---|
| WEB 3일차 세번째) 자바스크립트의 DATE 함수 (0) | 2012.09.13 |
| WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기 (0) | 2012.09.13 |
| WEB 3일차 첫번째) 자바스크립트 (0) | 2012.09.13 |
모데스티