728x90
반응형
[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3)
1. sign-up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 by JS</title>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<!-- 헤더 섹션과 네비게이션 메뉴 영역 -->
<header>
<nav class="nav-container">
<div class="nav-item">
<span class="menu-link">게시판</span>
</div>
<div class="nav-item">
<span class="menu-link">로그인</span>
<span class="menu-link">회원가입</span>
</div>
</nav>
</header>
<main class="content-wrapper">
<!-- 회원 가입 제목 영역 -->
<section class="form-title">
<h1>회원가입 by JS</h1>
</section>
<!-- 회원 가입 폼 영역 -->
<section>
<form action="" onsubmit="return false;">
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" class="inputs" placeholder="아이디를입력하세요" value="tenco1" />
<button type="button" id="checkIdBtn" class="btn-small">중복확인</button>
</td>
</tr>
<tr>
<th>닉네임</th>
<td>
<input type="text" class="inputs" placeholder="닉네임을입력하세요" value="둘리1" />
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
<tr>
<th>비밀번호확인</th>
<td>
<input type="password" class="inputs" placeholder="비밀번호을입력하세요" value="1234" />
</td>
</tr>
</table>
<div class="btn-area">
<button type="button" id="signUpBtn" class="btn">회원가입</button>
</div>
</form>
</section>
</main>
<!-- js 파일은 하단에 두는 것이 일반적입니다.
모든 HTML 요소가 로드된 후에 스크립트를 실행하기 위함이고
페이지 로드 속도를 최적화 하는데 도움이 된다.
-->
<script src="../js/header.js"></script>
<script src="../js/signUp.js"></script>
</body>
</html>
2. signUp.js
// 1. 변수에 선언과 초기화
const inputs = document.querySelectorAll(".inputs");
const checkIdBtn = document.getElementById("checkIdBtn");
const signUpBtn = document.getElementById("signUpBtn");
const toDay = new Date(); // 현재 날짜와 시간을 가져오는 객체
// 로컬스토리지에 접근해서 사용자 정보를 가져오는 함수를 만들어 보자.
// localStorage <-- 변수를 통해 접근 가능
function getUserInfo() {
let userListString = localStorage.getItem("userList");
if(userListString === null) {
return [];
} else {
// 문자열을(JSON 형식) JS 에 데이터 타입인 객체로 변환 처리
return JSON.parse(userListString);
}
}
const userInfo = getUserInfo();
// 아이디 중복 확인 기능 만들어 보기
function checkDuplicatedId() {
const inputUsername = inputs[0].value.trim();
if(inputUsername === "") {
alert('아이디를 입력하세요');
inputs[0].focus();
return ;
}
// 로컬스토리지에서 가져온 사용자리스트에서 반복문을 돌면서 inputUsername 에 담기
// 같은 값이 있는지 확인
let isDuplicatedId = false;
for(let i = 0; i < userInfo.length; i++ ) {
if(userInfo[i].username === inputUsername) {
isDuplicatedId = true;
break;
}
}
if(isDuplicatedId == true) {
alert('이미 존재하는 아이디입니다.');
inputs[0].focus();
} else {
alert('사용 가능한 아이디 입니다.');
inputs[0].readOnly = true;
inputs[0].style.backgroundColor = "green";
}
}
// 회원가입 처리 함수
function registerUser(){
const username=inputs[0];
const nickname=inputs[1];
const password=inputs[2];
const confirmPassword=inputs[3];
// 유효성 검사
if(username.readOnly==false){
alert('아이디 중복 확인을 해주세요.');
username.focus();
return;
}
if(nickname.value.trim()==+""){
alert('닉네임을 입력하세요.');
nickname.focus();
return;
}
if(password.value.trim()===""){
alert('비밀번호를 입력하세요.');
nickname.focus();
return;
}
if(confirmPassword.value.trim()===""){
alert('비밀번호를 입력하세요.');
nickname.focus();
return;
}
if(password.value !== confirmPassword.value){
alert('비밀번호가 일치하지 않습니다.');
password.focus();
return;
}
// 자바 스크립트에서 객체를 생성하는 방법 2가지
// 1. new 키워드 사용
// 2. 객체 리터럴 사용
// 새로운 사용자 정보를 객체 리터럴로 생성
const newUser = {
username: username.value,
nickname: nickname.value,
password: password.value,
createdAt: toDay.getFullYear ()+ "." + (toDay.getMonth()+1)+"."+toDay.getDate()
};
// [{},{},{}] : 자료구조
userInfo.push(newUser);
// 로컬 스토리지에 자료구조를 통으로 덮어쓰기 저장
localStorage.setItem('userList',JSON.stringify(userInfo));
// 로그인 페이지로 이동 처리
window.location.href="sign-in.html";
}
// 이벤트 리스너 등록 처리
function addEventListener() {
checkIdBtn.addEventListener('click', checkDuplicatedId);
signUpBtn.addEventListener('click', registerUser);
}
// 이벤트 리스너 함수 실행(호출)
addEventListener();728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 26. JavaScript를 사용한 헤더 만들기 (0) | 2024.08.26 |
|---|---|
| [JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1) (0) | 2024.08.23 |
| [JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) (0) | 2024.08.21 |
| [JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1) (0) | 2024.08.21 |
| [JavaScript] 20. 실행 환경 구축 (0) | 2024.08.21 |