[JS] 비밀번호 유효성 검사

티스토리 뷰

개발

[JS] 비밀번호 유효성 검사

woody._.k 2021. 10. 29. 00:00

회원가입 시에 사용되는 비밀번호 유효성 검사 기능을 구현해보자.

구현할 비밀번호 유효성 검사 항목

영문 소문자를 사용 여부
영문 대문자를 사용 여부
숫자를 사용여부
특수문자 사용 여부
8자 이상

유효성 검사 항목에 대한 각각의 함수 만들기

const isValidLowercase = (password) => {
  return password.search(/[a-z]/g) >= 0;
}

const isValidUppercase = (password) => {
  return  password.search(/[A-Z]/g) >= 0;
}

const isValidNumber = (password) => {
  return  password.search(/[0-9]/g) >= 0;
}

const isValidSpecial = (password) => {
  return password.search(/[~!@#$%^&*()_+|<>?:{}`]/gi) >= 0;
}
        
const isValidCaracterLength = (password) => {
  return password.length >= 8;
}

위의 각각의 함수들은 8자 이상에 대한 유효성 검사를 제외하고 <input> 요소에 입력되는 password를 String 객체의 search() 메서드와 정규표현식을 이용하여 유효성을 검사한다. search() 메서드는 정규표현식과 주어진 string 간에 첫 번째로 매치되는 것의 인덱스를 반환하며, 매치되는 것이 없으면 -1을 반환한다.

각각의 함수에서 사용되는 정규표현식의 의미는 다음과 같다.

/[a-z]/g : 영문 소문자를 전역에서 검색
/[A-Z]/g : 영문 대문자를 전역에서 검색
/[0-9]/g : 숫자를 전역에서 검색
/[~!@#$%^&*()_+|<>?:{}`]/gi : ~!@#$%^&*()_+|<>?:{}`을 검색

만약 영문 대소문자를 전역에서 검색하려면 /[a-zA-Z]/gi 같이 사용하면 된다. 정규표현식 뒤에 사용되는 g와 i는 정규표현식에서 사용되는 플래그이며, g는 전역 검색을 의미하고, i는 대소문자 구분 없이 검색하는 것을 의미한다.

유효성 검사 함수 적용하기

inputElem.addEventListener('input', (e) => {
  const password = e.target.value;
  isValidLowercase(password) ? lowercaseElem.classList.add('active') : lowercaseElem.classList.remove('active');
  isValidUppercase(password) ? uppercaseElem.classList.add('active') : uppercaseElem.classList.remove('active');
  isValidNumber(password) ? numberElem.classList.add('active') : numberElem.classList.remove('active');
  isValidSpecial(password) ? specialElem.classList.add('active') : specialElem.classList.remove('active');
  isValidCaracterLength(password) ? characterLengthElem.classList.add('active') : characterLengthElem.classList.remove('active');
})

구현한 각각의 유효성 검사에 대한 함수는 <input> 요소에 'input' 이벤트에 대한 addEventListener의 콜백 함수로 등록하여, 비밀번호가 입력될 때마다 유효성 검사가 될 수 있도록 하였다. 그리고 유효성 검사의 여부에 따라, 유효성 검사 항목에 대한 요소에 active 클래스를 반영하여 유효성 검사의 상태를 확인할 수 있도록 하였다.

[ 전체 코드 ]

<!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>
        ul {
            padding: 0;
        }
        li {
            margin: 0;
            padding: 5px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .checkbox {
            width: 18px;
            height: 18px;
            border-radius: 50px;
            background-color: lightgray;
            margin-right: 10px;
        }
        .label {
            color: lightgray;
        }
        li.active .checkbox {
            background-color: aquamarine;
        }
        li.active .label {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="signup-container">
        <div class="title"><span>비밀번호 유효성 검사</span></div>
        <div class="password">
            <input type="text" class="input-password">
        </div>
        <ul>
            <li class="lowercase"><div class="checkbox"></div><span class="label">Lowercase</span> </li>
            <li class="uppercase"><div class="checkbox"></div><span class="label">Uppercase</span> </li>
            <li class="number"><div class="checkbox"></div><span class="label">Number</span> </li>
            <li class="special"><div class="checkbox"></div><span class="label">Special Character (!@#$%^&*)</span> </li>
            <li class="character-length"><div class="checkbox"></div><span class="label">8 Characters</span> </li>
        </ul>
    </div>
    <script>
        const inputElem = document.querySelector('input');
        const lowercaseElem = document.querySelector('.lowercase');
        const uppercaseElem = document.querySelector('.uppercase');
        const numberElem = document.querySelector('.number');
        const specialElem = document.querySelector('.special');
        const characterLengthElem = document.querySelector('.character-length');

        const isValidLowercase = (password) => {
            return password.search(/[a-z]/g) >= 0;
        }
        const isValidUppercase = (password) => {
            return  password.search(/[A-Z]/g) >= 0;
        }
        const isValidNumber = (password) => {
            return  password.search(/[0-9]/g) >= 0;
        }
        const isValidSpecial = (password) => {
            return password.search(/[~!@#$%^&*()_+|<>?:{}`]/gi) >= 0;
        }
        const isValidCaracterLength = (password) => {
            return password.length >= 8
        }

        inputElem.addEventListener('input', (e) => {
            const password = e.target.value;
            isValidLowercase(password) ? lowercaseElem.classList.add('active') : lowercaseElem.classList.remove('active');
            isValidUppercase(password) ? uppercaseElem.classList.add('active') : uppercaseElem.classList.remove('active');
            isValidNumber(password) ? numberElem.classList.add('active') : numberElem.classList.remove('active');
            isValidSpecial(password) ? specialElem.classList.add('active') : specialElem.classList.remove('active');
            isValidCaracterLength(password) ? characterLengthElem.classList.add('active') : characterLengthElem.classList.remove('active');
        })
    </script>
</body>
</html>

저작자표시 비영리

'개발' 카테고리의 다른 글

[JS] 바닐라 자바스크립트로 ToDo-List 만들기 - (1) 기능정의 및 HTML/CSS (9)	2021.11.02
[JS] Intersection Observer API 사용법과 활용 (0)	2021.10.30
[JS] Event.stopPropagation()를 활용한 모달 만들기 (0)	2021.10.28
[CSS][JS] 간단한 Progress Bar 만들기 (0)	2021.10.24
[JAVA] JSP 기본문법 - 주석/선언/표현식/스크립트릿 (0)	2019.05.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			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

글 보관함

우디의 개발 블로그

티스토리 뷰