회원가입 페이지 연습

// HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
<link rel="stylesheet" href="./style.css">
<script src="./jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</head>
<body>
<div class="container" id="joinTable">
    <div class="input-form-backgroud row">
    <div class="input-form col mx-auto">
        <h1 class="text-center" id="signUp">Sign up Page</h1>

        <form class="validation-form" novalidate>

            <div class="row align-items-center mb-3">
                <div class="col-md-6 w-100">
                    <div class="fw-bold form-floating">ID</div>
                    <input type="text" class="form-control" id="inputId" placeholder="아이디를 입력하세요">
                </div>
                <div>
                    <font id="idChkNotice" size="2"></font>
                </div>
            </div>

            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <label class="fw-bold" for="password">Password</label>
                    <input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="pwcheckMain" size="18px" required>
                </div>
                <div class="col-md-6">
                    <label class="fw-bold" for="password">Password</label>
                    <input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="pwcheckSub" size="18px" required>
                </div>
                <div class="col-md-6">
                    <font id="chkNotice" size="2"></font>
                </div>
            </div>

            <div class="row align-items-center">
                <div class="col-md-6 mb-3 w-100">
                    <label class="fw-bold" for="name">Name</label>
                    <input type="text" class="form-control" placeholder="이름을 입력하세요" id="personName" required>
                </div>
            </div>

            <div class="row align-items-center mb-3">
                <div class="col-md-6 w-100">
                    <label class="fw-bold form-floating" for="email">E-mail</label>
                    <input type="email" class="form-control" placeholder="이메일 주소를 입력하세요" id="personEmail" required>
                </div>
                <div class="col-md-6">
                    <font id="emailChkNotice" size="2"></font>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="form-row align-items-center">
                    <div class="col-auto">
                        <label class="fw-bold" for="phone">Phone</label>
                    </div>
                    <div class="col-auto">
                        <div class="input-group d-flex justify-content-center">
                            <select id="choiceNum" class="form-select">
                                <option value="선택">선택</option>
                                <option value="02">02</option>
                                <option value="031">031</option>
                                <option value="010">010</option>
                            </select>
                            <div class="input-group-prepend">
                                <span class="px-1 input-group-text">-</span>
                            </div>
                            <input type="number" class="form-control" id="numSub1" oninput="maxLengthCheck(this)" placeholder="1234" maxlength="4">
                            <div class="input-group-prepend">
                                <span class="px-1 input-group-text">-</span>
                            </div>
                            <input type="number" class="form-control" id="numSub2" oninput="maxLengthCheck(this)" placeholder="5678" maxlength="4">
                        </div>
                    </div>
                </div>
            </div>

                <div class="row align-items-center">
                    <div class="col-md-6 mb-3 w-100">
                        <label class="fw-bold" for="name">Adress</label>
                        <input type="text" class="form-control mb-3" placeholder="주소를 입력해주세요" id="adr1" required>
                        <input type="text" class="form-control" placeholder="상세 주소를 입력해주세요" id="adr2" required>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-6 mb-4 w-100">
                        <label class="fw-bold" for="fileInput">Upload</label>
                        <input type="file" class="form-control" id="fileInput" accept="image/*" required>
                    </div>
                </div>

                <div class="row align-items-center mb-4">
                    <div class="fw-bold">Interests</div>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input checkbox" type="checkbox" id="inlineCheckbox1" value="캠핑">
                            <label class="form-check-label" for="inlineCheckbox1">캠핑</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input checkbox" type="checkbox" id="inlineCheckbox2" value="요리/베이킹">
                            <label class="form-check-label" for="inlineCheckbox2">요리/베이킹</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input checkbox" type="checkbox" id="inlineCheckbox3" value="PC/모바일게임">
                            <label class="form-check-label" for="inlineCheckbox3">PC/모바일게임</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input checkbox" type="checkbox" id="inlineCheckbox4" value="등산">
                            <label class="form-check-label" for="inlineCheckbox4">등산</label>
                        </div>
                    </div>
                </div>

                <div class="row align-items-center mb-3">
                    <div class="fw-bold">Gender</div>
                    <div class="col">
                        <div class="form-check  form-check-inline">
                            <input class="form-check-input gender" type="radio" id="exampleRadios1" value="남자" checked>
                            <label class="form-check-label" for="exampleRadios1">남자</label>
                        </div>
                        <div class="form-check  form-check-inline">
                            <input class="form-check-input gender" type="radio" id="exampleRadios2" value="여자">
                            <label class="form-check-label" for="exampleRadios2">여자</label>
                        </div>
                    </div>
                </div>

                <div class="row align-items-center mb-4">
                    <div class="col-md-6 w-100">
                        <div class="fw-bold form-floating">Message</div>
                        <textarea class="form-control" id="textMessage" placeholder="전달 사항을 입력해주세요" rows=2 onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="d-grid gap-2 col-6 mx-auto">
                        <button class="btn btn-secondary btn-lg" id="sendJoin" type="button">CREATE ACCOUNT</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<div id="welcomeTable">
    <div class="input-form-backgroud row">
    <div class="input-form col mx-auto">
        <h1 class="text-center" id="welcomeTitle">Welcome to here!</h1>

        <form class="validation-form" novalidate>

            <div class="row align-items-center mb-3">
                <div class="col-md-6 w-100">
                    <div class="fw-bold form-floating">ID</div>
                    <input type="text" class="form-control" id="welcomeId" disabled>
                </div>
            </div>

            <div class="row align-items-center mb-3">
                <div class="col-md-6 w-100">
                    <label class="fw-bold" for="password">Password</label>
                    <input type="text" class="form-control" id="welcomePw" disabled>
                </div>
            </div>

            <div class="row align-items-center">
                <div class="col-md-6 mb-3 w-100">
                    <label class="fw-bold" for="name">Name</label>
                    <input type="text" class="form-control" id="welcomeName" disabled>
                </div>
            </div>

            <div class="row align-items-center mb-3">
                <div class="col-md-6 w-100">
                    <label class="fw-bold form-floating" for="email">E-mail</label>
                    <input type="email" class="form-control" id="welcomeEmail" disabled>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="form-row align-items-center">
                    <div class="col-auto">
                        <label class="fw-bold" for="phone">Phone</label>
                    </div>
                    <div class="col-auto">
                        <div class="input-group d-flex justify-content-center">
                        <input type="te" class="form-control" id="welcomePhone" disabled>
                    </div>
                </div>
            </div>

                <div class="row align-items-center mb-3">
                    <div class="col-md-6 mb-3 w-100">
                        <label class="fw-bold" for="name">Adress</label>
                        <input type="text" class="form-control mb-3" id="welcomeAdr" disabled>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-6 mb-4 w-100">
                        <label class="fw-bold" for="fileInput">Upload</label>
                        <div class="form-control" id="welcomeImg"></div>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="col-md-6 mb-4 w-100">
                        <label class="fw-bold">Interests</label>
                        <input class="form-control" id="welcomeCheckbox" disabled>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="col-md-6 mb-4 w-100">
                        <label class="fw-bold">Gender</label>
                        <input class="form-control" id="welcomeRadio" disabled>
                    </div>
                </div>

                <div class="row align-items-center">
                    <div class="col-md-6 mb-4 w-100">
                        <label class="fw-bold">Message</label>
                        <input class="form-control" id="welcomeMessage" disabled>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="first.js"></script>
