728x90
회원가입창만들기
1. HTML을 먼저 작성한다.
2. JS에다가 작성한다.
아이디를 먼저 불러온다.
let elInputUsername = document.querySelector('#username')
3. HTML에다가 메세지 일단 다 보이게 만든다
<div>아이디는 네글자 이상이어야 합니다</div>
이걸 수정한다.
<div class="failure-message">아이디는 네글자 이상이어야 합니다</div>
<div class="success-message">사용할수 있는 아이디입니다</div>
일단 메세지 다 보이게 만들고 나중에 JS로 작동하면된다.
4. JS에다가
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')
5. CSS에다가 메세지가 사라지고 하는걸 작동위해 쓴다.
.hide {
display: none;
}
6. HTML에다가 hide추가한다.
<div class="failure-message hide">아이디는 네글자 이상이어야 합니다</div>
<div class="success-message hide">사용할수 있는 아이디입니다</div>7.JS에다가
hide가 제거되면 메세지가 보인다
elSuccessMessage.classList.remove('hide')8. 의사코드를 작성해보자
아이디입력창에 글자를 키보드로 입력할때/ 글자수가 4개이상이면/ 사용할수 있는 아이디입니다 메세지가 출력된다.
9.JS에다가 의사코드 첫번째것을 써보자.
아이디입력창에 글자를 키보드로 입력할때
elInputUsername.onkeyup = function () {
console.log(elInputUsername.value)
}10. '글자수가 4개이상이면'에 대해서 생각해보자
일단 함수먼저 만든다
function isMoreThan4Length(value) {
return value.length >= 4
}이제 if문 만들거다
elInputUsername.onkeyup = function() {
if(isMoreThan4Length(elInputUsername.value)) {
console.log('4글자보다 크네')
}
else{
console.log('짧다')
}
}11. 이제 '사용할수있는 아이디입니다' 메세지 뜨게할거다
elSuccessMessage.classList.remove('hide')
12. 4글자이상 메세지도 보이게
elFailureMessage.classList.remove('hide')<!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="login.css">
</head>
<body>
<main>
<fieldset>
<input type="text" id="username" placeholder="아이디" />
</fieldset>
<div class="success-message hide">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
<fieldset>
<input type="password" id="password" placeholder="비밀번호" />
</fieldset>
<fieldset>
<input
type="password"
id="password-retype"
placeholder="비밀번호 확인"
/>
</fieldset>
<fieldset class="signup">
<button>회원가입</button>
</fieldset>
<script src="login.js"></script>
</main>
</body>
</html>let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-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')
}
}
function isMoreThan4Length(value) {
return value.length >= 4
}# 비밀번호불일치내용도 포함하면
<!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="login.css">
</head>
<body>
<main>
<fieldset>
<input type="text" id="username" placeholder="아이디" />
</fieldset>
<div class="success-message hide">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
<fieldset>
<input type="password" id="password" placeholder="비밀번호" />
</fieldset>
<fieldset>
<input
type="password"
id="password-retype"
placeholder="비밀번호 확인"
/>
</fieldset>
<div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>
<fieldset class="signup">
<button>회원가입</button>
</fieldset>
<script src="login.js"></script>
</main>
</body>
</html>let elInputUsername = document.querySelector('#username')
let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')
let numFailureMessage= document.querySelector('.mismatch-message')
let password1 = document.querySelector('#password')
let password2 = document.querySelector('#password-retype')
elInputUsername.onkeyup = function () {
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
}
password2.onkeyup = function(){
if(isMatch(password1.value, password2.value)){
numFailureMessage.classList.add('hide')
}
else {
numFailureMessage.classList.remove('hide')
}
}
function isMatch (password1, password2) {
return password1 === password2
}728x90
'부트캠프교육중 > DOM' 카테고리의 다른 글
| 기억안난거 다시 공부한것 (0) | 2023.02.14 |
|---|---|
| [DOM] 이벤트객체 (0) | 2023.01.07 |
| [DOM] Delete (0) | 2023.01.06 |
| [DOM] Update (0) | 2023.01.06 |
| [DOM] Read (0) | 2023.01.06 |