-
작성일 : 13-07-29 12:03 / 조회 : 12,931
jquery ui 를 이용한 회원가입
글쓴이 : 외인 
<pre>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
”http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>jQuery 회원가입</title>
<style type=“text/css”>
#jointable table{width:600px;}
#jointable th{text-align: right; background-color:orange;}
#jointable td input {border:1px solid seagreen;}
</style>
<link rel=“stylesheet” href=”<a href=“http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” />
<script type=“text/javascript” src=”<a href=“http://code.jquery.com/jquery-1.9.1.min.js” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script type=“text/javascript” src=”<a href=“http://code.jquery.com/ui/1.9.2/jquery-ui.js” style=“padding: 0px; margin: 0px; outline: none; -webkit-transition: color 0.2s linear; transition: color 0.2s linear;”>http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script>
<script type=“text/javascript” src=“jquery.ui.datepicker-ko.js”></script>
<script type=“text/javascript”>
$(document).ready(function() {
$(”#btn_join”).click(function() {
var tel1_pattern = /(^01[016789]$)/; //정규식
//alert(“ok”);
if ($(”#id”).val() == “”) {
alert(”아이디를 꼭 입력하세요!”);
$(”#id”).focus();
} else if ($(”#pwd”).val() == “”) {
alert(”비밀번호를 꼭 입력하세요!”);
$(”#pwd”).focus();
} else if ($(”#pwd2”).val() == “”) {
alert(”비밀번호확인 을 꼭 입력하세요!”);
$(”#pwd2”).focus();
} else if ($(”#pwd”).val() != $(”#pwd2”).val()) {
alert(”비밀번호와 비밀번호 확인이 일치하지않습니다.”);
$(”#pwd”).val(”“);
$(”#pwd2”).val(”“);
$(”#pwd1”).focus();
} else if ($(”#name”).val() == “”) {
alert(”이름을 꼭 입력하세요!”);
$(”#name”).focus();
} else if ($(”#tel1”).val() == “”) {
alert(”전화번호 첫번째자리 입력하세요!”);
$(”#tel1”).focus();
} else if ($(”#tel1”).val().length != 3) {
alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);
$(”#tel1”).val(”“);
$(”#tel1”).focus();
} else if (isNaN($(”#tel1”).val())) {
alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);
$(”#tel1”).val(”“);
$(”#tel1”).focus();
} else if (!tel1_pattern.test($(”#tel1”).val())) {
alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)
$(”#tel1”).val(”“)
$(”#tel1”).focus();
}
/*
if($(”#tel1”).val() != “” & $(”#tel1”).val().length ==3 & !isNaN($(”#tel1”).val()) ){
alert(“okkkkkkk”);
var pattern = /(^01[016789]$)/; //정규식 슬래쉬(/)로 시작해서, 슬래쉬(/)로 끝났다.
var tel1=$(”#tel1”).val();
if(! pattern.test(tel1)){
//틀리면
alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)
$(”#tel”).val(”“)
$(”#tel”).focus();
}
}*/
else if ($(”#tel2”).val() == “”) {
alert(”전화번호 두번째자리를 입력하세요!”);
$(”#tel2”).focus();
} else if ($(”#tel1”).val().length != 3) {
alert(”전화1을 3개의 숫자로 꼭 입력하세요!”);
$(”#tel2”).val(”“);
$(”#tel2”).focus();
} else if (isNaN($(”#tel2”).val())) {
alert(”전화2을 3~4개의 숫자로 꼭 입력하세요!”);
$(”#tel2”).val(”“);
$(”#tel2”).focus();
} else if ($(”#tel2”).val() != “” & $(”#tel2”).val().length > 4 & isNaN($(”#tel2”).val())) {
alert(“okkkkkkk”);
var pattern = /(^01[016789]$)/; //정규식 슬래쉬(/)로 시작해서, 슬래쉬(/)로 끝났다.
var tel1 = $(”#tel2”).val();
if (!pattern.test(tel1)) {
//틀리면
alert(“010, 011, 016, 017, 018, 019,o19만 가능합니다.”)
$(”#te2”).val(”“)
$(”#te2”).focus();
}
}
else if ($(”#tel3”).val() == “”) {
alert(”전화번호 세번째자리를 입력하세요!”);
$(”#tel3”).focus();
} else if ($(”#addr”).val() == “”) {
alert(”주소를 꼭 입력하세요!”);
$(”#addr”).focus();
} else if ($(”#birth”).val() == “”) {
alert(”생일을 꼭 입력하세요!”);
$(”#birth”).focus();
} else if ($(”#job”).val() == “”) {
alert(”직업을 꼭 선택하세요!”);
$(”#job”).focus();
} else if ($(”#man”).is(’:checked’) == false && $(”#woman”).is(’:checked’) == false) {
alert(”남자또는 여자를 꼭 선택하세요!”);
} else if ($(”#email”).val() == “”) {
alert(”이메일을 꼭 입력하세요!”);
$(”#email”).focus();
} else if ($(”#intro”).val() == “”) {
alert(”자기소개를 꼭 입력하세요!”);
$(”#intro”).focus();
} else {
alert(“ok”);
}
});
//$(”#birth”).datepicker();
//$.datepicker.setDefaults( $.datepicker.regional[ “” ] );
//$(”#birth”).datepicker($.datepicker.regional[“ko”]);
$(”#birth”).datepicker();
});
</script>
</head>
<body>
<h1>회원 가입</h1>
<!—
id, pwd, name, tel, addr, birth, job, gender, email, intro
—>
<form action=”“>
table>tr*11>th*1+td*1
<table id=“jointable”>
<tr>
<th>아이디</th>
<td><input type=“text” name=“id” id=“id” size=“12” maxlength=“12” /></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=“password” name=“pwd” id=“pwd” size=“12” maxlength=“12” /></td>
</tr>
<tr>
<th>비밀번호확인</th>
<td><input type=“password” name=“pwd2” id=“pwd2” size=“12” maxlength=“12” /></td>
</tr>
<tr>
<th>이름</th>
<td><input type=“text” name=“name” id=“name” size=“12” maxlength=“12” /></td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type=“text” name=“tel1” id=“tel1” size=“3” maxlength=“3” />-
<input type=“text” name=“tel2” id=“tel2” size=“4” maxlength=“4” />-
<input type=“text” name=“tel3” id=“tel3” size=“4” maxlength=“4”/>
</td>
</tr>
<tr>
<th>주소</th>
<td><input type=“text” name=“addr” id=“addr” maxlength=“100” /></td>
</tr>
<tr>
<th>생일</th>
<td>
<input type=“text” id=“birth” size=“8” maxlength=“8” />
</td>
</tr>
<tr>
<th>직업</th>
<td>
<select id = “job”>
<option value=”“>———
<option value=”학생”>학생
<option value=”직장인”>직장인
<option value=”자영업”>자영업
<option value=”주부”>주부
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type=“radio” id=“man” name=“gender” value=“M” checked=“checked” >남자
<input type=“radio” id=“woman” name=“gender” value=“W”>여자
</td>
</tr>
<tr>
<th>이메일</th>
<td><input type=“text” name=“email” id=“email” size=“50” maxlength=“50” /></td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea rows=“5” cols=“40” id=“intro” name=“intro”></textarea>
</td>
</tr>
<tr>
<td colspan=“2”>
<input type=“button” id=“btn_join” value=”가입”>
<input type=“reset” id=“btn_cancel” value=”취소”>
</td>
</tr>
</table>
</form>
</body>
</html>
</pre>