<script src="second.js"></script>
</body>
</html>

// CSS

/* body {
  min-height: 100vh;

  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#92b5db),
    to(#1d466c)
  );
  background: -webkit-linear-gradient(bottom left, #ffc9ff 0%, #611b5a 100%);
  background: -moz-linear-gradient(bottom left, #ffc9ff 0%, #611b5a 100%);
  background: -o-linear-gradient(bottom left, #ffc9ff 0%, #611b5a 100%);
  background: linear-gradient(to top right, #ffc9ff 0%, #611b5a 100%);
} */

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("https://images.unsplash.com/uploads/1413259835094dcdeb9d3/6e609595?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.input-form {
  max-width: 550px;

  margin-top: 80px;
  margin-bottom: 80px;
  padding: 32px;

  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}

#idCheck {
  width: 100px;
}

.input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 입력 필드 높이와 동일하게 */
  background-color: transparent; /* 배경 투명 */
  border: none; /* 테두리 제거 */
  padding: 0; /* 패딩 제거 */
}

textarea {
  resize: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type="number"] {
  -moz-appearance: textfield;
}

#signUp {
  color: rgb(0, 0, 0);
  text-shadow: 3px 3px rgb(146, 146, 146);
}

#welcomeTitle {
  color: rgb(255, 230, 0);
  text-shadow: 3px 3px rgb(156, 143, 0);
}

// JS

$('#joinTable').show();
$('#welcomeTable').hide();

//id 입력 시 실행되는 함수
$(function () {
    $('#inputId').keyup(function () {
        $('idChkNotice').html('');
    });

    $('#inputId').keyup(function checkId() {
        const idValue = $('#inputId').val();
        const pattern = new RegExp("^(?=.*[a-z])(?=.*[0-9])[a-z0-9]{4,}$");

        if (idValue === '') {
            $('#idChkNotice').html('');
            idChecked = 'n';
            return false;
        }
        else if (idValue === '' || !pattern.test(idValue)) {
            $('#idChkNotice').html('아이디는 영소문자 + 숫자를 조합하여 4글자 이상 입력해주세요');
            $('#idChkNotice').attr('color', '#f82a2aa3');
            idChecked = 'n';
            return false;
        }
        else {
            $('#idChkNotice').html('사용 가능한 아이디 입니다.');
            $('#idChkNotice').attr('color', '#199894b3');
            idChecked = 'y';
            return true;
        }
    });
});



