입력조건
1. 이름은 필수로 입력해야 한다.
2. 닉네임은 2~5글자로 구성해야 한다.
3. 이메일 형식을 지켜야 한다.
4. 비밀번호는 영어+숫자+특수문자를 조합해야 한다.
5. 비밀번호와 비밀번호 확인 란에 동일한 문자를 입력해야 한다.
이런 기능을 유효성 검사라고 부른다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="container">
<h1>회원 가입</h1>
<div style="width: fit-content; margin: 0 auto;">
<form>
<label for="name">이름</label>
<input type="text" id="name" required"/>
<div class="name-error hide">필수 입력 항목입니다.</div>
<label for="nickname">닉네임</label>
<input type="text" id="nickname" />
<div class="nickname-error hide">닉네임은 2~5글자로 구성해주세요.</div>
<label for="email">이메일</label>
<input type="email" id="email" />
<div class="email-error hide">올바른 메일 형식이 아닙니다.</div>
<label for="password">비밀번호</label>
<input type="password" id="password" />
<div class="pw-error hide">영어+숫자+특수문자를 조합하여 작성해주세요.</div>
<label for="chkPassword">비밀번호 확인</label>
<input type="password" id="chkPassword" />
<div class="repw-error hide">비밀번호가 일치하지 않습니다.</div>
<button type="submit" id="btn">가입하기</button>
</form>
<div>
<script src="index.js"></script>
</body>
</html>
JavaScript 코드
먼저 DOM을 이용해서 각 input에 입력된 값과 에러들을 가져온다.
const name = document.getElementById("name"); //입력된 이름
const nameError = document.querySelector(".name-error"); //이름이 입력되지 않았을 때의 오류
const nickname = document.getElementById("nickname"); //입력된 닉네임
const nicknameError = document.querySelector(".nickname-error");
const email = document.getElementById("email"); //입력된 이메일
const emailError = document.querySelector(".email-error"); //이메일 형식이 맞지 않을 때의 오류
const pw = document.getElementById("password"); //입력된 비밀번호
const pwError = document.querySelector(".pw-error"); //비밀번호가 영어+숫자+특수문자가 아닐 때의 오류
const repw = document.getElementById("chkPassword");// 입력된 비밀번호 확인
const repwError = document.querySelector(".repw-error"); //비밀번호 일치 하지 않았을 때의 오류
각 항목들이 조건에 만족하면 true를 반환하고 아니면 false를 반환하는 함수들을 만들어준다.
//닉네임 길이가 2~5이면 true, 아니면 false
function nicknameLength(nickname) {
return nickname.length >= 2 && nickname.length <= 5;
}
//이메일 형식 검사
function validEmail(email) {
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i.test(email);
}
//영어+숫자+특수문자 모두 포함하면 true, 아니면 false
function checkPw(pw) {
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/.test(pw);
}
//비밀번호가 일치하면 true, 아니면 false
function isMatch(pw, repw) {
return pw === repw;
}
input 박스들에 입력이 들어오면(.onkeyup) 다음 함수들이 실행된다.
error.classList.remove("hide")는 에러 메시지를 표시하는 코드이고
error.classList.add("hide")는 에러 메시지를 숨겨주는 코드이다.
name.onkeyup = function () {
if (name.value.length == 0) {
nameError.classList.remove("hide");
} else {
nameError.classList.add("hide");
}
};
nickname.onkeyup = function () {
if (nickname.value.length !== 0) {
if (nicknameLength(nickname.value)) {
nicknameError.classList.add("hide");
} else {
nicknameError.classList.remove("hide");
}
} else {
nicknameError.classList.add("hide");
}
};
email.onkeyup = function () {
if (email.value.length !== 0) {
if (validEmail(email.value)) {
emailError.classList.add("hide");
} else {
emailError.classList.remove("hide");
}
} else {
emailError.classList.add("hide");
}
};
pw.onkeyup = function () {
//값이 입력된 경우
if (pw.value.length !== 0) {
if (checkPw(pw.value)) {
pwError.classList.add("hide");
} else {
pwError.classList.remove("hide");
}
} else {
pwError.classList.add("hide");
}
};
repw.onkeyup = function () {
if (repw.value.length !== 0) {
if (isMatch(pw.value, repw.value)) {
repwError.classList.add("hide");
} else {
repwError.classList.remove("hide");
}
} else {
repwError.classList.add("hide");
}
};
'JavaScript' 카테고리의 다른 글
| JS 동작원리 (0) | 2024.08.05 |
|---|---|
| [JS]Reduce 함수 (4) | 2024.04.12 |
| [JS]JavaScript 화살표 함수 (0) | 2023.05.29 |
| JavaScript Closure(+실행 컨텍스트와 스코프 체인을 곁들인..) (0) | 2023.05.29 |
| JavaScript this (0) | 2023.05.28 |