<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<!-- CSS only -->
<style>
*{margin:0; padding:0 ;broder-sizing:border-box;}
ul li {list-style:none; padding:5px 0;}
.clear {clear:both;}
h2 {padding:50px 0 30px; text-align:center;}
.container {width:450px; margin:0 atuo;}
.input-id, .input-zipcode {display:inline-block; width:230px; margin-right:10px;}
.input-birth {float:right; width:340px;}
li:nth-child(5), li:nth-child(6),li:nth-child(10), .btn-login {line-height:40px;}
.frm-btn {margin-top:30px;}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
function idCheck(id) { // 자바스크립트의 변수는 자료형이 없다.
<% // frm = document.regFrm; //<form> 요소 중 regForm 이름을 가진 폼 요소를 frm 변수에 담는다. %>
console.log(id);
if(id == '') { // 아이디 중복 확인 버튼 선택 시 아이디 입력폼에 아이디가 없는 경우/ 만약 아이디 입력폼에 아이디를 입력하지 않고 아이디 중복 확인 버튼을 눌렀으면
alert("아이디를 입력해 주세요.");
<!-- frm.id.focus(); // 아이디 입력폼에 커서를 위치시킨다. -->
document.regFrm.id.focus(); // 아이디 입력폼으로 커서를 위치시킨다.
return; // 메서드(=함수) 종료
}
url = "idCheck.jsp?id="+id;
// idCehck.jsp로 이동하면서 id변수에 사용자가 입력한 id값을 저장하여 get방식으로 전달한다.
// window.open() 윈도우 창을 띄운다.
window.open(url,"IDCheck", "width=300, height=150");
}
function zipCheck() {
url = "zipCheck.jsp?check=y";
// zipCehck.jsp로 이동하면서 chedck변수에 y값을 저장하여 get방식으로 전달한다.
window.open(url,"ZipCodeCheck", "width=500, height=300, scrollbars=yes");
}
</script>
</head>
<!--
옛날 방식 / 요새는 autofocus로 대체한다.
<%// 인터프리터(해석기) 페이지를 다 해석하면 regFrm 요소의 id 입력폼에 커서를 위치시킨다.%>
<body onLoad="regFrm.id.focus()">
-->
<body>
<h2>Member Join</h2>
<div class="container">
<form name="regFrm" action="memberPro.jsp" method="post"> <!-- register : 작성한다 -->
<ul>
<li>
<input type="text" name="id" placeholder="아이디 입력" class="form-control input-id" autofocus required>
<input type="button" value="아이디 중복 확인" onClick="idCheck(this.form.id.value)" class="btn btn-ouline-success"> <!-- this.form.id.value : name -->
<%// 아이디 중복 확인 버튼을 클릭(onClick)하면 idCheck()를 호출하면서 사용자가 입력한 아이디 값을 전달한다. %>
</li>
<li><input type="password" name="pwd" placeholder="비밀번호입력" class="form-control" required></li>
<li><input type="password" name="repwd" placeholder="비밀번호확인" class="form-control" required></li>
<li><input type="text" name="name" placeholder="이름 입력" class="form-control" required></li>
<li>
성별 :
<input type="radio" name="gender" value="1" checked> 남자
<input type="radio" name="gender" value="2" > 여자
</li>
<li>
생일 :
<input type="date" name="birth" class="form-contlol input-birth">
<div class="clear"></div>
</li>
<li><input type="email" name="email" placeholder ="이메일 입력" class=form-control">
<li>
<input type="text" name="zipcode" placeholder="우편번호" class="form-control input-zipcode" readonly>
<input type="button" value="우편 번호 찾기" class ="btn btn-outline-success btn-zipcode" onClick="zipCheck()">
</li>
<li><input type="text" name="addr" placeholder="주소" class="form-control" disabled> </li>
<li>
취미 :
<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="운동" > 운동
</li>
<li>
직업 :
<select name="job" class="form-control">
<option value="0" selected>
<option value="회사원"> 회사원 </option>
<option value="전문직"> 전문직 </option>
<option value="공무원"> 공무원 </option>
<option value="자영업"> 자영업 </option>
<option value="의료인"> 의료인 </option>
<option value="교사"> 교사 </option>
<option value="주부"> 주부 </option>
<option value="무직"> 무직 </option>
<option value="기타"> 기타 </option>
</select>
</li>
<li class ="btn-group frm-btn">
<%// 버튼 요소는 a태그, button 태그, input 태그로 만든다. 페이지를 이동이 필요하면 a 태그를 사용하지만, 페이지 이동이 필요 없으면 button 태그를 사용한다.%>
<% // 회원가입 버튼을 누르면 inputCheck() 함수를 호출하여 데이터 유효성 검증 작업을 한다. %>
<% // <button onClick="inputCheck()" class="btn btn-outline-primary">회원가입</button> <%// outline:고스트버튼 <!--onClick="inputCheck()"-->%>
<button type="reset" class="btn btn-outline-primary">다시쓰기</button>
<a href="login.jsp" class="btn btn-outline-primary btn-login">로그인</a>
</li>
</ul>
</form>
</div>
<script src="js/script.js"></script>
</body>
</html>
<script.js>
function inputCheck() {
if(document.regFrm.id.value == ""){
alert("아이디를 입력하세요.");
document.regFrm.id.focus();
return;
}else if(document.regFrm.pwd.value == ""){
alert("비밀번호를 입력하세요.");
document.regFrm.pwd.focus();
return;
}else if(document.regFrm.repwd.value == ""){
alert("비밀번호 확인을 입력하세요.");
document.regFrm.repwd.focus();
return;
}
if(document.regFrm.pwd.value != document.regFrm.repwd.value){
alert("비밀번호가 일치하지 않습니다.");
document.regFrm.repwd.value = "";
document.regFrm.repwd.focus();
return;
} else if(document.regFrm.name.value == "") {
alert("이름을 입력하세요.");
document.regFrm.name.focus();
return;
} else if(document.regFrm.birth.value == "") {
alert("생일을 입력하세요.");
document.regFrm.birth.focus();
return;
}else if(document.regFrm.email.value == "") {
alert("이메일을 입력하세요.");
document.regFrm.email.focus();
return;
}
var str = document.regFrm.email.value;
var atPos = str.indexOf('@');
var atLastPos = str.lastIndexOf('@');
var atPos = str.indexOf('.');
var spacePos = str.indexOf(' ');
var commaPos = str.indexOf(',');
var eMailSize = str.length;
if(atPos > 1 && atPos == atLastPos && dotPos > 3 && spacePos == -1 && atPos +1 < dotPos && dotPos + 1 < eMailSize);
else {
alert("이메일 형식이 잘못되었습니다.\n다시 입력해 주세요!");
document.regFrm.email.focus();
return;
}
if(document.regFrm.zipcode.value == "") {
alert("우편번호를 입력하세요.");
return;
}
document.regFrm.submit();
}
function win_close() {
self.close();
}