코딩/Spring 쇼핑몰 프로젝트
Spring [쇼핑몰프로젝트] - 회원가입 유효성 검사[15]
유미._.
2023. 4. 27. 17:20
728x90
오늘은 회원가입 유효성 검사에 대한 세번째 포스팅을 해보겠습니다 (*^_^*) 3
구현 순서
1. 이름 유효성 검사
2. 이메일 유효성 검사
3. 인증번호 유효성 검사
4. 주소 유효성 검사
5. 최종 유효성 검사 및 전송
6. 테스트
1. 이름 유효성 검사
이름 유효성 검사도 위에서 해준 코드와 비슷하게 작성해 줍니다.
name 값이 공백이면 span 태그가 보이게 하고, nameCheck 변수에 false를 대입해줍니다.
name 값이 공백이 아니면 span 태그가 안보이고, nameCheck에 true를 대입합니다.
2. 이메일 유효성 검사
이메일 유효성 검사 코드도 넣어줍니다.
mail 값이 공백이면 span 태그가 보이게 하고, mailCheck 변수에 false를 대입해줍니다.
mail 값이 공백이 아니면 span 태그가 안보이고, mailCheck에 true를 대입합니다.
3. 인증번호 유효성 검사
이메일 인증번호 입력란에 입력한 번호와 이메일로 전송받은 인증번호의 일치여부에 따라 mailnumCheck 변수가 달라지도록 해야하기 때문에 if문에 mailnumCheck = true 를 추가해 줍니다. 일치하지 않을 경우엔 mailnumCheck = false 를 추가해줍니다.
4. 주소 유효성 검사
주소 유효성 검사 코드도 넣어줍니다.
addr 값이 공백이면 span 태그가 보이게 하고, addressCheck 변수에 false를 대입해줍니다.
addr 값이 공백이 아니면 span 태그가 안보이고, addressCheck에 true를 대입합니다.
5. 최종 유효성 검사 및 전송
유효성 검사 통과유무 변수들을 모두 넣어줍니다.
모든 변수의 값이 true가 되면 form을 서버에 전송시킵니다.
주석처리 해놓았던 코드를 if문 안으로 넣어줍니다.
유효성 검사 변수들 중 단 한개라도 false가 있을 경우 해당 코드를 읽게 되는데, 메서드가 정상 종료되지 못할 경우를 대비하여 return false를 추가해 주었습니다.
script부분 전체 코드 ↓↓↓
<script>
var code = ""; //이메일 전송 인증번호 저장위한 코드
/* 유효성 검사 통과유무 변수 */
var idCheck = false;
var idckCheck = false; //아이디 중복 검사
var pwCheck = false;
var pwckCheck = false; //비번 확인
var pwckorCheck = false; //비번 확인 일치
var nameCheck = false;
var mailCheck = false;
var mailnumCheck = false; //이메일 인증번호 확인
var addressCheck = false;
$(document).ready(function(){
//회원가입 버튼
$(".join_button").click(function(){
/* 입력값 변수 */
var id = $('.id_input').val();
var pw = $('.pw_input').val();
var pwck = $('.pwck_input').val();
var name = $('.user_input').val();
var mail = $('.mail_input').val();
var addr = $('.address_input_3').val();
/* 아이디 유효성 검사 */
if(id == ""){
$('.final_id_ck').css('display','block');
idCheck = false;
}else{
$('.final_id_ck').css('display','none');
idCheck = true;
}
/* 비밀번호 유효성 검사 */
if(pw == ""){
$('.final_pw_ck').css('display','block');
pwCheck = false;
}else{
$('.final_pw_ck').css('display','none');
pwCheck = true;
}
/* 비밀번호 확인 유효성 검사 */
if(pwck == ""){
$('.final_pwck_ck').css('display','block');
pwckCheck = false;
}else{
$('.final_pwck_ck').css('display','none');
pwckCheck = true;
}
/* 이름 유효성 검사 */
if(name == ""){
$('.final_name_ck').css('display','block');
nameCheck = false;
}else{
$('.final_name_ck').css('display','none');
nameCheck = true;
}
/* 이메일 유효성 검사 */
if(mail == ""){
$('.final_mail_ck').css('display','block');
mailCheck = false;
}else{
$('.final_mail_ck').css('display','none');
mailCheck = true;
}
/* 주소 유효성 검사 */
if(addr == ""){
$('.final_addr_ck').css('display','block');
addressCheck = false;
}else{
$('.final_addr_ck').css('display','none');
addressCheck = true;
}
/* 최종 유효성 검사 */
if(idCheck && idckCheck && pwCheck && pwckCheck && pwckorCheck && nameCheck && mailCheck && mailnumCheck && addressCheck){
$("#join_form").attr("action", "/member/join");
$("#join_form").submit();
}
return false;
});
});
//아이디 중복 검사
$('.id_input').on("propertychange change keyup paste input", function(){
/* console.log("keyup 테스트"); */
var memberId = $('.id_input').val(); //.id_input에 입력되는 값
var data = {memberId : memberId} //컨트롤러에 넘길 데이터 이름 : 데이터(.id_input에 입력되는 값)
$.ajax({
type : "post",
url : "/member/memberIdChk",
data : data,
success : function(result){
/* console.log("성공 여부" + result); */
if(result != 'fail'){
$('.id_input_re_1').css("display", "inline-block");
$('.id_input_re_2').css("display", "none");
idCheck = true;
}else {
$('.id_input_re_2').css("display", "inline-block");
$('.id_input_re_1').css("display", "none");
idCheck = false;
}
} //success 종료
}); //ajax 종료
}); //function 종료
//인증번호 이메일 전송
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); //입력한 이메일
var checkBox = $(".mail_check_input"); //인증번호 입력란
var boxWarp = $(".mail_check_input_box"); //인증번호 입력란 박스
$.ajax({
type:"GET",
url:"mailCheck?email=" + email,
success:function(data){
//console.log("data:"+data);
checkBox.attr("disabled",false);
boxWarp.attr("id", "mail_check_input_box_true");
code = data; //Controller부터 전달받은 인증번호를 code에 저장
}
});
});
/* 인증번호 비교 */
$(".mail_check_input").blur(function(){ //blur는 포커스를 잃었을때 발생
var inputCode = $(".mail_check_input").val(); //사용자가 입력한 코드
var checkResult = $("#mail_check_input_box_warn"); //비교 결과
if(inputCode == code){
checkResult.html("인증번호가 일치합니다.");
checkResult.attr("class", "correct");
mailnumCheck = true;
}else{
checkResult.html("인증번호가 일치하지 않습니다.");
checkResult.attr("class", "incorrect");
mailnumCheck = false;
}
});
/* 다음 주소 연동 */
function daum_address(){
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
//주소변수 문자열과 참고항목 문자열 합치기
addr += extraAddr;
} else {
addr += ' ';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
$(".address_input_1").val(data.zonecode);
$(".address_input_2").val(addr);
// 커서를 상세주소 필드로 이동한다.
$(".address_input_3").attr("readonly",false);
$(".address_input_3").focus();
}
}).open();
}
/* 비밀번호 확인 일치 유효성 검사 */
$('.pwck_input').on("propertychange change keyup paste input", function(){
var pw = $('.pw_input').val();
var pwck = $('.pwck_input').val();
$('.final_pwck_ck').css('display', 'none');
if(pw == pwck){
$('.pwck_input_re_1').css('display','block');
$('.pwck_input_re_2').css('display','none');
pwckorCheck = true;
}else{
$('.pwck_input_re_1').css('display','none');
$('.pwck_input_re_2').css('display','block');
pwckorCheck = false;
}
});
</script>
6. 테스트
이제 프로그램을 실행시켜 테스트를 진행해 봅니다.
아무것도 입력하지 않고 가입하기 버튼을 누를 경우 ↓↓↓
모든 정보를 올바르게 입력한 경우 ↓↓↓
이상입니다 O(∩_∩)O
참고 : Kim VamPa (tistory.com) 👍
728x90
반응형