웹 서비스에서 회원가입이나 비밀번호 재설정 페이지를 개발할 때, 사용자로부터 올바른 형식의 비밀번호를 입력받는 것은 필수적인 과정이다.
자바스크립트와 정규표현식을 활용하여 '공백이 없는 8~30자리 비밀번호'를 설정하고, 비밀번호 확인란과 일치하는지 검증하는 Form을 구현해 보자.
주요 기능
- 길이 제한: HTML
minlength,maxlength속성을 활용한 8~30자 제한 - 버튼 활성화 제어: 두 입력란에 모두 값이 입력되어야 '보내기' 버튼 활성화
- 일치 여부 확인: '비밀번호'와 '비밀번호 확인' 입력값 동일 여부 검증
- 공백 체크: 정규표현식(
/\s/g)을 사용해 띄어쓰기(공백) 포함 여부 검사
전체 코드 및 구현 로직
아래는 HTML, CSS, JS가 포함된 전체 코드이다.
<!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>비밀번호 재설정</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 disabled>보내기</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");
// 1. 폼 제출 이벤트 제어
form.addEventListener("submit", (e) => {
e.preventDefault(); // 폼 기본 제출 동작 막기
matchPassword();
});
// 2. 입력 감지 및 버튼 활성화 로직
inputs.forEach((item) => {
item.addEventListener("input", (e) => {
// 두 입력란에 모두 값이 있을 때만 버튼 활성화
if (pwd.value && chkPwd.value) {
button.classList.add("active");
button.disabled = false;
} else {
button.classList.remove("active");
button.disabled = true;
}
});
});
// 3. 비밀번호 일치 여부 검사
function matchPassword() {
if (pwd.value && chkPwd.value && pwd.value === chkPwd.value) {
// 일치할 경우 공백 체크로 넘어간다
chkSpace(pwd.value);
} else {
alertTxt.innerText = "비밀번호가 일치하지 않습니다.";
}
}
// 4. 공백 포함 여부 검사 (정규식 활용)
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;
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: #ff4d4d; /* 에러 메시지는 눈에 띄게 빨간색 계열로 변경 추천 */
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;
transition: background-color 0.3s;
}
#content button.active {
pointer-events: auto;
background-color: #7c4dff;
cursor: pointer;
}
</style>
코드 상세 리뷰
- HTML 속성 활용:
minlength="8"과maxlength="30"을 부여하여, 브라우저 단에서 1차적인 길이 유효성을 강제했다. - 실시간 버튼 제어:
input이벤트 리스너를 활용해 사용자가 타이핑할 때마다 값을 체크한다. 두 인풋 모두 값이 존재할 때만active클래스를 추가하여 시각적 피드백을 제공한다. - 정규식을 이용한 공백 탐지:
/\s/g는 문자열 내의 모든 공백(띄어쓰기, 탭 등)을 찾아내는 정규식이다..match()메서드를 이용해 공백이 하나라도 포함되어 있다면 사용자에게 경고 메시지(alertTxt)를 띄운다.
간단한 바닐라 자바스크립트(Vanilla JS) 로직만으로도 사용자 친화적인 폼 검증 단계를 만들 수 있다. 추후 영문, 숫자, 특수문자 조합 등을 강제하고 싶다면 chkSpace 함수의 정규표현식을 확장하여 활용하면 된다.
