CSS와 JavaScript를 활용하면 사용자가 비밀번호를 입력하는 순간 조건 충족 여부를 실시간으로 보여주는 유효성 검사 폼을 손쉽게 만들 수 있습니다. 이번 글에서는 소문자, 대문자, 숫자 포함 여부를 자동으로 점검하는 폼을 예제 코드와 함께 단계별로 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
input {
width: 100%;
padding: 12px;
margin-top: 6px;
margin-bottom: 16px;
}
input[type="submit"] {
background-color: rgb(69, 27, 117);
color: white;
font-weight: bold;
font-size: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
padding: 20px;
}
#checksField {
display: none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#checksField p {
padding: 10px 35px;
font-size: 18px;
}
.correct {
color: rgb(28, 0, 128);
}
.correct:before {
position: relative;
left: -35px;
content: "✔";
}
.wrong {
color: red;
}
.wrong:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<h1 style="text-align: center;">Password Validation Example</h1>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required />
<input type="submit" value="Submit" />
</form>
<div id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="wrong">A <b>number</b></p>
</div>
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
myInput.onfocus = function() {
document.getElementById("checksField").style.display = "block";
};
myInput.onblur = function() {
document.getElementById("checksField").style.display = "none";
};
myInput.onkeyup = function() {
var lowerCaseLetters = /[a-z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("wrong");
letter.classList.add("correct");
} else {
letter.classList.remove("correct");
letter.classList.add("wrong");
}
var upperCaseLetters = /[A-Z]/g;
if (myInput.value.match(upperCaseLetters)) {
capital.classList.remove("wrong");
capital.classList.add("correct");
} else {
capital.classList.remove("correct");
capital.classList.add("wrong");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("wrong");
number.classList.add("correct");
} else {
number.classList.remove("correct");
number.classList.add("wrong");
}
};
</script>
</body>
</html>
코드 동작 방식
1. 정규식 패턴으로 비밀번호 규칙 정의
비밀번호 입력 필드에는 pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8}' 정규식이 적용되어 있습니다. 이 패턴은 숫자, 소문자, 대문자를 각각 최소 하나씩 포함하고 전체 길이가 8자 이상이어야 한다는 규칙을 의미합니다. 또한 title 속성에 안내 문구를 넣어두면 브라우저의 기본 유효성 검사가 실패했을 때 해당 메시지가 툴팁으로 표시됩니다.
2. CSS로 조건 충족 상태 시각화
#checksField 영역은 기본적으로 display:none으로 숨겨져 있다가 필요할 때만 나타납니다. .correct 클래스가 적용된 항목은 ✔ 아이콘과 함께 강조되고, .wrong 클래스가 적용된 항목은 빨간색 ✖ 아이콘으로 표시되어 사용자가 어떤 조건을 충족했는지 한눈에 파악할 수 있습니다.
3. JavaScript 이벤트로 실시간 검사
입력 필드에 포커스가 들어오면(onfocus) 요구 사항 목록이 나타나고, 포커스가 벗어나면(onblur) 다시 숨겨집니다. 키를 누를 때마다 발생하는 onkeyup 이벤트에서는 정규식(/[a-z]/g, /[A-Z]/g, /[0-9]/g)으로 입력값을 검사한 뒤, 조건을 충족하면 correct 클래스를, 그렇지 않으면 wrong 클래스를 교체하여 아이콘과 색상이 즉시 반영되도록 처리합니다.
실행 결과
위 코드를 브라우저에서 열면 다음과 같은 초기 화면이 나타납니다.
사용자 이름과 비밀번호를 입력하면 각 조건의 충족 여부가 실시간으로 업데이트되는 것을 확인할 수 있습니다.
