회원가입

imjingu·2023년 8월 6일
개발공부

목록 보기
309/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <h1>회원가입</h1>
        <form action="#" id="register">
            <ul id="user-info">
                <li>
                    <label for="user-id" class="field">아이디</label>
                    <input type="text" name="user-id" id="user-id" placeholder="4~15자리의 영문과 숫자로 입력" required>
                </li>
                <li>
                    <label for="email" class="field">이메일</label>
                    <input type="email" name="email" id="email" required>
                </li>
                <li>
                    <label for="user-pw1" class="field">비밀번호</label>
                    <input type="password" name="user-pw1" id="user-pw1" placeholder="8자리 이상" required>
                </li>
                <li>
                    <label for="user-pw2" class="field">비밀번호 확인</label>
                    <input type="password" name="user-pw2" id="user-pw2" required>
                </li>
                <li>
                    <label class="field">메일링 수신</label>
                    <label class="r"><input type="radio" value="yes" name="mailing">예</label>
                    <label class="r"><input type="radio" value="no" name="mailing">아니오</label>
                </li>
            </ul>
            <ul id="buttons">
                <li>
                    <input type="button" class="btn btnBlack" value="가입하기">
                </li>
                <li>
                    <input type="reset" class="btn btnGray" value="취소">
                </li>
            </ul>
        </form>
    </div>
    <script>
        /*
        회원 가입 페이지 입력 값 검증하기
        1. 아이디 글자 수 확인하기
        */
        document.addEventListener('DOMContentLoaded', function() {
            const frmRegister = document.getElementById('register'); // 폼태그
            const userId = document.getElementById('user-id'); // 아이디 필드
            const btnSubmit = document.querySelector('input[type=button]');
            btnSubmit.addEventListener('click', function () {
                console.log(userId.value.length); // 입력된 데이터의 길의값 출력
                if (userId.value.length < 4 || userId.value.length > 15) {
                    alert('4~15자리의 영문과 숫자를 사용하세요.'); // 오류 메시지 출력
                    userId.select();
                }
                frmRegister.submit();
            });

            // 비밀번호 경고창은 가입하기 눌렀을때 발생해도 되고 칸을 벗어날때 발생해도 됨
            // select() 사용자가 기존에 입력한 값을 선택
            // focus() 사용자가 기존에 입력한 값이 지워진 자리에 새로운 값을 입력하도록 텍스트 필드에 커서를 가젿 놓음

            // pw1 요소에 change 이벤트가 발생했을 때
            const pw1 = document.querySelector('#user-pw1'); // 비밀번호 필드를 가져와 변수에 저장
            
            pw1.addEventListener('change', function() {
                if(pw1.value.length < 8) {
                    alert('비밀번호는 8자리 이상이여야 합니다.'); // 오류메시지 표시
                    pw1.value = ''; // 비밀번호 필드 지움
                    pw1.focus(); // 비밀번호를 다시 업력할 수 있도록 포커싱
                }
            });
            const pw2 = document.querySelector('#user-pw2'); // 비밀번호 확인 필드를 가져와 변수에 저장
            //pw2 요소에 change 이벤트가 발생했을때 실행
            pw2.addEventListener('change', function() {
                if(pw1.value !== pw2.value) {
                    alert('암호가 다릅니다. 다시 입력하세요');
                    pw2.value = ''; // 비밀번호 필드 지움
                    pw2.focus(); // 비밀번호를 다시 업력할 수 있도록 포커싱

                    pw1.setAttribute('type', 'text'); // 속성을 text로 변경하여 비밀번호를 표시함
                }
            })
        });
    </script>
</body>
</html>
imjingu
이전 포스트
드롭다운 목록 활용하기

다음 포스트
회원가입

개발공부

드롭다운 목록 활용하기

form태그관련 체크박스 활용하기

0개의 댓글
