IT/development

[JavaScript] validation

알 수 없는 사용자 2023. 6. 25. 17:07
반응형
<!-- Script -->
    <script layout:fragment="script" th:inline="javascript" type="text/javascript">
        //아이디 중복체크 여부
        let idCheckYn = false;

        $(document).ready(function () {

            //회원가입 처리
            $("#regUserBtn").on("click", function () {

                if (validation()) {
                    const params = {
                        userId: $("#userId").val(),
                        userPassword: $("#userPassword").val(),
                        userName: $("#userName").val(),
                        userEmail: $("#userEmail").val()
                    };

                    $.ajax({
                        type : "post",
                        url : "/user/api/reg",
                        dataType: "json",
                        data : JSON.stringify(params),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data){
                            console.log(data);
                            if(data.code === "1") {
                                alert("회원가입에 성공했습니다.");
                                location.href = "/user/login";
                            } else {
                                alert("회원가입에 실패했습니다.");
                                $("#registerFrm")[0].reset();
                                return false;
                            }
                        },
                        error:function(e){
                            console.log(e);
                            alert("회원가입에 실패했습니다.");
                            return false;
                        }
                    });
                }

            });

            //아이디 중복체크
            $("#idCheck").on("click", function () {

                if ($("#userId").val() === "" || $("#userId").val() === undefined || $("#userId").val() === " ") {
                    alert("아이디는 필수값입니다.");
                    $("#userId").focus();
                    return false;
                }

                $.ajax({
                    type : "post",
                    url : "/user/api/checkDuplicateId/" + $("#userId").val(),
                    success: function (data){
                        console.log(data);
                        if(data.code === "3") {
                            alert("중복되는 아이디입니다.");
                            $("#userId").val("").focus();
                            return false;
                        } else {
                            alert("가입 가능한 아이디입니다.");
                            $("#userName").focus();
                            idCheckYn = true;
                        }
                    },
                    error:function(e){
                        console.log(e);
                        alert("시스템 에러입니다.");
                        return false;
                    }
                });
            });


        });

        //유효성 검증
        function validation() {
            //유효성 검증 통과여부
            let validationPassYn  = false;

            if ($("#userId").val() === "" || $("#userId").val() === undefined || $("#userId").val() === " ") {
                alert("아이디를 입력해주세요.");
                $("#userId").focus();
                return false;
            }
            //아이디 체크 완료
            if (!idCheckYn) {
                alert("아이디 중복체크를 해주세요.");
                return false;
            }
            if ($("#userName").val() === "" || $("#userName").val() === undefined || $("#userName").val() === " ") {
                alert("이름을 입력해주세요.");
                $("#userName").focus();
                return false;
            }
            if ($("#userEmail").val() === "" || $("#userEmail").val() === undefined || $("#userEmail").val() === " ") {
                alert("이메일을 입력해주세요.");
                $("#userEmail").focus();
                return false;
            }
            if ($("#userPassword").val() === "" || $("#userPassword").val() === undefined || $("#userPassword").val() === " ") {
                alert("비밀번호를 입력해주세요.");
                $("#userPassword").focus();
                return false;
            }
            if ($("#userPasswordConfirm").val() === "" || $("#userPasswordConfirm").val() === undefined || $("#userPasswordConfirm").val() === " ") {
                alert("비밀번호 확인을 입력해주세요.");
                $("#userPasswordConfirm").focus();
                return false;
            }
            //비밀번호 일치여부
            let passwordPassYn = false;
            passwordPassYn = ($("#userPassword").val() === $("#userPasswordConfirm").val()) ? true : false;

            if (!passwordPassYn) {
                alert("비밀번호가 일치하지 않습니다.");
                $("#userPassword").val("").focus();
                return false;
            }

            return validationPassYn = true;
        }


    </script>
반응형