querySelector를 통해 아이디 값을 불러올 수 있고,
onkeyup메소드를 통하여 키보드 입력의 변화를 감지하고
function(비밀번호 1, 비밀번호 2)로 isMatch함수를 정의 했던 것을 호출한다.
isMatch함수 정의 부분에서 if 조건문으로 비밀번호 1과 비밀번호 2를 비교하여 같을 때,
참을 리턴하고 그렇지 않으면 거짓을 리턴하는 유효성 검증 코드를 구현시킬 수 있다.
정리하자면 querySelector로 불러온 아이디 값을 변수로 선언하고,
그 선언된 변수를 통해 isMatch 함수를 이용하여서 비밀번호와 비밀번호 확인 값이 같을 때 참 다를 때 거짓을 리턴하고,
정의된 isMatch 함수를 호출하여 입력받은 값을 비교한다. 일치하지 않을 시 비밀번호가 일치하지 않습니다 라는 문구가 표시된다.
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="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>
<script src="validator.js"></script>
</body>
</html>
CSS
body{
background-color: lightgoldenrodyellow;
}
.hide{
display: none;
}JS
var elInputUsername = document.querySelector('#username')
var elInputPassword = document.querySelector('#password')
var elInputPassword2 = document.querySelector('#password-retype')
var elFailureMessage = document.querySelector('.failure-message')
var elSuccessMessage = document.querySelector('.success-message')
var elMismatchMessage = document.querySelector('.mismatch-message')
elInputUsername.onkeyup = function(){
if(isMoreThan4Length(elInputUsername.value)){
elSuccessMessage.classList.remove('hide')//성공메시지 표시
elFailureMessage.classList.add('hide')//실패메시지 가려짐
}
else{
elSuccessMessage.classList.add('hide')//성공메시지 가려짐
elFailureMessage.classList.remove('hide')//실패메시지 표시
}
}
elInputPassword2.onkeyup = function(){
if(isMatch(elInputPassword.value, elInputPassword2.value)){
elMismatchMessage.classList.add('hide')//비밀번호일치
}
else{
elMismatchMessage.classList.remove('hide')//비밀번호불일치
}
}
function isMoreThan4Length(value){
return value.length >= 4
}
function isMatch(password, password2){
if(password === password2) {
return true
}
else {
return false
}
}
Study.log