회원가입을 할 때 패스워드 유효성 체크 하는 기능을 구현해 보았다.
레이아웃은 'Bulma'(https://bulma.io/documentation/form/general/)에서 가져오고 유효성 체크 기능은 자바스크립트를 활용했다.
<HTML 코드>
- input 태그의 id 값과 label 태그의 for 속성을 일치시켜 준다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="./style.css">
<!-- js -->
<script defer src="./index.js"></script>
</head>
<body>
<div id = "wrap">
<div class="field">
<label class="label" for="nameInput">이름</label>
<div class="control">
<input class="input" type="text" placeholder="" id="nameInput">
</div>
</div>
<div class="field">
<label class="label" for="usernameInput">닉네임</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma" id="usernameInput">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
<p class="help is-success">사용 가능한 닉네임 입니다.</p>
</div>
<div class="field">
<label class="label" for="passwordInput">비밀번호</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="password" placeholder="Text input" value="bulma" id="passwordInput">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<label class="label" for="passwordConfirmInput">비밀번호 확인</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="password" placeholder="Text input" value="bulma" id="passwordConfirmInput">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<label class="label" for="emailInput">이메일</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="email" placeholder="Email input" value="hello@" id="emailInput">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<!-- <p class="help is-danger">사용할 수 없는 이메일 입니다.</p> -->
</div>
<div class="field">
<label class="label" for="subjectSelect">성별</label>
<div class="control">
<div class="select">
<select id="subjectSelect">
<option>여</option>
<option>남</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
<a href="#">회원 가입 약관 동의</a>합니다.
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="question">
Yes
</label>
<label class="radio">
<input type="radio" name="question">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" id="submitButton">가입하기</button>
</div>
<div class="control">
<button class="button is-link is-light">뒤로가기</button>
</div>
</div>
</div>
</body>
</html>
<CSS 코드>
더보기
/* join */
#wrap{width:800px; margin:0 auto; padding-top: 50px;}
회원가입 시 비밀번호 유효성 검사하기
1. HTML 문서에서 필요한 요소들을 querySelector를 사용하여 선택
- 제출 버튼(submitButton)에 클릭 이벤트 리스너를 추가하여 handleSubmit 함수가 호출되도록 설정
// 요소들 모음
const nameInput = document.querySelector('#nameInput')
const usernameInput = document.querySelector('#usernameInput')
const emailInput = document.querySelector('#emailInput')
const passwordInput = document.querySelector('#passwordInput')
const passwordConfirmInput = document.querySelector('#passwordConfirmInput')
const submitButton = document.querySelector('#submitButton')
// 이벤트 추가
submitButton.addEventListener('click', handleSubmit)
2. handleSubmit 함수는 이벤트 객체(e)를 매개변수로 받고, e.preventDefault()를 호출하여 기본 제출 동작 방지
- e.preventDefault - 브라우저가 적용하는 기본 동작을 방지하는 역할
async function handleSubmit(e) {
// preventDefault 안 하면 새로고침됨.
e.preventDefault
3. 각 입력 필드의 값을 가져와 변수에 할당
// 입력값 가져오기
const fullName = nameInput.value
const nickname = usernameInput.value
const email = emailInput.value
const password = passwordInput.value
const passwordConfirm = passwordConfirmInput.value
4. 비밀번호와 비밀번호 확인이 일치하는지 확인하고, 일치하지 않으면 알림 발생
// 비밀번호 비교
if (password !== passwordConfirm) {
return alert("비밀번호가 일치하지 않습니다.")
}
if (!isValidEmail(email)) {
return alert('올바른 이메일 형식이 아닙니다.');
}
5. 사용자 입력 데이터를 객체로 생성하고, JSON.stringify를 사용하여 JSON 형태로 변환
- API 엔드포인트 주소를 변수로 지정하고, fetch를 사용하여 POST 요청을 보냄
- 응답 상태 코드(res.status)를 확인하여 성공 또는 실패 여부에 따라 알림 발생
// 객체 만듦
const data = {
fullName,
nickname,
email,
password
}
// JSON 만듦
const dataJson = JSON.stringify(data)
const apiUrl = `https://${window.location.hostname}:8190/api/register`
const res = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: dataJson,
});
if (res.status === 201) {
alert("회원가입에 성공하였습니다!")
} else {
alert("회원가입에 실패하였습니다...")
}
6. (추가) 이메일의 유효성을 확인하는 isValidEmail 함수를 구현하기
function isValidEmail(email) {
const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return emailRegex.test(email);
}
전체 JS 코드
더보기
const nameInput = document.querySelector('#nameInput')
const usernameInput = document.querySelector('#usernameInput')
const emailInput = document.querySelector('#emailInput')
const passwordInput = document.querySelector('#passwordInput')
const passwordConfirmInput = document.querySelector('#passwordConfirmInput')
const submitButton = document.querySelector('#submitButton')
submitButton.addEventListener('click', handleSubmit)
async function handleSubmit(e) {
// preventDefault 안 하면 새로고침됨.
e.preventDefault
const fullName = nameInput.value
const nickname = usernameInput.value
const email = emailInput.value
const password = passwordInput.value
const passwordConfirm = passwordConfirmInput.value
if (password !== passwordConfirm) {
return alert("비밀번호가 일치하지 않습니다.")
}
if (!isValidEmail(email)) {
return alert('올바른 이메일 형식이 아닙니다.');
}
const data = {
fullName,
nickname,
email,
password
}
const dataJson = JSON.stringify(data)
const apiUrl = `https://${window.location.hostname}:8190/api/register`
const res = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: dataJson,
});
if (res.status === 201) {
alert("회원가입에 성공하였습니다!")
} else {
alert("회원가입에 실패하였습니다...")
}
}
function isValidEmail(email) {
const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return emailRegex.test(email);
}
'🎒내가방 > 📒JavaScript' 카테고리의 다른 글
| [자바스크립트] 상품을 필터링하기 (1) | 2023.07.01 |
|---|---|
| [자바스크립트] 상품 목록 가져오기 (0) | 2023.07.01 |
| [모던 자바스크립트 Deep Dive] 18장 함수와 일급객체 (1) | 2023.06.29 |
| [모던 자바스크립트 Deep Dive] 17장 생성자 함수에 의한 객체 생성 (0) | 2023.06.29 |
| [자바스크립트] 스코프 (0) | 2023.06.22 |
