Pseudo code
- 아이디를 입력했을 시 4자리 이상이면 오류메시지 나타내기
- 비밀번호와 비밀번호확인에 입력된 값이 일치하지 않으면 오래메시지 나타내기
1. HTML
- id와 class 생성하기
<!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">
<script src="validator.js"></script>
</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 type = 'password' id = 'password'>
</fieldset>
<fieldset>
<label>비밀번호 확인</label>
<input type = 'password' id = 'password-retype'>
<div class = 'mismatch-message hide'>두 비밀번호가 일치하지 않습니다</div>
</fieldset>
<fieldset>
<button>회원가입</button>
</fieldset>
<script src="script.js"></script>
</body>
</html>2. JS
- 아이디, 오류메시지, 비밀번호에 기능을 설정하기 위해 HTML에서 요소 가져오기
et elInputUsername = document.querySelector('#username')
console.log(elInputUsername);
elInputUsername.value = '김코딩'
let elFailureMessage = document.querySelector('.failure-message')
console.log(elFailureMessage)
let elSuccessMessage = document.querySelector('.success-message')
let elInputPassword = document.querySelector('#password')
console.log(elInputPassword)
let elInputPasswordretype = document.querySelector('#password-retype')
console.log(elInputPasswordretype)
let elInputMismatch = document.querySelector('.mismatch-message')
console.log(elInputMismatch)
- 아이디를 잘못 입력했을 시 오류 메시지를 나타내는 함수 만들기
elInputUsername.onkeyup = function () {
console.log(elInputUsername.value)
if (isMoreThan4Length(elInputUsername.value)){
elSuccessMessage.classList.remove('hide')
elFailureMessage.classList.add('hide')
} else{
elSuccessMessage.classList.add('hide')
elFailureMessage.classList.remove('hide')
}
}
- 비밀번호가 일치하지 않을 시 오류 메시지를 나타내는 함수 만들기
function isMoreThan4Length(value) {
return value.length >= 4
}
elInputPasswordretype.addEventListener('keyup',function() {
if(isMatch(elInputPassword.value, elInputPasswordretype.value)){
elInputMismatch.classList.add('hide')
} else{
elInputMismatch.classList.remove('hide')
}
}- addEventListener가 아닌 방법
elInputPasswordretype.onkeyup = function() {
if(isMatch(elInputPassword.value,elInputPasswordretype.value)){
elInputMismatch.classList.add('hide')
}else{
elInputMismatch.classList.remove('hide')
}
}
머릿속에 있는 내용을 정리하기