본문 바로가기
공부중

회원가입할때 유효성 검사 onsubmit 활용하기

by 식빵ee 2022. 8. 17.

회원가입에 성공한 나는 룰루랄라 유효성 검사를 위해 js를 작성하는데..

ajax 이용해 실시간 아이디 중복검사 구현하고 싶어서 룰루랄라 ajax도 작성했다.

let nickCheck = false;
let idCheck = false;


// 아이디 중복 체크
$('#member_id').keyup(function () {


    let member_id = $('#member_id').val();

    $.ajax({
        url: '/memberIdCheck',
        type: 'post',
        data: {member_id: member_id},
        success: function (cnt) {
            if (cnt != 1) {
                $('.idCheck').html('사용 가능한 아이디입니다.');
                idCheck = true;
            } else {
                $('.idCheck').html('이미 사용하고 있는 아이디입니다.');
                idCheck = false;
            }
        }
    });
});

// 닉네임 중복 체크
$('#member_nick').keyup(function () {

    let member_nick = $('#member_nick').val();


    $.ajax({
        url: '/memberNickCheck',
        type: 'post',
        data: {member_nick: member_nick},
        success: function (nickCnt) {
            if (nickCnt != 1) {
                $('.nickCheck').html('사용 가능한 닉네임입니다.');
                nickCheck = true;
            } else {
                $('.nickCheck').html('이미 사용하고 있는 닉네임입니다.');
                return false;
            }
        }
    });

})

그리고 가입하기 버튼을 클릭했을때 유효성검사하도록 코드를 짜고

// 회원가입 유효성 검사 
	$('#joinBtn').click(function(){
		
		var joinInsertForm = $('#joinInsertForm');
	
		var user_id = $('#user_id').val();
		var user_pw = $('#user_pw').val();
		var user_rePw = $('#user_rePw').val();
		var user_nick = $('#user_nick').val();
		var user_email = $('#user_email').val();
		
		var check_id = RegExp(/^[a-zA-Z0-9]{4,10}$/); // 아이디 유효성 검사 (영문 및 숫자 4-10글자)
		var check_pw = RegExp(/^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,20}$/);
		// var check_pw = RegExp(/^[a-zA-Z0-9]{4,20}$/); // 비밀번호 유효성 검사 (영문 및 숫자 4-20글자)
		var check_nick = RegExp(/^([a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]).{2,10}$/); // 닉네임 유효성 검사 (영문/한글/숫자 2-10글)
		var check_email = RegExp(/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i); // 이메일 유효성 검사
		
		// 닉네임 중복 체크 여부
		if(nick_check == false) {
			alert('닉네임 중복여부를 확인해주세요.');
			return false;
		}
		
		// 아이디 중복 체크 여부
		if(id_check == false) {
			alert('아이디 중복여부를 확인해주세요.');
			return false;
		}
		
		// 아이디 공백 확인 
		if(user_id == "" || user_id == null) {
			alert ('아이디를 입력해주세요.');
			$('#user_id').focus();
			return false;
		}
		
		// 아이디 유효성 체크 
		if (!check_id.test(user_id)) {
			alert('영문 및 숫자만 4-10자리까지 입력해주세요.');
			$('#user_id').val("");
			$('#user_id').focus();
			return false;
		}
		
		// 비밀번호 공백 확인 
		if (user_pw == "" || user_pw == null) {
			alert ('비밀번호를 입력해주세요.');
			$('#user_pw').focus();
			return false;
		}
		
		// 비밀번호 유효성 체크
		if (!check_pw.test(user_pw)) {
			alert ('영문 및 숫자, 특수문자를 포함한 비밀번호를 입력해주세요.');
			$('#user_pw').val("");
			$('#user_pw').focus();
			return false;
		}
		
		// 비밀번호 일치성 체크 
		if (user_pw != user_rePw) {
			alert('비밀번호가 일치하지 않습니다. 다시 입력해주세요.');
			$('#user_pw').val("");
			$('#user_rePw').val("");
			$('#user_pw').focus();
			return false;
		}
		
		// 닉네임 공백 체크 
		if (user_nick == "" || user_nick == null) {
			alert('닉네임을 입력해주세요.');
			$('#user_nick').focus();
			return false;
		}
		
		// 닉네임 유효성 체크 
		if (!check_nick.test(user_nick)) {
			alert('닉네임은 영문과 한글, 숫자로 생성 가능합니다.');
			$('#user_nick').val("");
			$('#user_nick').focus();
			return false;
		}
		
		// 이메일 공백 체크 
		if (user_email == "" || user_email == null) {
			alert('이메일 주소를 입력해주세요.');
			$('#user_email').focus();
			return false;
		}
		
		// 이메일 유효성 체크 	
		if (!check_email.test(user_email)) {
			alert('정확한 이메일을 입력해주세요.');
			$('#user_email').val("");
			$('#user_email').focus();
			return false;
		}
		
		joinInsertForm.submit();
		
	})

당차게 가입버튼을 눌러 submit을 눌렀는데

아이디가 중복되면 return false가 되어 form 이 안넘어갈거라는 생각과 달리 form이 그대로 제출되어 버렸다 

이때 form에 submit을 제어할 수 있는 onsubmit을 주로 쓰는게 좋다고 알려줌

<form action="member_insert" method="POST" id="memberInsertFrom" autocomplete="off" onsubmit="return mySubmit()">

onsubmit의 return의 역할은 form을 전송하기전에 함수를 실행되는데

함수가 true를 반환하면 form이 전송되고 false를 반환하면 form이 전송되지 않는다. 

 

