Spring
Spring(회원 가입 - DB저장)
불도정
2023. 4. 26. 23:14
이번 시간엔 회원가입 페이지에 있는 input에 정보를 입력하고 js에 구현되어있는 유효성 검사를
통과하면 가입하기 버튼을 통해 DB에 회원 정보를 저장하는 기능을 구현해 보겠다.
먼저 JavaScript 코드이다.
const checkObj = {
"memberEmail" : false,
"memberPw" : false,
"memberPwConfirm" : false,
"memberNickname" : false,
"memberTel" : false,
};먼저 유효성 검사 여부를 기록할 객체를 생성한다.
유효성 검사를 거쳐서 조건에 충족하면 true를 반환하게끔 로직을 구성할것이다.
먼저 전화번호 유효성 검사이다.
const memberTel = document.getElementById("memberTel");
const telMessage = document.getElementById("telMessage");
memberTel.addEventListener("input", function(){
// 입력이 되지 않은 경우
if(memberTel.value.length == 0){
telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
//telMessage.classList.remove("confirm");
//telMessage.classList.remove("error");
telMessage.classList.remove("confirm", "error");
checkObj.memberTel = false; // 유효하지 않은 상태임을 기록
return;
}
// 전화번호 정규식
const regExp = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;
if(regExp.test(memberTel.value)){ // 유효한 경우
telMessage.innerText = "유효한 전화번호 형식입니다.";
telMessage.classList.add("confirm");
telMessage.classList.remove("error");
checkObj.memberTel = true; // 유효한 상태임을 기록
} else{ // 유효하지 않은 경우
telMessage.innerText = "전화번호 형식이 올바르지 않습니다.";
telMessage.classList.add("error");
telMessage.classList.remove("confirm");
checkObj.memberTel = false; // 유효하지 않은 상태임을 기록
}
});css는 첨부하지 않겠다 개인이 하고싶은대로 하면 되는거니까
다음은 이메일 유효성 검사이다.
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");
memberEmail.addEventListener("input", function(){
// 입력이 되지 않은 경우
if( memberEmail.value.length == 0 ){
emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해주세요.";
emailMessage.classList.remove("confirm", "error");
checkObj.memberEmail = false; // 유효 X 기록
return;
}
// 입력된 경우
const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;
if( regExp.test(memberEmail.value) ){ // 유효한 경우
// ****** 이메일 중복 검사(ajax) 진행 예정 ******
// $.ajax( {k:v , k:v} ); // jQuery ajax 기본형태
// memberEmail.value == 입력된 이메일
$.ajax({
url : "emailDupCheck",
// 필수 속성 url
// 현재 주소 : /comm/member/signUp
// 상대 경로 : /comm/member/emailDupCheck
data : { "memberEmail" : memberEmail.value },
// data속성 : 비동기 통신 시 서버로 전달할 값을 작성(JS 객체 형식)
// -> 비동기 통신 시 input에 입력된 값을
// "memberEmail" 이라는 key 값(파라미터)으로 전달
type : "GET", // 데이터 전달 방식 type
success : function(result){
// 비동기 통신(ajax)가 오류 없이 요청/응답 성공한 경우
// 매개변수 result : servlet에서 출력된 result 값이 담겨있음
// console.log(result);
if(result == 1){ // 중복 O
emailMessage.innerText = "이미 사용중인 이메일 입니다.";
emailMessage.classList.remove("confirm");
emailMessage.classList.add("error");
checkObj.memberEmail = false; // 유효 X 기록
} else { // 중복 X
emailMessage.innerText = "사용 가능한 이메일 입니다.";
emailMessage.classList.add("confirm");
emailMessage.classList.remove("error");
checkObj.memberEmail = true; // 유효 O 기록
}
},
error : function(){
// 비동기 통신(ajax) 중 오류가 발생한 경우
console.log("에러 발생");
}
});
}else{
emailMessage.innerText = "이메일 형식이 유효하지 않습니다.";
emailMessage.classList.add("error");
emailMessage.classList.remove("confirm");
checkObj.memberEmail = false; // 유효 X 기록
}
});입력이 되었을 경우 이벤트 리스너가 작동하며 유효성 검사 통과시 ajax 비동기 통신을 이용해
DB에 있는 이메일과 중복되는지 보여주는 기능을 한다.
닉네임 검사는 이메일과 똑같기 때문에 생략한다.
다음은 비밀번호 유효성 검사이다.
const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");
memberPw.addEventListener("input", function(){
if(memberPw.value.length == 0){
pwMessage.innerText = "영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
pwMessage.classList.remove("confirm", "error");
checkObj.memberPw = false; // 유효 X 기록
return;
}
const regExp = /^[\w!@#_-]{6,30}$/;
if( regExp.test(memberPw.value) ){ // 비밀번호 유효
checkObj.memberPw = true; // 유효 O 기록
if(memberPwConfirm.value.length == 0){ // 비밀번호 유효, 확인 작성 X
pwMessage.innerText = "유효한 비밀번호 형식입니다.";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
} else { // 비밀번호 유효, 확인 작성 O
checkPw(); // 비밀번호 일치 검사 함수 호출()
}
}else{
pwMessage.innerText = "비밀번호 형식이 유효하지 않습니다.";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
checkObj.memberPw = false; // 유효 X 기록
}
});간단히 정규식을 통해 유효성검사에 통과하거나 통과하지 못했을때 checkObj에 있는 memberPw에 true 또는 false를
반환하는 기능을 수행하는 코드이다.
다음은 비밀번호 확인 검사 코드이다.
memberPwConfirm.addEventListener("input", checkPw );
function checkPw(){ // 비밀번호 일치 검사
// 비밀번호 / 비밀번호 확인이 같을 경우
if(memberPw.value == memberPwConfirm.value){
pwMessage.innerText = "비밀번호가 일치합니다.";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
checkObj.memberPwConfirm = true; // 유효 O 기록
} else{
pwMessage.innerText = "비밀번호가 일치하지 않습니다.";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
checkObj.memberPwConfirm = false; // 유효 X 기록
}위에있는 비밀번호 유효성 검사 코드에 심어져 있으며 비밀번호에 값이 입력되었을때 length가 0이 아닐경우 실행되도록
되어있고 비밀번호 확인칸에 유효성을 통과했는데 알려주는 기능을 한다.
마지막으로 회원가입 버튼을 클릭하였을 때 유효성 검사가 완료 되었는지 확인하는 함수이다.
function signUpValidate(){
// checkObj에 있는 모든 속성을 반복 접근하여
// false가 하나라도 있는 경우에는 form태그 기본 이벤트 제거
let str;
for( let key in checkObj ){ // 객체용 향상된 for문
// 현재 접근 중인 key의 value가 false인 경우
if( !checkObj[key] ){
switch(key){
case "memberEmail": str="이메일이"; break;
case "memberPw": str="비밀번호가"; break;
case "memberPwConfirm": str="비밀번호 확인이"; break;
case "memberNickname": str="닉네임이"; break;
case "memberTel": str="전화번호가"; break;
}
str += " 유효하지 않습니다.";
alert(str);
document.getElementById(key).focus();
return false; // form태그 기본 이벤트 제거
}
}
return true; // form태그 기본 이벤트 수행
}signUp.jsp 에 회원가입 입력란들은 form 태그에 쌓여져 있으며
<form action="signUp" method="POST" name="signUp-form" onsubmit="return signUpValidate()">이렇게 작성되어 있다.
signUpValidate() 가 true를 리턴하면 이벤트를 수행하게 된다.
다음 2편에서 spring으로 회원가입을 작동시켜서 DB에 회원정보를 저장해보겠다.