공백이 없는 8~30자리 비밀번호 설정하기
<!DOCTYPE html>
<html lang="ko">
<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>ANYCHAT</title>
</head>
<body id="content">
<div>
<div>
<div>
<img
src="https://kr.object.ncloudstorage.com/anychat-emoticon-qa/dafault_image/anychat_ci.svg"
alt="애니챗 로고"
width="80px"
/>
</div>
<h4>비밀번호 재설정</h4>
</div>
<div>
<p><b>(이메일 표시)</b> 의 새 비밀번호를 설정해 주세요</p>
</div>
<form id="form">
<div class="pwdContainer">
<div>
<p>비밀번호 입력</p>
<input
type="password"
placeholder="비밀번호를 입력하세요"
minlength="8"
maxlength="30"
name="pwd"
id="pwd"
/>
<p class="alertTxt"></p>
</div>
<div>
<p>비밀번호 확인 입력</p>
<input
type="password"
placeholder="비밀번호를 확인 입력하세요"
minlength="8"
maxlength="30"
name="chkPwd"
id="chkPwd"
value=""
/>
</div>
</div>
<button>보내기</button>
</form>
</div>
<script>
let form = document.getElementById("form");
let inputs = document.querySelectorAll("input");
let button = document.querySelector("form button");
let pwd = document.getElementById("pwd");
let chkPwd = document.getElementById("chkPwd");
let alertTxt = document.querySelector(".alertTxt");
form.addEventListener("submit", (e) => {
e.preventDefault();
matchPassword();
});
inputs.forEach((item) => {
item.addEventListener("input", (e) => {
// console.log(inputs.length)
if (pwd.value && chkPwd.value) {
button.classList.add("active");
button.disabled = false;
} else {
button.classList.remove("active");
button.disabled = true;
}
});
});
// 비밀번호 일치한지
function matchPassword() {
if (pwd.value && chkPwd.value && pwd.value === chkPwd.value) {
chkSpace(pwd.value + chkPwd.value);
} else {
alertTxt.innerText = "비밀번호가 일치하지 않습니다.";
}
}
//공백체크
function chkSpace(str) {
var reg = /\s/g;
if (str.match(reg)) {
alertTxt.innerText = "8~30자까지 공백은 허용되지 않습니다";
} else {
// alertTxt.innerText = "비밀번호 재설정 완료";
console.log("재설정 완료");
}
}
</script>
</body>
</html>
<style>
* {
overflow: hidden;
}
#content {
box-sizing: border-box;
height: 100vh;
display: flex;
align-items: center;
margin: 0;
}
#content > div {
max-width: 480px;
width: 80%;
height: fit-content;
margin: 0 auto;
/* border: 1px solid #000;
padding: 20px 30px; */
text-align: center;
}
#content P {
font-size: 1.1em;
word-break: keep-all;
margin: 20px 0 0;
line-height: 180%;
letter-spacing: -0.56px;
}
#content .pwdContainer {
padding: 0 50px;
text-align: left;
}
#content input {
outline: none;
border: none;
border-bottom: solid 1px #333;
width: 100%;
margin-top: 8px;
padding-bottom: 5px;
}
#content input::placeholder {
color: #bebebe;
}
#content .alertTxt {
font-size: 0.7em;
color: #969696;
margin-top: 5px;
}
#content button {
display: block;
text-align: center;
width: 200px;
background-color: #969696;
border: none;
border-radius: 5px;
padding: 8px 0;
margin: 0 auto;
margin-top: 30px;
color: #fff;
cursor: default;
pointer-events: none;
}
#content button.active {
pointer-events: auto;
background-color: #7c4dff;
cursor: pointer;
}
</style>
