javascript 비밀번호 유효성 검사

연관글

• 2025.04.22 - [Programing/PHP] - php 비밀번호 유효성 검사

 

회원가입 또는 비밀번호 변경 기능을 구현할 때, 사용자의 비밀번호가 보안 기준을 충족하는지를 확인하는 절차는 필수적입니다. 본 글에서는 JavaScript로 작성된 checkPasswordJson 함수의 구조와 검증 기준을 정리하고, 각 조건별 반환 메시지를 살펴봅니다.

---

✨ 함수 설명

function checkPasswordJson(password){
    const lengthValid = password.length >= 10 && password.length <= 30;
    const hasNumber = /[0-9]/.test(password);
    const hasLetter = /[a-zA-Z]/.test(password);
    const hasSpecial = /[!@#$%^&*()\-_=+\\|[\]{};:'",.<>/?`~]/.test(password);
    const hasWhitespace = /\s/.test(password);

    if (!lengthValid) {
        return {
            msg: "비밀번호는 영문, 숫자, 특수문자를 혼합하여 최소 10자리 ~ 최대 30자리 이내로 입력해주세요.",
            state: false
        };
    }

    if (hasWhitespace) {
        return {
            msg: "비밀번호는 공백 없이 입력해주세요.",
            state: false
        };
    }

    if (!(hasNumber && hasLetter && hasSpecial)) {
        return {
            msg: "영문, 숫자, 특수문자를 혼합하여 입력해주세요.",
            state: false
        };
    }

    return {
        msg: "",
        state: true
    };
}

---

✨ 검증 기준 요약

• 길이 조건: 10자 이상 30자 이하
• 필수 문자 구성:
  • 숫자 (0~9)
  • 영문자 (대소문자 포함)
  • 특수문자 (!@#$%... 등)
• 금지 사항:
  • 공백 문자 포함 금지

---

✨ 검증 결과 예시

checkPasswordJson("Abc123!");
// 결과: { msg: "비밀번호는 영문, 숫자, 특수문자를 혼합하여 최소 10자리 ~ 최대 30자리 이내로 입력해주세요.", state: false }

checkPasswordJson("Abc1234567!");
// 결과: { msg: "", state: true }

checkPasswordJson("Abc1234567 !");
// 결과: { msg: "비밀번호는 공백 없이 입력해주세요.", state: false }

checkPasswordJson("abcdefghij");
// 결과: { msg: "영문, 숫자, 특수문자를 혼합하여 입력해주세요.", state: false }

---

✨ 활용 팁

• 로그인이나 비밀번호 변경 시 UI와 함께 연동하여 사용자에게 즉각적인 피드백 제공 가능
• 서버 측에서도 동일한 기준으로 검증 로직을 구성하면 보안 일관성을 유지할 수 있음
• 특수문자 패턴은 서비스 특성에 따라 추가 또는 제한 가능

---

✨ 결론

checkPasswordJson 함수는 사용자에게 보다 안전하고 강력한 비밀번호를 요구하기 위한 유용한 프론트엔드 검증 도구입니다. 보안 기준을 코드화하여 사용자 실수를 줄이고, 전반적인 시스템 보안 수준을 높이는 데 기여할 수 있습니다.