[ JavaScript ] 회원가입 창 (일부) 만들기, 비밀번호 확인에 대한 심화 공부!

[ JavaScript ] 회원가입 창 (일부) 만들기, 비밀번호 확인에 대한 심화 공부!

2024. 5. 10. 20:15ㆍ· FRONT-END/└ JS

환경 : Visual Studio Code

~~- 전체 코드는 맨 마지막 코드만 있습니다.~~

[ (1)기본 - 일단 되긴 되는 코드 ]

- 비밀번호 확인 시 사용할 수 있는 코드

    <script type="text/javascript">

        function checkMemberPw(){
            var inputTarget = document.querySelector("input[name=memberPw]");
            var memberPw = inputTarget.value;
            
            var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{6,15}$/;//긍정탐색
            var isValid = regex.test(memberPw);

            var resultTarget = document.querySelector(".pw-result");
            if(isValid) {
                resultTarget.textContent = "비밀번호가 올바른 형식입니다.";
                resultTarget.style.color = "#00b894";
            }
            else {
                resultTarget.textContent = "비밀번호는 반드시 영문 대,소문자와 숫자, 특수문자가 포함되어야 합니다.";
                resultTarget.style.color = "#d63031";
            }
        }

        function checkMemberPwRe(){
            //입력 - 비밀번호, 비밀번호 확인 입력 값 필요
            var target1 = document.querySelector("[name=memberPw]");
            // var target2 = document.querySelector("#pw-reinput");
            var target2 = document.getElementById("pw-reinput");

            var memberPw = target1.value; //비밀번호
            var memberPw2 = target2.value; //비밀번호 확인


            var resultTarget = document.querySelector(".pw-re-result");
             //비밀번호가 입력되지 않았으면
            if(!memberPw) { //문자열이 부정적인 값일 경우를 가장 짧게 적는 법
                resultTarget.textContent = "";
            } 
            //비밀번호가 입력되었으면
            else if(memberPw == memberPw2) { //비밀번호와 확인이 일치하면
                resultTarget.textContent = "비밀번호가 일치합니다";
                resultTarget.style.color = "#00b894";
            }
            else { //일치하지 않는다면
                resultTarget.textContent = "비밀번호가 일치하지 않습니다";
                resultTarget.style.color = "#d63031";
            }
        }

    </script>

└ 비밀번호 / 비밀번호 확인 부분에 대한 코드만 있음

(+) 비밀번호가 입력되지 않았다는 것을 검사하기 위한 검사식은 아래와 같이 있다.

