유효성 검사
목표!
- 아래와 같이 움직이는 회원가입 창을 생성하는 것!
index.html
<fieldset></fieldset>: 여러 구역을 나눠 표시할때 사용- 비밀번호와 비밀번호 확인을 같은 class로 설정하여 js코드를 좀 더 편하게 짤 수 있게 설정!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>유효성 검사</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>회원가입</h1>
<fieldset>
<label>아이디</label>
<input type="text" id="username" />
<div class="failure-message hide">
아이디는 네 글자 이상이여야 합니다.
</div>
<div class="success-message hide">사용할 수 있는 아이디입니다.</div>
</fieldset>
<fieldset>
<label>비밀번호</label>
<input class="input-password" type="password" />
</fieldset>
<fieldset>
<label>비밀번호 확인</label>
<input class="input-password" type="password" />
<div class="password-not-equal-message hide">
비밀번호가 일치하지 않습니다.
</div>
<div class="password-equal-message hide">사용 가능한 비밀번호입니다.</div>
</fieldset>
<fieldset>
<button>회원가입</button>
</fieldset>
<script src="script.js"></script>
</body>
</html>
script.js
-
elUserName.onkeyup = eventKeyUp;인 것에 명심 !!eventKeyUp();-> X 함수 자체를 불러오는 것이지 함수를 실행하는 것이 아님 !! -
성공, 실패 메시지에 해당하는 불러올 때는 class에
"hide"를 추가하여add와remove를 이용하여 보여지게 or 안보이게 설정 가능!! -
2개 이상을 선택할 때는
querySelector대신에querySelectorAll을 사용 !
///////////////////////// id /////////////////////////
// 변수를 선언해서 id가 username인 것에 접근, 할당
let elUserName = document.querySelector("#username");
// 변수를 선언해서 .failure-message클래스에 접근
let elFailgreMessage = document.querySelector(".failure-message");
let elSuccessMessage = document.querySelector(".success-message");
// 아이디 입력창에서 입력된 값이
// 4글자 이상인 경우에는 성공 메세지 출력
// 4글자 이하인 경우에는 실패 메세지(div)를 출력
// keyup했을 때 eventKeyUp가 실행! 단, eventKeyUp(); 가 아닌 것에 주의!!!!
elUserName.onkeyup = eventKeyUp;
function eventKeyUp(e) {
// 태그(= e.target)에 해당하는 값(value)을 currentValue에 저장
let currentValue = e.target.value;
// 4글자 이상 이하 분기 필요
if (checkStringLength(currentValue)) {
// 4개 이상일 때
elFailgreMessage.classList.add("hide");
elSuccessMessage.classList.remove("hide");
} else {
// 4개 이하일 때
elFailgreMessage.classList.remove("hide");
elSuccessMessage.classList.add("hide");
}
}
function checkStringLength(str) {
return str.length >= 4;
}
///////////////////////// password ////////////////////////
// 1. 비밀번호는 특수문자가 [!@#$%^&*]중 1가지 이상이 들어가야함
// 비밀번호와 비밀번호 확인을 동시에 선택하기 때문에 All을 붙여서 씀 !!!
let passwordArr = document.querySelectorAll(".input-password");
let elPasswordMessage = document.querySelector(".fail-password hide");
let elPasswordEqualMessage = document.querySelector(".success-password");
// 비밀번호를 입력할 때마다 checkPassword가 실행되게 하여 조건을 확인
for (let i = 0; i < passwordArr.length; i++) {
passwordArr[i].onkeyup = checkPassword;
}
function checkPassword(e) {
// '비밀번호'나 '비밀번호 확인' 둘 중 하나가 빈칸일 때
if (passwordArr[0].value === "" || passwordArr[1].value === "") {
elPasswordEqualMessage.classList.add("hide");
elPasswordMessage.classList.add("hide");
// '비밀번호'와 '비밀번호 확인'이 같을 때
} else if (passwordArr[0].value === passwordArr[1].value) {
elPasswordEqualMessage.classList.remove("hide");
elPasswordMessage.classList.add("hide");
} else {
// '비밀번호'와 '비밀번호 확인'이 같지 않을 때 (적어도 입력은 되어있을 경우)
elPasswordEqualMessage.classList.add("hide");
elPasswordMessage.classList.remove("hide");
}
}
style.css
body {
background-color: bisque;
}
.hide {
display: none;
}
.special-symbol {
font-size: 12px;
}
결과
- 성공적으로 수행 완료 !!
백엔드 개발자