<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
a {
color: #000;
text-decoration: none;
cursor: pointer;
}
a:active, a:hover {
text-decoration: underline;
color: #F28011;
}
.btn {
color: #333;
border: 1px solid #333;
background-color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
cursor:pointer;
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */
}
.btn:hover, .btn:active, .btn:focus {
background-color: #e6e6e6;
border-color: #adadad;
color:#333;
}
.boxTF {
border: 1px solid #999;
padding: 5px 5px;
background-color: #fff;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.selectField {
border: 1px solid #999;
padding: 4px 5px;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
textarea:focus, input:focus {
outline: none;
}
.member {
width: 600px; margin: 30px auto 25px;
}
.title {
width:100%;
font-size: 16px;
font-weight: bold;
padding: 13px 0;
}
.table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table th, .table td {
padding: 7px 0;
}
.table-border tr {
border-bottom: 1px solid #ccc;
}
.table-border tr:first-child {
border-top: 2px solid #ccc;
}
.table-form tr td:first-child{
background: #e6e6e6;
text-align: center;
width: 120px;
}
.table-form tr td:nth-child(2) {
text-align: left;
padding-left: 10px;
}
.table-form input[type=text]:focus, .table-form input[type=password]:focus {
border: 1px solid tomato;
}
</style>
<script type="text/javascript">
function isValidDateFormat(date) {
if(date.length !=8 && date.length != 10) return false;
var p = /(\.)|(\-)|(\/)/g;
date = date.replace(p, "");
var format = /^[12][0-9]{7}$/;
if(! format.test(date) ) return false;
var y = parseInt( date.substr(0,4) );
var m = parseInt( date.substr(4,2) );
var d = parseInt( date.substr(6) );
if(m<1 || m>12) return false;
var lastDay = (new Date(y,m,0)).getDate();
if(d<1 || d>lastDay) return false;
return true;
}
function memberOk() {
var f = document.memberForm;
var s;
// 아이디는 5~10자 이며 영문자로 시작하고 영숫자와_로 구성
// i 대소문자를 구분하지 않음 [a-zA-Z] 와 같은 의미
// \w 영어, 숫자, _ 까지 가능
if(! /^[a-z]\w{4,9}$/i.test(f.userId.value)) {
alert("아이디는 영문자로 시작하며, 5~10자이내의 영숫자로 구성합니다.")
f.userId.focus();
return;
}
// 패스워드는 5~10자이며 영문자와 하나이상의 숫자 또는 특수문자를 포함해야함
s = f.userPwd.value;
if( ! /^(?=.*[a-z])(?=.[!@#$%^&*-=+]|.*[0-9]).{5,10}$/i.test(s)) {
alert("패스워드는 5~10자 이내로 영문자와 숫자 또는 특수문자로 구성합니다.");
f.userPwd.focus();
return;
}
if( s != f.userPwd1.value ) {
alert("패스워드가 일치하지 않습니다.");
f.userPwd.focus();
return;
}
// 이름은 한글 2~5자 이내이거나 영어 이름 : 이름(2~20) 성(2~20)
// 이름은 한글 2~5자 이내
s = f.userName.value;
if(! /^[가-힣]{2,5}$/.test(s) ) {
alert("이름을 입력하세요");
f.userName.focus();
return;
}
// 생년월일
if(! isValidDateFormat(f.birth.value) ) {
alert("생년월일 입력하세요");
f.birth.focus();
return;
}
if(! f.email1.value.trim() ) {
alert("이메일을 입력하세요");
f.email1.focus();
return;
}
if(! f.email2.value.trim() ) {
alert("이메일을 입력하세요");
f.email2.focus();
return;
}
if(! f.tel1.value ) {
alert("전화번호를 입력하세요");
f.tel1.focus();
return;
}
if(! /^\d{3,4}$/.test(f.tel2.value) ) {
alert("전화번호를 입력하세요");
f.tel2.focus();
return;
}
if(! /^\d{4}$/.test(f.tel3.value) ) {
alert("전화번호를 입력하세요");
f.tel3.focus();
return;
}
alert("회원 가입 성공 ^^");
}
function changeEmail() {
var f = document.memberForm;
var s = f.selectEmail.value;
if(s === "direct") {
f.email2.value = "";
f.email2.readOnly = false;
f.email1.focus();
} else {
f.email2.value = s;
f.email2.readOnly = true;
f.email1.focus();
}
}
</script>
</head>
<body>
<div class="member">
<div class="title">
<h3><span>|</span> 회원 가입</h3>
</div>
<form name="memberForm" method="post">
<table class="table table-border table-form">
<tr>
<td>아 이 디</td>
<td>
<input type="text" name="userId" id="userId" maxlength="10" class="boxTF" style="width: 50%;">
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="password" name="userPwd" class="boxTF" maxlength="10" style="width: 50%;">
</td>
</tr>
<tr>
<td>패스워드 확인</td>
<td >
<input type="password" name="userPwd1" class="boxTF" maxlength="10" style="width: 50%;">
</td>
</tr>
<tr>
<td>이 름</td>
<td>
<input type="text" name="userName" maxlength="10" class="boxTF" style="width: 50%;">
</td>
</tr>
<tr>
<td>생년월일</td>
<td>
<input type="date" name="birth" class="boxTF" style="width: 50%;">
</td>
</tr>
<tr>
<td>이 메 일</td>
<td>
<select name="selectEmail" class="selectField" onchange="changeEmail();">
<option value="">선 택</option>
<option value="naver.com">네이버 메일</option>
<option value="hanmail.net">한 메일</option>
<option value="hotmail.com">핫 메일</option>
<option value="gmail.com">지 메일</option>
<option value="direct">직접입력</option>
</select>
<input type="text" name="email1" maxlength="30" class="boxTF" style="width: 33%;"> @
<input type="text" name="email2" maxlength="30" class="boxTF" style="width: 33%;" readonly="readonly">
</td>
</tr>
<tr>
<td>전화번호</td>
<td>
<select name="tel1" class="selectField">
<option value="">선 택</option>
<option value="010">010</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="032">032</option>
<option value="033">033</option>
<option value="041">041</option>
<option value="042">042</option>
<option value="043">043</option>
<option value="044">044</option>
<option value="051">051</option>
<option value="052">052</option>
<option value="053">053</option>
<option value="054">054</option>
<option value="055">055</option>
<option value="061">061</option>
<option value="062">062</option>
<option value="063">063</option>
<option value="064">064</option>
<option value="070">070</option>
</select>
<input type="text" name="tel2" maxlength="4" class="boxTF" style="width: 33%;"> -
<input type="text" name="tel3" maxlength="4" class="boxTF" style="width: 33%;">
</td>
</tr>
<tr>
<td>우편번호</td>
<td>
<input type="text" name="zip" maxlength="7" class="boxTF" readonly="readonly" style="width: 50%;">
<button type="button" class="btn">우편번호검색</button>
</td>
</tr>
<tr>
<td valign="top">주 소</td>
<td>
<label style="display: block;">
<input type="text" name="addr1" maxlength="50" class="boxTF" readonly="readonly" style="width: 96%;">
</label>
<label style="display: block; margin-top: 2px;">
<input type="text" name="addr2" maxlength="50" class="boxTF" style="width: 96%;">
</label>
</td>
</tr>
<tr>
<td>직 업</td>
<td>
<input type="text" name="job" maxlength="10" class="boxTF" style="width: 50%;">
</td>
</tr>
</table>
<table class="table">
<tr>
<td align="center">
<button type="button" class="btn" onclick="memberOk();"> 회원가입 </button>
<button type="reset" class="btn"> 다시입력 </button>
<button type="button" class="btn"> 가입취소 </button>
</td>
</tr>
<tr height="40">
<td align="center">
<span style="color: blue;"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>