<!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>Document</title>
<style>
*{
box-sizing: border-box;
}
body{
/* margin: 0;
padding: 0; */
background-color: rgb(27, 188, 155);
}
.container{
width: 300px;
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: aliceblue;
text-align: center;
padding: 20px;
border-radius: 5px;
}
input{
padding: 10px;
}
.text-field{
font-size: 0.75em;
border: 0px;
/* box-sizing: border-box; 로 설정했기 때문에 100% */
width: 100%;
margin-bottom: 10px;
/* margin: 0px 0px 10px; 같은방식 */
border-radius: 5px;
}
.btn-input{
font-size: 0.75em;
border: 0px;
width: 100%;
margin-bottom: 30px;
border-radius: 5px;
background-color: rgb(27, 188, 155);
color: white;
}
.links{
text-align: center;
margin: 0px;
}
.links a{
font-size: 0.75em;
color: gray;
/* text-decoration-line:none ; */
}
</style>
</head>
<body>
<div class="container">
<form action="">
<!-- input 들어오는 위치 -->
<input type="text" name="id" class="text-field" placeholder="아이디(8자리 이상)"><br>
<input type="password" name="pw" class="text-field" placeholder="비밀번호 (숫자1개이상포함 4~8문자)"><br>
<input type="submit" class="btn-input" value="로그인" disabled>
<!-- disabled 비활성화 = 버튼을 누르지 못하도록 설정 (기본설정이 true)-->
</form>
<div class="links">
<!-- 하단링크 -->
<a href="#">비밀번호를 잊어버리셨나요</a>
</div>
</div>
<script>
const btn = document.querySelector('.btn-input'); //로그인 버튼
const inputs = document.querySelectorAll('.text-field'); //입력 필드(2개=all)
// console.log(input); //nodeList(2)로 두가지 값을 가져오는 것을 확인!
// //아이디에 대한 규칙
// inputs[0].addEventListener('input',()=>{ //'input'이벤트 = input요소의 값이 변경되었을 때 (값을 입력받았을때)
// let upw = document.getElementsByClassName('text-field')[1].value;
// //패스워드에 값이 있는지 없는지 먼저 확인
// if(upw.length > 7){
// // 버튼 활성화 조건 만족하면 (패스워드에 값이 8개이상 있음)
// let uid = document.getElementsByClassName('text-field')[0].value;
// if(uid.length > 7){
// btn.style.setProperty('background-color','rgb(27, 299, 155)');
// // btn.style.backgroundColor = rgb(27, 299, 155); // 동일
// btn.disabled = false; // 비활성화 제거
// }
// }else{
// btn.style.setProperty('background-color','#aaa');
// btn.disabled = true; // 비활성화 유지
// }
// })
let check = false; //비밀번호 확인용 boolean
//아이디에 대한 규칙
inputs[0].addEventListener('input',()=>{
let upw = document.getElementsByClassName('text-field')[1].value;
let uid = document.getElementsByClassName('text-field')[0].value;
if(check){
if(uid.length > 7){
btn.style.setProperty('background-color','rgb(27, 299, 155)');
btn.disabled = false;
} else {
btn.style.setProperty('background-color','#aaa');
btn.disabled = true;
}
}else{
btn.style.setProperty('background-color','#aaa');
btn.disabled = true;
}
})
//패스워드에 대한 규칙
// inputs[1].addEventListener('input',()=>{
// let uid = document.getElementsByClassName('text-field')[0].value;
// if(uid.length > 7){
// let upw = document.getElementsByClassName('text-field')[1].value;
// // 정규식 패턴 체크과정
// let reg = /^(?=.*\d).{4,8}$/.test(upw);
// // 4~8자리 숫자로 1개 이상의 숫자를 포함하는 조건에 일치하는지 .test()
// console.log(upw, reg);
// if(reg){
// btn.style.setProperty('background-color','rgb(27, 299, 155)');
// btn.disabled = false;
// // 8자리가 넘어가도 false가 됨(사용) = 이유! 이미 4-8개 사이일떄 false가 되었으므로!
// }
// }else{
// btn.style.setProperty('background-color','#aaa');
// btn.disabled = true;
// }
// })
inputs[1].addEventListener('input',()=>{
let uid = document.getElementsByClassName('text-field')[0].value; //아이디 입력값
let upw = document.getElementsByClassName('text-field')[1].value; //비번 입력값
let reg = /^(?=.*\d).{4,8}$/.test(upw); //비번 값 확인
console.log(upw, reg);
if(uid.length > 7){
if(reg){
btn.style.setProperty('background-color','rgb(27, 299, 155)');
btn.disabled = false;
check = true;
}else{
btn.style.setProperty('background-color','#aaa');
btn.disabled = true;
check = false;
}
} else {
btn.style.setProperty('background-color','#aaa');
btn.disabled = true;
check = false;
}
})
</script>
</body>
</html>
'JS > JS 예시' 카테고리의 다른 글
| [JS] 할인율 구하기 (0) | 2023.04.24 |
|---|---|
| [JS] 여행 준비물 점검 목록 (버튼으로 추가, 삭제하기) (0) | 2023.04.21 |
| [JS] 구구단 ( 문제 출력 -> 맞추기 -> 결과 출력 ) (0) | 2023.04.20 |
| [JS] json으로 값을 받아와서 원하는 모양을 나눠 출력 (0) | 2023.04.20 |
| [JS] 데이터를 받아와서 원하는 모양으로 출력 (json) (0) | 2023.04.20 |