// 비밀번호 입력 시 실행되는 함수
$(function () {
    $('#pwcheckMain').keyup(function () {
        $('#chkNotice').html('');
    });

    $('#pwcheckSub').keyup(function () {
        // 비밀번호 정규식
        // let passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{4}$/;

        // if (!passwordRegex.test($('#pwcheckMain').val())) {
        //     $('#chkNotice').html('대소문자 및 숫자를 조합하여 4글자 이상 입력해주세요');
        //     $('#chkNotice').attr('color', '#f82a2aa3');
        // } else 

        if ($('#pwcheckMain').val() !== $('#pwcheckSub').val()) {
            $('#chkNotice').html('비밀번호 일치하지 않음');
            $('#chkNotice').attr('color', '#f82a2aa3');
        } else {
            $('#chkNotice').html('비밀번호 일치함');
            $('#chkNotice').attr('color', '#199894b3');
        }
    });
});


// 이름 6글자로 제한 함수
$('#personName').keyup(function (e) {
    let personName = $(this).val();

    if (personName.length > 6) {
        $(this).val($(this).val().substring(0, 6));
        alert('이름이 7글자 이상 일 경우 관리자에게 문의해주세요')
    }
})

// 이메일 정규식 함수
$(function () {
    $('#personEmail').on('input', function () {
        let email = $(this).val();

        // 한글 및 공백 제거
        email = email.replace(/[^a-zA-Z0-9@.]/g, '');

        // 필터링된 값을 다시 입력 필드에 설정
        $(this).val(email);

        // 이메일 유효성 검사
        const emailReguler = new RegExp("^[a-zA-Z0-9]+@[a-zA-Z0-9]+\\.[a-zA-Z]{2,}$");

        if (email === '') {
            $('#emailChkNotice').html('');
            $('#emailChkNotice').css('color', 'black');
            return;
        }

        if (!emailReguler.test(email)) {
            $('#emailChkNotice').html('이메일 주소가 유효하지 않습니다.');
            $('#emailChkNotice').css('color', '#f82a2a');
        } else {
            $('#emailChkNotice').html('사용 가능한 이메일입니다.');
            $('#emailChkNotice').css('color', '#199894');
        }
    });
});


// 전화번호 중간, 끝 숫자만 4자리로 제한 두기
$(function () {
    $('#numSub1, #numSub2').on('input', function () {
        let value = $(this).val();

        // 숫자가 아닌 문자를 제거
        value = value.replace(/[^0-9]/g, '');

        // 길이를 4글자로 제한
        if (value.length > 4) {
            value = value.substring(0, 4); //0번째에서 시작해서 4번째 인덱스 전까지의 문자열만 남긴다는 뜻.
        }
        // 수정된 값을 입력 필드에 다시 설정
        $(this).val(value);
    });
});

// 파일 업로드 시 미리보기 이미지 생성
$('#fileInput').on('change', function (event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function (e) {
            $('#welcomeImg').html(`<img src="${e.target.result}" alt="미리보기 이미지" style="max-width: 100%; height: auto;">`);
        };
        reader.readAsDataURL(file);
    } else {
        $('#welcomeImg').html("유효한 이미지 파일을 선택해주세요.");
    }
});



// 라디오 버튼 해제 기본값으로 설정
$(function () {
    // 모든 라디오 버튼을 선택 해제
    $('input[type="radio"]').prop('checked', false);
});


//Message 창 크기 자동 조절
function resize(obj) {
    obj.style.height = '1px';
    obj.style.height = (12 + obj.scrollHeight) + 'px';
}


// 계정 생성 버튼 클릭 시
$('#sendJoin').on('click', function () {
    event.preventDefault()
    updateData();
});

