Bare Minimum Requirements
추가적으로 비밀번호 입력 UI를 HTML을 이용해 만드세요.
비밀번호 일치 여부를 검사하는 함수를 자바스크립트로 작성하세요.
함수 isMatch 는 문자열 두 개를 입력으로 받고, boolean 타입을 리턴합니다.
비밀번호 일치 여부에 따른 시각적 피드백을 제공하세요.
모든 테스트를 통과하세요.
<정정>
함수 isMoreThan4Length 는 4글자 이상의 글자를 판별합니다.
4글자 미만(3글자 이하)인 경우 .failure-message 가 포함되어야 합니다.
index.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">
<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>script.js
let elInputUsername = document.querySelector('#username');
let elFailureMessage = document.querySelector('.failure-message');
let elSuccessMessage = document.querySelector('.success-message');
let elPassword = document.querySelector('#password');
let elPassword2 = document.querySelector('#password-retype');
let elMissMatchMessage = document.querySelector('.mismatch-message');
function isMoreThan4Length(value) {
// 아이디가 4글자 이상이면
return value.length >= 4;
// 4글자 이상을 내포하는 밸류를 반환한다
}
elInputUsername.onkeyup = function () {
if(isMoreThan4Length(elInputUsername.value)) {
//입력된 아이디 키가 4글자 이상이면
elSuccessMessage.classList.remove('hide');
//성공 메시지가 보여야 함
elFailureMessage.classList.add('hide');
//실패 메시지가 가려져야 함
}
else {
elSuccessMessage.classList.add('hide');
//성공 메시지가 가려져야 함
elFailureMessage.classList.remove('hide');
//실패 메시지가 보여야 함
}
}
function isMatch (password1, password2) {
// password1과 password2가 같다면
if(password1 === password2)
return true;
else {
return false;
}
// password1 = password2 의 값을 반환
}
elPassword2.onkeyup = function () {
if(isMatch(elPassword.value,elPassword2.value)){
//비밀번호가 일치하면
elMissMatchMessage.classList.add('hide');
//메시지 안 보여야 함
}
else{
elMissMatchMessage.classList.remove('hide');
// 불일치 메시지 보여야 함
}
}
세상은 넓고 배울건 많다