2. 회원가입 페이지 수정
페이지 정보
작성자 관리자 댓글 0건 조회 1,352회 작성일 21-05-04 21:45본문
2. 회원가입 페이지 수정
회원가입 페이지에 아이디중복 체크와 아이디, 성명 등을 필수 입력으로 처리하는 자바스크립트를 추가해보겠습니다.
파일명 : member_form.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/member.css">
<script>
function check_input()
{
if (!document.member_form.id.value) {
alert("아이디를 입력하세요!");
document.member_form.id.focus();
return;
}
if (!document.member_form.pass.value) {
alert("비밀번호를 입력하세요!");
document.member_form.pass.focus();
return;
}
if (!document.member_form.pass_confirm.value) {
alert("비밀번호확인을 입력하세요!");
document.member_form.pass_confirm.focus();
return;
}
if (!document.member_form.name.value) {
alert("이름을 입력하세요!");
document.member_form.name.focus();
return;
}
if (!document.member_form.email.value) {
alert("이메일 주소를 입력하세요!");
document.member_form.email.focus();
return;
}
if (document.member_form.pass.value !=
document.member_form.pass_confirm.value) {
alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요!");
document.member_form.pass.focus();
document.member_form.pass.select();
return;
}
document.member_form.submit();
}
function reset_form() {
document.member_form.id.value = "";
document.member_form.pass.value = "";
document.member_form.pass_confirm.value = "";
document.member_form.name.value = "";
document.member_form.email.value = "";
document.member_form.id.focus();
return;
}
function check_id() {
window.open("member_check_id.php?id=" + document.member_form.id.value,
"IDcheck",
"left=700,top=300,width=350,height=200,scrollbars=no,resizable=yes");
}
</script>
</head>
<body>
<header>
<?php include "header.php";?>
</header>
<section>
<div id="main_content">
<div id="join_box">
<form name="member_form" method="post" action="member_insert.php">
<h2>회원 가입</h2>
<div class="form id">
<div class="col1">아이디</div>
<div class="col2">
<input type="text" name="id">
</div>
<div class="col3">
<a href="#"><img src="./img/check_id.gif"
onclick="check_id()"></a>
</div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">비밀번호</div>
<div class="col2">
<input type="password" name="pass">
</div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">비밀번호 확인</div>
<div class="col2">
<input type="password" name="pass_confirm">
</div>
</div>
<div class="clear"></div>
<div class="form">
<div class="col1">이름</div>
<div class="col2">
<input type="text" name="name">
</div>
</div>
<div class="clear"></div>
<div class="form email">
<div class="col1">이메일</div>
<div class="col2">
<input type="text" name="email">
</div>
</div>
<div class="clear"></div>
<div class="bottom_line"> </div>
<div class="buttons">
<img style="cursor:pointer" src="./img/button_save.gif" onclick="check_input()">
<img id="reset_button" style="cursor:pointer" src="./img/button_reset.gif"
onclick="reset_form()">
</div>
</form>
</div> <!-- join_box -->
</div> <!-- main_content -->
</section>
<footer>
<?php include "footer.php";?>
</footer>
</body>
</html>
파일명 : member_check_id.php
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
h3 {
padding-left: 5px;
border-left: solid 5px #edbf07;
}
#close {
margin:20px 0 0 80px;
cursor:pointer;
}
</style>
</head>
<body>
<h3>아이디 중복체크</h3>
<p>
<?php
$id = $_GET["id"];
if(!$id)
{
echo("<li>아이디를 입력해 주세요!</li>");
}
else
{
$con = mysqli_connect("localhost", "user1", "12345", "sample");
$sql = "select * from members where id='$id'";
$result = mysqli_query($con, $sql);
$num_record = mysqli_num_rows($result);
if ($num_record)
{
echo "<li>".$id." 아이디는 중복됩니다.</li>";
echo "<li>다른 아이디를 사용해 주세요!</li>";
}
else
{
echo "<li>".$id." 아이디는 사용 가능합니다.</li>";
}
mysqli_close($con);
}
?>
</p>
<div id="close">
<img src="./img/close.png" onclick="javascript:self.close()">
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.