function updateData() {
    const idValid = $('#inputId').val();
    const pwMain = $('#pwcheckMain').val();
    const choiceNum = $('#choiceNum').val();
    const numSub1 = $('#numSub1').val();
    const numSub2 = $('#numSub2').val();
    const pwSub = $('#pwcheckSub').val();
    const personName = $('#personName').val();
    const adrFirst = $('#adr1').val();
    const adrSecond = $('#adr2').val();
    const personEmail = $('#personEmail').val();
    const note = $('#textMessage').val();
    const checkHobbyBox = $('.checkbox:checked').length;
    const selctedGender = $('.gender:checked').length;
    const file = $('#fileInput').get(0).files[0];

    // 체크박스를 배열로 가져오기
    const selectedCheckboxes = $('.checkbox:checked').map(function () {
        return $(this).val();
    }).get(); // 배열로 변환

    // 라디오 버튼 값 가져오기
    const selectedRadio = $('.gender:checked').val();

    if (idValid === '') {
        alert('아이디를 입력해주세요.');
        $('#inputId').focus();
        return false;
    } else if (pwMain === '' | pwSub === '') {
        alert('비밀번호를 입력해주세요.');
        $('#pwcheckMain').focus();
        return false;
    } else if (personName === '') {
        alert('이름을 확인해주세요.');
        $('#personName').focus();
        return false;
    } else if (choiceNum === '선택' || numSub1 === '' || numSub2 === '') {
        alert('전화번호를 확인해주세요.');
        return false;
    } else if (adrFirst === '') {
        alert('주소를 입력해주세요');
        $('#adrFirst').focus();
        return false;
    } else if (adrSecond === '') {
        alert('세부 주소를 입력해주세요');
        $('#adrSecond').focus();
        return false;
    } else if (personEmail === '') {
        alert('이메일을 입력해주세요');
        $('#personEmail').focus();
        return false;
    } else if (!file) {
        alert('사진을 업로드해주세요')
        return false;
    } else if (checkHobbyBox === 0) {
        alert('취미를 선택해주세요')
        return false;
    } else if (selctedGender === 0) {
        alert('성별을 선택해주세요.');
        return false;
    }
    else {
        alert('회원가입을 완료했습니다.')
        console.log("아이디 : ", idValid);
        console.log("비밀번호 : ", pwMain);
        console.log("이름 : ", personName);
        console.log("전화번호 : ", choiceNum + '-' + numSub1 + '-' + numSub2);
        console.log("주소 : ", adrFirst);
        console.log("세부주소 : ", adrSecond);
        console.log("이메일 : ", personEmail);
        console.log("글쓰기 : ", note);
        console.log("선택된 체크박스 : ", selectedCheckboxes.join(', '));
        console.log("선택된 라디오 버튼 : ", selectedRadio);

        init(idValid, pwMain, personName, choiceNum, numSub1, numSub2, adrFirst, adrSecond, personEmail, selectedCheckboxes, selectedRadio, note);
    }
    $('#return').on("click", function () {
        init('', '', '', '', '', '', '', '');
    });
}

// 다른 페이지에서 정보 표출
function init(_id, _pwM, _name, _choiceNum, _numSub1, _numSub2, _adrF, _adrS, _email, _selectedCheckboxes, _selectedRadio, _note) {
    $('#inputId').val(_id);
    $('#pwcheckMain').val(_pwM);
    $('#personName').val(_name);
    $('#choiceNum').val(_choiceNum);
    $('#numSub1').val(_numSub1);
    $('#numSub2').val(_numSub2);
    $('#adr1').val(_adrF);
    $('#adr2').val(_adrS);
    $('#personEmail').val(_email);
    $('#note').val(_note);

    $('#welcomeId').val(_id);
    $('#welcomePw').val(_pwM);
    $('#welcomeName').val(_name);
    $('#welcomePhone').val(_choiceNum + '-' + _numSub1 + '-' + _numSub2);
    $('#welcomeAdr').val(_adrF + ' ' + _adrS);
    $('#welcomeEmail').val(_email);
    $('#welcomeMessage').val(_note);

    if (!Array.isArray(_selectedCheckboxes)) {
        _selectedCheckboxes = _selectedCheckboxes ? [_selectedCheckboxes] : [];
    }

    $('#welcomeCheckbox').val(_selectedCheckboxes.join(', '));
    $('#welcomeRadio').val(_selectedRadio);

    if (_id === '' && _pwM === '' && _name === '' && _choiceNum === '선택' && _numSub1 === '' && _numSub2 === '' && _adrF === '' && _adrS === '' && _email === '' && _note === '') {
        $('#joinTable').show();
        $('#welcomeTable').hide();
    } else {
        $('#joinTable').hide();
        $('#welcomeTable').show();
    }

}

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

'취미 공부 > Practice' 카테고리의 다른 글

부트스트랩 연습 (0)	2024.09.24
(진행 중)_스노우_팀장님 프로젝트_FE (0)	2024.06.14
7주차 스노우 DAY01 팀장님 문제 - 20240617 완성 (1)	2024.06.10
jQuery 연습 -20240612 완성. (1)	2024.06.10
1주차 - Day04 [당근마켓 채팅방 클론 코딩] (3)	2024.05.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

혼자만의 시간은 좋지만, 혼자는 싫다냐옹 (건들지 말라옹)

회원가입 페이지 연습

'취미 공부 > Practice' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

회원가입 페이지 연습

'취미 공부 > Practice' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역