전에 이어서...
유효성 검사 (2)
수도코드 (pseudocode)
ID가 제대로 입력이 되고 있는지 어떻게 확인할 건지
말로 써보면 (pseudocode)
ID 입력창에
글자를 키보드로 입력할 때
그 값이
- 글자 수가 4개 이상이라면
- "사용할 수 있는 아이디 입니다" 라는 메시지 출력 - 아니라면
- "아이디는 네 글자 이상이어야 합니다" 라는 메시지 출력
실제 코드
test.js 에서
ID 입력창
elInputUsername 라는 변수를 선언해서 할당
let elInputUsername = document.querySelector('#username')글자를 키보드로 입력할 때
onkeyup 활용
= "키보드를 눌렀다가 떼었을 때" 발생하는 이벤트
elInputUsername.onkeyup = () => {
console.log("check")
}
- 누른만큼 console에 잘 출력 되는지 확인
그 값이
= elInputUsername.value
elInputUsername.onkeyup = () => {
console.log(elInputUsername.value)
}
- 누를 때마다 입력된 값이 출력된다
글자 수가 4개 이상이라면...
= 먼저 글자 수가 4개 이상인지 확인하는 함수 생성
function isMoreThan4Length (value) {
return value.length >= 4;
}입력된 글자 elInputUsername.value 를
생성한 함수에 넣으면 글자 수에 따라 boolean이 나온다
isMoreThan4Length(elInputUsername.value)이에 따라 조건문을 쓴다
- 글자 수가 4개 이상이라면
- "사용할 수 있는 아이디 입니다" 라는 메시지 출력
if(isMoreThan4Length(elInputUsername.value)) {
elSuccMsg.classList.remove('hide');
elFailMsg.classList.add('hide');
} else {
- 아니라면
- "아이디는 네 글자 이상이어야 합니다" 라는 메시지 출력
} else {
elSuccMsg.classList.add('hide')
elFailMsg.classList.remove('hide');
}
classList.remove('hide'), classList.add('hide')
로 보여질 내용을 조정한다
전체 코드
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="fail-msg hide">아이디는 네 글자 이상이어야 합니다</div>
<div class="succ-msg hide">사용할 수 있는 아이디입니다</div>
</fieldset>
<fieldset>
<label>비밀번호</label>
<input type="password">
</fieldset>
<fieldset>
<label>비밀번호 확인</label>
<input type="password">
</fieldset>
<fieldset>
<button>회원 가입</button>
</fieldset>
<script src="./test.js"></script>
</body>
</html>style.css
.hide {
display: none;
}test.js
let elInputUsername = document.querySelector('#username')
let elFailMsg = document.querySelector('.fail-msg')
let elSuccMsg = document.querySelector('.succ-msg')
elInputUsername.onkeyup = () => {
console.log(elInputUsername.value)
if(isMoreThan4Length(elInputUsername.value)) {
elSuccMsg.classList.remove('hide');
elFailMsg.classList.add('hide');
} else {
elSuccMsg.classList.add('hide')
elFailMsg.classList.remove('hide');
}
}
function isMoreThan4Length (value) {
return value.length >= 4;
}
항상배우기