05_회원가입

회원가입,,,,핸드폰API 사용하고, 그냥 뭐 이것저것 좀 정규식으로 검사해주면 되겠지~ 했었는데...

생각보다 신경 쓸 부분이 많았ㄷ,,ㅏ,,,,ಠ_ಠ,,,,

휴대폰인증 API는 네이버 SENS API 를 사용했다.

 

- 올바른 ID 형식으로 입력했는지

let format = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

- ID 중복확인 (회원탈퇴 후 1년이 지나지 않은 ID라면 사용 불가)

- 비밀번호를 비밀번호 형식에 맞게 입력했는지

  (8~16자, 영어/숫자/특수문자 하나 이상 포함)(8~16자, 영어/숫자/특수문자 하나 이상 포함)

let format = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^+\-=])(?=\S+$).*$/

<input type="password" name="pwCheck" id="pwCheck" placeholder="비밀번호 입력" required="required"
maxlength="16"/>

- 비밀번호와 비밀번호확인 칸에 입력한 내용이 동일한지

- 올바른 이름 형식으로 입력했는지 (특수문자, 완성형 아닌 한글, 길이 체크)

// 이름 형식 체크
//--특수문자 정규식 변수(공백 미포함)
var replaceChar = /[~!@\#$%^&*\()\-=+_'\;<>0-9\/.\`:\"\\,\[\]?|{}]/gi;
//--완성형 아닌 한글 정규식
var replaceNotFullKorean = /[ㄱ-ㅎㅏ-ㅣ]/gi;
let name = $("#name").val();
if (name.length > 0)
{
    if (name.match(replaceChar) || name.match(replaceNotFullKorean) || name.length < 2) 
    {
        $("#nameErrMsg").css("display", "block");
        return false;
    }
}

- 올바른 휴대폰 번호 형식으로 입력했는지 (자릿수 확인, 숫자만 입력가능하게)

<input type="tel" name="tel" id="tel" placeholder="예) 01012345678" required="required"
oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '&1');"
maxlength="11"/>

- 휴대폰 인증 진행했는지 (이미 DB에 있는 번호라면 사용 불가)

- 인증번호가 일치 여부

- 올바른 닉네임 형식으로 입력했는지

- 닉네임 중복확인

- 필수 약관에 모두 동의했는지

 

- 약관 <전체 동의> 체크박스 클릭하면 전체 선택 및 해제 가능하게

- 아이디/이름/닉네임에 공백 입력했으면 제거

- 필수 항목 모두 입력했는지 확인

- 중복확인/인증 후, 내용 변경되었다면 다시 중복확인/인증 진행해야 함

└→ 이 부분을 어떻게 해야하나 고민고민했는데, 

 

중복확인/인증 관련 변수를 만들었다.

var idCheck = 0;
var telCheck = 0;
var nicknameCheck = 0;

변수를 사용해서 중복확인/인증을 성공했을 경우만 변수 값을 증가시킨다.

중복확인/인증 버튼을 눌렀어도, 이미 존재하는 id/nickname/tel 이거나 다른 이유로 중복확인/인증이 진행되지 않은 경우에는 변수 값이 증가하지 않는다. (닉네임, 휴대폰번호도 유사한 맥락으로 진행)

// 아이디 <중복확인>
$("#idOverlapBtn").click(function()
{
    idCheck = 0;
    let id = $("#id").val().replaceAll(" ", "");
    $("#id").val(id);

    $("#idErrMsg").css("color", "red");
    $("#idErrMsg").css("display", "none");

    // 이메일 형식인지 확인
    if (!isEmailFormat($("#id").val()))
    {
        $("#idErrMsg").html("이메일 형식이 아닙니다.")
        $("#idErrMsg").css("display", "block");
        $("#id").focus();
    }
    else
    {
        $.ajax({
            type: "POST"
            //, url: "<%=cp%>/idcheck.lion"
            , url: "idcheck.lion"
            , data: { id : $("#id").val() }
            , dataType: "json"
            , success: function(result)
            {
                // 중복확인	
                // 회원정보테이블 중복확인
                if (result.checkId != 0)
                {
                    $("#idErrMsg").html("이미 사용중인 아이디입니다.");
                }
                // 탈퇴테이블 중복확인
                else if (result.checkWithdrawId != 0)
                {
                    $("#idErrMsg").html("탈퇴한 아이디입니다.");
                }
                // 중복X
                else
                {
                    $("#idErrMsg").html("사용가능한 아이디입니다.");
                    $("#idErrMsg").css("color", "blue");
                    idCheck++;
                }
                $("#idErrMsg").css("display", "block");
                $("#id").focus();
            }
            , error: function(e)
            {
                alert(e.responseText);
            }
        });
    }
});

내용이 변경되면 다시 변수를 초기화해줬다. (닉네임, 휴대폰번호도 동일하게)

$("#id").change(function() {
    idCheck = 0;
});

그리고 최종적으로 <회원가입> 버튼을 누르면, 중복검사/인증을 했는지 변수 값을 검사한다.

(닉네임, 휴대폰번호도 동일하게)

$(".joinBtn").click(function()
{
	:
    
    // 아이디 중복검사 했는지 체크
    if (idCheck == 0)
    {
        $("#idErrMsg").html("중복검사를 진행해주세요.");
        $("#idErrMsg").css("color", "red");
        $("#idErrMsg").css("display", "block");
        $("#id").focus();
        return false;
    }
    
    :
    ${"#joinForm").submit();
});

 

 

 

 

🔥 ajax: JSON 데이터 → {"이름1":"값1", "이름2":"값2"} 형태로!!!

🔥 마지막에 결과값 출력해줘야 함(결과값 뿌려주기)~!~!!~!

ajax로 받아온 데이터를 jstl에서 직접적으로 받아와서 사용하는 건 불가하고,

다른 jsp에 결과값을 출력 후, 그 출력된 jsp를 뿌려주는 형식으로 사용해야 된다고 함....!

ajax 오랜만에 하려니까 1도 모르겠어서 어려웠다....ㅠ,ㅠ

<%
		:
        
String ajaxCode = (String)request.getAttribute("ajaxCode");
String result = "";
if (ajaxCode.equals("idCheck")) {
    StringBuffer sb = new StringBuffer();
    int checkId = (Integer)request.getAttribute("checkId");
    int checkWithdrawId = (Integer)request.getAttribute("checkWithdrawId");

    sb.append("{\"checkId\":\"" + checkId + "\", \"checkWithdrawId\":\"" + checkWithdrawId + "\"}");
    result = sb.toString();
}

		:
        
out.println(result);
%>

🔥 이메일 인증까지는 진행하지 못했는데, 다음에는 꼭 해보기..!!

     이메일 인증을 해야 ID/PW 찾을 때, 타사이트들처럼 이메일로도 전송해 줄 수 있으니까