JQuery

대분류

JQuery

날짜

2024/07/08

JQuery 로 회원가입 폼 작성하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#join').submit(function (event) {
                event.preventDefault();
                var status = true;

                var formData = {
                    user_id: $("input[name='user_id']").val(),
                    user_pw: $("input[name='user_pw']").val(),
                    user_jumin_num: $("input[name='user_jumin_num']").val(),
                    gender: $("input[name='gender']:checked").val(),
                    user_email: $("input[name='user_email']").val(),
                    user_url: $("input[name='user_url']").val(),
                    job: $("select option:selected").val(),
                    user_tel: $("input[name='user_tel']").val()
                };

                console.log(formData);

                // 유효성 체크
                if (formData.user_id === "") {
                    alert("유저 아이디를 입력해주세요!");
                    status = false;
                }

                if (formData.user_pw === "") {
                    alert("유저 비밀번호를 입력해주세요!");
                    status = false;
                }

                if (formData.user_jumin_num === "") {
                    alert("유저 주민번호를 입력해주세요!");
                    status = false;
                }

                if (formData.gender === undefined) {
                    alert("유저 성별을 선택해주세요!");
                    status = false;
                }

                if (formData.user_email === "") {
                    alert("유저 이메일을 입력해주세요!");
                    status = false;
                }

                if (formData.user_url === "") {
                    alert("유저 url 을 입력해주세요!");
                    status = false;
                }

                if (formData.user_tel === "") {
                    alert("유저 전화번호를 입력해주세요!");
                    status = false;
                }

                if (status) {
                    alert("회원 가입이 완료되었습니다." + formData.user_email);
                    // $(location).attr('href', 'https://www.naver.com');
                }
            })
        });
    </script>
    <style>
        @import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

        body {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 16px;
        }

        form {
            width: 600px;
            display: flex;
            flex-direction: column;
            padding: 80px 60px 40px 60px;
            border: solid 1px lightslategray;
            border-radius: 20px;
            margin: 50px;
        }

        button {
            margin: 30px 0 30px 0;
        }

        input, select {
            margin-bottom: 20px;
        }

        label {
            margin-bottom: 5px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <form name="form1" id="join">
        <div class="mb-3" id="input">
            <label>아이디</label>
            <input type="text" class="form-control form-control-sm" type="text" name="user_id" placeholder="아이디를 입력해주세요." />

            <label>비밀번호</label>
            <input type="password" class="form-control form-control-sm" name="user_pw" placeholder="비밀번호를 입력해주세요."/>

            <label>주민번호</label>
            <input type="text"  id="inputPassword6" class="form-control form-control-sm" name="user_jumin_num" placeholder="주민번호를 입력해주세요."/>

            <label style="margin-right: 20px">성별</label>
            <label label class="form-label" for="man" style="font-weight: 400; margin-right: 10px">
                <input class="form-check-input" type="radio" name="gender" value="남자"/>
                남자
            </label>
            <label label class="form-label" for="women" style="font-weight: 400">
                <input class="form-check-input" type="radio" name="gender" value="여자"/>
                여자
            </label>

            <br>

            <label>이메일</label>
            <input type="email" class="form-control form-control-sm" name="user_email" placeholder="이메일을 입력해주세요."/>

            <label>URL</label>
            <input type="url" class="form-control form-control-sm" name="user_url" placeholder="url 을 입력해주세요."/>

            <label>직업</label>
            <select class="form-select form-select-sm" >
                <option selected>직업을 선택해주세요</option>
                <option value="1">디자이너</option>
                <option value="2">PM</option>
                <option value="4">backend</option>
                <option value="5">frontend</option>
            </select>

            <label>전화번호</label>
            <input type="tel" class="form-control form-control-sm" name="user_tel" placeholder="전화번호를 입력해주세요."/>
        </div>
        <div>
            <button type="submit" class="btn btn-primary">회원가입 하기</button>
            <button type="reset" class="btn btn-secondary" style="margin-left: 15px">다시 작성 하기</button>
        </div>
    </form>
</body>
</html>
HTML
복사