그래서 유효성검사를 함수로 따로 만들어 주어 코드수정해줌..

 

최종 js

let nickCheck = false;
let idCheck = false;


// 아이디 중복 체크
$('#member_id').keyup(function () {


    let member_id = $('#member_id').val();

    $.ajax({
        url: '/memberIdCheck',
        type: 'post',
        data: {member_id: member_id},
        success: function (cnt) {
            if (cnt != 1) {
                $('.idCheck').html('사용 가능한 아이디입니다.');
                idCheck = true;
            } else {
                $('.idCheck').html('이미 사용하고 있는 아이디입니다.');
                idCheck = false;
            }
        }
    });
});

// 닉네임 중복 체크
$('#member_nick').keyup(function () {

    let member_nick = $('#member_nick').val();


    $.ajax({
        url: '/memberNickCheck',
        type: 'post',
        data: {member_nick: member_nick},
        success: function (nickCnt) {
            if (nickCnt != 1) {
                $('.nickCheck').html('사용 가능한 닉네임입니다.');
                nickCheck = true;
            } else {
                $('.nickCheck').html('이미 사용하고 있는 닉네임입니다.');
                return false;
            }
        }
    });

})


// 회원가입 유효성 검사

function mySubmit() {


    let member_id = $('#member_id').val();
    let member_pw = $('#member_pw').val();
    let member_nick = $('#member_nick').val();

    let check_id = RegExp(/^[a-zA-Z0-9]{4,10}$/); // 아이디 유효성 검사 (영문 및 숫자 4-10글자)
    let check_pw = RegExp(/^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,20}$/); // 비밀번호 유효성 검사 (영문 및 숫자 4-20글자)
    let check_nick = RegExp(/^([a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]).{2,10}$/); // 닉네임 유효성 검사 (영문/한글/숫자 2-10글)
    //let memberInsertForm = $('#memberInsertForm');



    // 닉네임 중복 체크 여부
    if (nickCheck == false) {
        return false;
    }

    // 아이디 중복 체크 여부
    if (idCheck == false) {
        return false;
    }

    // 아이디 공백 확인
    if (member_id == "" || member_id == null) {
        $('.idCheck').html('아이디를 입력해주세요.');
        $('#member_id').focus();
        return false;
    }

    // 아이디 유효성 체크
    if (!check_id.test(member_id)) {
        $('.idCheck').html('영문 및 숫자만 4-10자리까지 입력해주세요.');
        $('#member_id').val("");
        $('#member_id').focus();
        return false;
    }

    // 비밀번호 공백 확인
    if (member_pw == "" || member_pw == null) {
        $('.pwCheck').html('비밀번호를 입력해주세요.');
        $('#member_pw').focus();
        return false;
    }

    // 비밀번호 유효성 체크
    if (!check_pw.test(member_pw)) {
        $('.pwCheck').html('영문 및 숫자, 특수문자를 포함한 비밀번호를 입력해주세요.');
        $('#member_pw').val("");
        $('#member_pw').focus();
        return false;
    }

    // 닉네임 공백 체크
    if (member_nick == "" || member_nick == null) {
        $('.nickCheck').html('닉네임을 입력해주세요.');
        $('#member_nick').focus();
        return false;
    }

    // 닉네임 유효성 체크
    if (!check_nick.test(member_nick)) {
        $('.nickCheck').html('닉네임은 영문과 한글, 숫자로 생성 가능합니다.');
        $('#member_nick').val("");
        $('#member_nick').focus();
        return false;
    }

    //memberInsertForm.submit();


}

이건 html 코드 

<div class="centerForm">
        <form action="member_insert" method="POST" id="memberInsertFrom" autocomplete="off" onsubmit="return mySubmit()">
            <h1 class="marginBot">회원가입</h1>
            <!-- 아이디 -->
            <div class="form-group">
                <label for="member_id" class="fontDesign">아이디</label>
                <div class="">
                    <input type="text" class="inputDesign" id="member_id" name="member_id" placeholder="ID">
                    <div class="marginBot idCheck">아이디를 입력해줘</div>

                </div>
            </div>
            <!-- 비밀번호 -->
            <div class="form-group">
                <label for="member_pw" class="fontDesign">비밀번호</label>
                <div class="">
                    <input type="password" class="inputDesign" id="member_pw" name="member_pw"
                        placeholder="Password">
                    <div class="marginBot pwCheck"></div>
                </div>
            </div>
            <!-- 닉네임 -->
            <div class="form-group">
                <label for="member_nick" class="fontDesign">닉네임</label>
                <div class="">
                    <input type="text" class="inputDesign" id="member_nick" name="member_nick">
                    <div class="marginBot nickCheck">닉네임을 입력해줘</div>
                </div>
            </div>
            <!-- 각오 -->
            <div class="form-group">
                <label for="member_comment" class="fontDesign">각오</label>
                <div class="">
                    <input type="text" class="inputDesign marginBot" id="member_comment" name="member_comment"
                        placeholder="각오 한 마디를 적어주세요!">
                </div>
            </div>
            <!-- 가입하기 버튼 -->
            <div class="form-group">
                <div>
                    <input type="submit" class="Btn bg-yel" id="joinBtn" value="Join us">
                </div>
            </div>
        </form>


    </div>

 

오늘의 교훈 onsubmit을 활용하자...

저작자표시 (새창열림)

'공부중' 카테고리의 다른 글

BCryptPasswordEncoder 에러 수난기...  (0) 2022.08.16

관련글

댓글

post image post image post image post image post image post image post image post image

티스토리툴바