https://hoowave.tistory.com/26
로그인 페이지 만들기 - 설계
웹 서버까지 세팅이 완료가 되었다면, 홈페이지 구조를 만들어줍니다.홈페이지 구조 main : 로그인 페이지 관련 폴더입니다.admin : 관리자 전용 페이지입니다.js : javascript 파일 관련 폴더입니다.
hoowave.tistory.com
로그인 처리를 하기 전에, 회원가입 처리를 먼저 하는 것이 좋겠다 생각해서
회원가입 페이지 먼저 만들었습니다.
join.html
<? include '../_common.php'; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>회원가입 페이지</title>
</head>
<body>
<div align="center">
<h3>회원가입</h3>
<p>ID : <input type="text" id="user_id"></p>
<p id ="user_id_err" style="display: none">아이디는 4~20자로 입력해주세요.</p>
<p>PW : <input type="password" id="user_pw"></p>
<p id ="user_pw_err" style="display: none">비밀번호는 9~20자로 입력해주세요.</p>
<p>Confirm_PW : <input type="password" id="confirm_pw"></p>
<p id ="confirm_pw_err" style="display: none">비밀번호가 일치하지 않습니다.</p>
<p><button type="button" onclick="final_chk()">회원가입</button></p>
<p><button type="button" onclick="location.href='main.html'">돌아가기</button></p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
</html>
여기서 회원가입 유효성 검사를 추가했어요.
아이디를 4~20자로 입력받고
비밀번호를 9~20자로 입력받고
두 비밀번호가 일치하는지 까지 확인합니다.
실시간으로 사용자의 입력을 받아서 처리합니다.
조건이 하나라도 달성되지 않으면 회원가입이 진행되지 않습니다.
script.js
function call_ajax_main(type=null)
{
if(type == 'join')
{
// 회원가입 부분 구현
}
if(type == 'login')
{
// 로그인 부분 구현
}
}
function final_chk()
{
state_id = id_chk();
state_pw = pw_chk();
state_confirm_pw = confirm_pw_chk();
if($('#confirm_pw').val() == "")
{
$('#confirm_pw_err').css('display','block');
}
if(state_id && state_pw && state_confirm_pw)
{
call_ajax_main('join');
}
else
{
return false;
}
}
function id_chk()
{
var val = $('#user_id').val();
if(val.length < 4 || val.length > 20)
{
$('#user_id_err').css('display','block');
return false;
}
else
{
$('#user_id_err').css('display','none');
return true;
}
}
function pw_chk()
{
var val = $('#user_pw').val();
if(val.length < 9 || val.length > 20)
{
$('#user_pw_err').css('display','block');
return false;
}
else
{
$('#user_pw_err').css('display','none');
return true;
}
}
function confirm_pw_chk()
{
var val1 = $('#user_pw').val();
var val2 = $('#confirm_pw').val();
if(val1 != val2)
{
$('#confirm_pw_err').css('display','block');
return false;
}
else
{
$('#confirm_pw_err').css('display','none');
return true;
}
}
$('#user_id').keyup(function(){
id_chk();
})
$('#user_pw').keyup(function(){
pw_chk();
});
$('#confirm_pw').keyup(function(){
confirm_pw_chk();
});
회원가입, 로그인 통틀어서 ajax로 처리할 생각이라
call_ajax_main 부분으로 만들어나갈 예정입니다.
'Legacy > JS+PHP+SQL' 카테고리의 다른 글
| 로그인 페이지 만들기 - 처리 (1) | 2025.02.16 |
|---|---|
| 회원가입 페이지 만들기 - 2 (0) | 2025.02.16 |
| DB Connection - Class (0) | 2025.02.16 |
| 로그인 페이지 만들기 - 설계 (0) | 2025.02.16 |
| DB Connection (0) | 2025.02.16 |