고래씌

[JavaScript] 회원가입 - 실습문제3 본문

Front-End/JavaScript

[JavaScript] 회원가입 - 실습문제3

고래씌 2023. 11. 10. 17:26

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습문제3</title>
</head>
<body>
    <h1>Practice3</h1>
    <fieldset>
        <legend>회원가입</legend>
        <form action="">
        아이디 : <input type="text" id="userId" name="userId"> <label></label> <br><br>
        비밀번호 : <input type="password" id="userPwd"> <label for=""></label><br><br>
        비밀번호 확인 : <input type="password" id="checkUserPwd"> <label for=""></label><br><br>
        이름 : <input type="text" id="userName"><br><br>
        <input type="button" value="회원가입" onclick="validate();">
    </form>
    </fieldset>

    <!-- onkeydown : 키를 눌렀을때 이벤트이다 (shift, alt, controll, capslock 등의 모든 키에 동작한다. 단 한영변환, 한자 등의 특수키는 인식 못한다).

    onkeyup : 키를 눌렀다가 땠을 때 이벤트이다 (onkeydown 에서 인식하는 키들을 인식 한다).

    onkeypress : 실제로 글자가 써질때 이벤트이다 (shift, tap, enter 등의 특수키는 인식 못한다). -->
    
    <script>
        let dupId = false;
        let notEqPwd = false;
        const validate = () => {

            //1) 아이디, 비밀번호, 비밀번호확인 ,이름중에 반값이 있나 확인.

            // 반복문으로 하면 더 간편하다
            // if(userId.value.length == 0){
            //     alert('id를 입력해주세요.');
            //     userId.focus();
            //     return;
            // }
            // if(userPwd.value.length == 0){
            //     alert('id를 입력해주세요.');
            //     userPwd.focus();
            //     return;
            // } if(checkUserPwd.value.length == 0){
            //     alert('id를 입력해주세요.');
            //     checkUserPwd.focus();
            //     return;
            // } if(userName.value.length == 0){
            //     alert('id를 입력해주세요.');
            //     userName.focus();
            //     return;
            // }

            const checkValidate = {
                userId : '아이디',
                userPwd : '비밀번호',
                checkUserPwd : '비밀번호 확인',
                userName : '이름'
            };
            for(let key in checkValidate){
                // 현재 반복에 진행하는 key 값에 해당하는 id를 가져온다
                const currentInput = document.querySelector("#"+key);

                if(currentInput.value.length == 0){
                alert(checkValidate[key]+'를 입력해주세요.');
                userId.focus();     // focus() 여기로 focus 된다.
                return;
            }
            }
            if(dupId){
                alert('사용할 수 없는 아이디입니다');
                userId.value="";
                userId.focus();
                return;
            }
            if(notEqPwd){
                alert('비밀번호가 일치하지 않습니다.');
                checkUserPwd.value = "";
                checkUserPwd.focus();
                return;
            }


            alert(userName.value + "님 회원가입이 성공적으로 완료되었습니다^^");

            // 회원가입을 성공하면 모든 값을 빈값으로 변경
            for(let key in checkValidate){
                const currentInput = document.querySelector("#"+key);
                currentInput.value = "";
        }
    }

        userId.onkeyup = function(){
            const idLabel = document.querySelector("#userId+label");
            idLabel.innerHTML = '사용가능한 아이디입니다.';
            idLabel.style.color = 'green';
            dupId = false;
            if(this.value == 'user01'){
                //이미 존재하는 아이디입니다.
                idLabel.innerHTML = '이미 존재하는 아이디입니다.';
                idLabel.style.color = 'red';
                dupId = true;
            }
            console.log(this.value);
        }


        // focus가 해제되면 실행
        checkUserPwd.onblur = () => {
            const pwdLabel = document.querySelector("#checkUserPwd+label");
            if(checkUserPwd.value == userPwd.value){
                //비밀번호가 일치한다.
                pwdLabel.innerHTML = "비밀번호가 일치합니다.";
                pwdLabel.style.color = 'green';
                notEqPwd = false;
            }else{
                //비밀번호가 불일치한다.
                pwdLabel.innerHTML = "비밀번호가 일치하지 않습니다.";
                pwdLabel.style.color = 'red';
                notEqPwd = true;
            }
        }
    </script>
</body>
</html>

 

저작자표시 비영리 변경금지

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등)  (0) 2023.11.13
[JavaScript] 10. window 객체  (0) 2023.11.13
[JavaScript] 9. 객체 ② (객체 배열, 생성자 함수, 날짜 함수)  (0) 2023.11.10
[JavaScript] 8. 객체 ① (객체의 선언, in과 with 키워드, 반복문, 메소드 속성, 추가 및 제거)  (0) 2023.11.10
[JavaScript] 7. 함수  (0) 2023.11.10
'Front-End/JavaScript' Related Articles more