티스토리 뷰

WEB/JavaScript

[JavaScript] 비밀번호가 8자 이상이고 특수문자가 포함여부 체크하기

silverline79 2026. 1. 3. 16:03

 

1. 비밀번호 체크를 위한 정규표현식 🔒

가장 표준적인 "8자 이상 + 영문 + 숫자 + 특수문자 포함" 규칙은 다음과 같습니다.

const pwRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

 

  • (?=.*[A-Za-z]): 최소 하나의 영문자가 포함되어야 함
  • (?=.*\d): 최소 하나의 숫자가 포함되어야 함
  • (?=.*[@$!%*#?&]): 최소 하나의 특수문자가 포함되어야 함
  • {8,}: 전체 길이는 8자 이상

 

2. 실무형 실시간 체크 가이드 (UX 개선)

요즘 웹사이트들은 입력창 아래에 체크리스트를 두고, 조건을 만족할 때마다 초록색으로 변하게 만듭니다. 이 방식을 자바스크립트로 구현해 보겠습니다.

🛠️ 비밀번호 체크리스트 코드

 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>비밀번호 유효성 검사</title>
    <style>
        .form-group { max-width: 400px; margin: 50px auto; }
        input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        
        .check-list { list-style: none; padding: 0; margin-top: 10px; font-size: 13px; color: #888; }
        /* 조건을 만족했을 때 바뀔 클래스 */
        .check-list li.valid { color: #2ecc71; font-weight: bold; }
        .check-list li.valid::before { content: '✔ '; }
        .check-list li::before { content: '✖ '; }
    </style>
</head>
<body>

    <div class="form-group">
        <label>비밀번호 설정</label>
        <input type="password" id="userPw" placeholder="비밀번호를 입력하세요">
        
        <ul class="check-list">
            <li id="lenCheck">8자 이상</li>
            <li id="numCheck">숫자 포함</li>
            <li id="specialCheck">특수문자 포함 (@$!%*#?&)</li>
        </ul>
    </div>

    <script>
        const userPw = document.getElementById('userPw');
        
        // 체크할 목록들 선택
        const lenCheck = document.getElementById('lenCheck');
        const numCheck = document.getElementById('numCheck');
        const specialCheck = document.getElementById('specialCheck');

        userPw.addEventListener('input', () => {
            const val = userPw.value;

            // 1. 길이 체크 (8자 이상)
            if (val.length >= 8) {
                lenCheck.classList.add('valid');
            } else {
                lenCheck.classList.remove('valid');
            }

            // 2. 숫자 포함 체크 (정규표현식 \d 사용)
            if (/\d/.test(val)) {
                numCheck.classList.add('valid');
            } else {
                numCheck.classList.remove('valid');
            }

            // 3. 특수문자 포함 체크
            if (/[@$!%*#?&]/.test(val)) {
                specialCheck.classList.add('valid');
            } else {
                specialCheck.classList.remove('valid');
            }
        });
    </script>
</body>
</html>

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

 

비밀번호가 8자 이상이고 특수문자가 포함여부 체크.html
0.00MB

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript]슬라이드 이미지  (0) 2026.01.03
[JavaScript] 이메일 형식 체크 정규표현식  (0) 2026.01.03
[JavaScript] 자주하는 질문 FAQ 아코디언 메뉴  (0) 2026.01.03
[JavaScript] 탭메뉴, 아코디언, 모달  (0) 2026.01.03
[JavaScript] 모달 팝업  (0) 2026.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함