if(memberPw == "") { //자바스크립트는 모든 비교를 ==로 한다
if(memberPw.length == 0) { //글자수 0이면
if(memberPw == false) { //문자열이 부정적인 값이라면
if(!memberPw) //3번째 코드를 가장 간결하게 사용하는 방법

[ (2) nextElementSbling을 사용한 코드 ]

    <script type="text/javascript">
        
        function checkMemberId(){
            //입력값 불러와서 검사한 뒤 출력

            //입력
            var inputTarget = document.querySelector("input[name=memberId]");
            var memberId = inputTarget.value;

            //검사
            var regex = /^[a-z][a-z0-9]{7,19}$/;
            var isValid = regex.test(memberId);

            //출력
            //var resultTarget = document.querySelector("input[name=memberId] + div");
            var resultTarget = inputTarget.nextElementSibling;//위와 동일한 코드
            if(isValid) {
                resultTarget.textContent = "멋진 아이디네요!";
                resultTarget.style.color = "#00b894";
            }
            else {
                resultTarget.textContent = "아이디는 소문자 시작, 숫자 포함 8~20자로 작성하세요";
                resultTarget.style.color = "#d63031";
            }
        }

    </script>

└ 아이디 부분에 대한 코드만 있음

(+) 쿼리를 선택하는 방법은 아래와 같다. (둘이 같은 코드!)

var resultTarget = document.querySelector("input[name=memberId] + div");
var resultTarget = inputTarget.nextElementSibling;

[ (3) 클래스를 활용하여 스타일태그에서 색상 효과 주기 ]

    <style>
        /* 
            입력창에 대한 피드백 디자인
            - 입력창 뒤에 피드백 영역이 있다면 판정결과에 따라 표시되도록 구현
        */
        .tool.success {
            border-color: #00b894 !important;
        }
        .tool.fail {
            border-color: #d63031 !important;
        }

        .success-feedback {
            color: #00b894;
            display: none;
        }
        .fail-feedback,
        .fail2-feedback,
        .fail3-feedback {
            color: #d63031;
            display: none;
        }

        .tool.success ~ .success-feedback, 
        .tool.fail ~ .fail-feedback,
        .tool.fail2 ~ .fail2-feedback,
        .tool.fail3 ~ .fail3-feedback {
            display: block;
        }
        
    </style>

└ 효과를 준 스타일 태그

	<script type="text/javascript">
        
        function checkMemberId(){
            //입력값 불러와서 검사한 뒤 출력

            //입력
            var inputTarget = document.querySelector("input[name=memberId]");
            var memberId = inputTarget.value;

            //검사
            var regex = /^[a-z][a-z0-9]{7,19}$/;
            var isValid = regex.test(memberId);

            //출력
            var resultTarget = inputTarget.nextElementSibling;//위와 동일한 코드

            //먼저 붙어있던 success, fail 클래스를 제거하세요
            resultTarget.classList.remove("success", "fail");

            if(isValid) {
                resultTarget.textContent = "멋진 아이디네요!";
                //이 태그이 success라는 클래스를 붙여주세요
                resultTarget.classList.add("success");
            }
            else {
                resultTarget.textContent = "아이디는 소문자 시작, 숫자 포함 8~20자로 작성하세요";
                //이 태그이 fail라는 클래스를 붙여주세요
                resultTarget.classList.add("fail");
            }
        }

    </script>

└ 스타일 태그를 적용한 아이디 부분

(+) 먼저 붙어있던 클래스를 제거 (적용되어 있던 디지인을 제거)

resultTarget.classList.remove("success", "fail");
(+) 클래스를 붙여주기
resultTarget.classList.add("success");

[ (4) 코드 다듬기 ]

~~- 최종의 최종의 최종~~

[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        /* 
            입력창에 대한 피드백 디자인
            - 입력창 뒤에 피드백 영역이 있다면 판정결과에 따라 표시되도록 구현
        */
        .tool.success {
            border-color: #00b894 !important;
        }
        .tool.fail {
            border-color: #d63031 !important;
        }

        .success-feedback {
            color: #00b894;
            display: none;
        }
        .fail-feedback,
        .fail2-feedback,
        .fail3-feedback {
            color: #d63031;
            display: none;
        }

        .tool.success ~ .success-feedback, 
        .tool.fail ~ .fail-feedback,
        .tool.fail2 ~ .fail2-feedback,
        .tool.fail3 ~ .fail3-feedback {
            display: block;
        }
        
    </style>

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
        
        function checkMemberId(){
            //입력값 불러와서 검사한 뒤 출력

            //입력
            var inputTarget = document.querySelector("input[name=memberId]");
            var memberId = inputTarget.value;

            //검사
            var regex = /^[a-z][a-z0-9]{7,19}$/;
            var isValid = regex.test(memberId);

            //출력 - 입력창에 검사 결과를 표시하고 나머지 처리는 연결되도록 구현
            inputTarget.classList.remove("success", "fail");
            if (isValid) {
                inputTarget.classList.add("success");
            } 
            else {
                inputTarget.classList.add("fail");
            }
            
        }

        function checkMemberPw(){
            var inputTarget = document.querySelector("input[name=memberPw]");
            var memberPw = inputTarget.value;
            
            var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{6,15}$/;//긍정탐색
            var isValid = regex.test(memberPw);


            inputTarget.classList.remove("success", "fail");
            inputTarget.classList.add(isValid ? "success" : "fail");
        }

        function checkMemberPwRe(){
            var target1 = document.querySelector("[name=memberPw]");
            var target2 = document.getElementById("pw-reinput");

            var memberPw = target1.value; //비밀번호
            var memberPw2 = target2.value; //비밀번호 확인


            target2.classList.remove("success", "fail", "fail2");

            if(!memberPw) { 
                target2.classList.add("fail2");
            } 
            else if(memberPw == memberPw2) {
                target2.classList.add("success");
            }
            else { 
                target2.classList.add("fail");
            }
        }

    </script>
</head>
<body>

    <form autocomplete="off" action="?" method="post">
    <div class="container w-500">
        <div class="cell center">
            <h1>회원가입</h1>
        </div>

        <div class="cell">
            <label>
                아이디
                <i class="fa-solid fa-asterisk red"></i>
            </label>
            <input type="text" name="memberId" oninput="checkMemberId();" placeholder="소문자 시작, 숫자 포함 8~20자" class="tool w-100">
            <div class="success-feedback">멋진 아이디네요!</div>
            <div class="fail-feedback">아이디는 소문자 시작, 숫자 포함 8~20자로 입력하세요</div>
        </div>

        <div class="cell">
            <label>
                비밀번호
                <i class="fa-solid fa-asterisk red"></i>
            </label>
            <input type="password" name="memberPw" oninput="checkMemberPw();" placeholder="대소문자,숫자,특수문자 포함 6~15자" class="tool w-100">
            <div class="success-feedback">비밀번호가 올바른 형식입니다.</div>
            <div class="fail-feedback">비밀번호는 반드시 영문 대,소문자와 숫자, 특수문자가 포함되어야 합니다.</div>
        </div>

        <div class="cell">
            <label>
                비밀번호 확인
                <i class="fa-solid fa-asterisk red"></i>
            </label>
            <!-- 비밀번호 확인은 백엔드로 전송되지 않도록 이름을 부여하지 않는다 -->
            <input type="password" placeholder=""
                    id="pw-reinput" class="tool w-100"
                    oninput="checkMemberPwRe();">
            <div class="success-feedback">비밀번호가 일치합니다</div>
            <div class="fail-feedback">비밀번호가 일치하지 않습니다</div>
            <div class="fail2-feedback">비밀번호를 먼저 입력하세요</div>
        </div>

        <div class="cell">
            <button class="btn positive w-100">
                <i class="fa-solid fa-user"></i>
                회원가입
            </button>
        </div>
    </div>
    </form>

   

</body>
</html>

(+) 비밀번호 확인 시 백엔드로 넘어가지 않도록 설정 (name을 부여하지 않음)

(일치하게 작성했는지 확인하는 것이므로 굳이 디비를 끌고 올 필요 없음)

맨 마지막 코드(4번)에 대한 실행 결과

개인 공부 기록용입니다:)

728x90

'· FRONT-END > └ JS' 카테고리의 다른 글

[ JavaScript ] 로그인 화면에 폼 이벤트 추가 (0)	2024.05.12
[ JavaScript ] onblur 속성 사용해보기 (0)	2024.05.11
[ JavaScript ] 1000자까지만 입력되도록 막아보기 (0)	2024.05.09
[ JavaScript ] 입력에 대한 처리 및 문자열 검사 (0)	2024.05.07
[ JavaScript ] 버튼을 눌러 이미지의 크기 조절 (0)	2024.05.05

고구마가 되고 싶은 감자네

고구마가 되고 싶은 감자네

태그

최근글

댓글

공지사항

아카이브

'· FRONT-END > └ JS' 카테고리의 다른 글

관련글

티스토리툴바