반응형
순서
1. 이름 유효성 검사
2. 이메일 유효성 검사
3. 인증번호 유효성 검사
4. 주소 유효성 검사
5. 최종 유효성 검사 및 전송
6. 테스트
1. 이름 유효성 검사
회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.
코드를 해석하면 이름(name) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 nameCheck 변수는 false를 대입합니다.
이름(name) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 nameCheck에 true를 대입합니다.
/* 이름 유효성 검사 */
if(name == ""){
$('.final_name_ck').css('display','block');
nameCheck = false;
}else{
$('.final_name_ck').css('display', 'none');
nameCheck = true;
}2. 이메일 유효성 검사
회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.
코드를 해석하면 이메일(mail) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 mailCheck 변수는 false를 대입합니다.
이메일(mail) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 mailCheck에 true를 대입합니다.
/* 이메일 유효성 검사 */
if(mail == ""){
$('.final_mail_ck').css('display','block');
mailCheck = false;
}else{
$('.final_mail_ck').css('display', 'none');
mailCheck = true;
}3. 인증번호 유효성 검사
인증번호 입력란에 입력한 번호가 이메일로 전송한 인증번호와 일치 여부에 따라 mailnumCheck 변수가 달라지도록 해야 합니다.
기존에 이미 인증번호 비교 메서드를 만들었기 때문에 해당 메서드의 if문에서 일치할 경우는 mailnumCheck 변수에 true를 대입하고, 일치하지 않을 경우에는 false를 대입합니다.
mailnumCheck = true; // 일치할 경우
mailnumCheck = false; // 일치하지 않을 경우
4. 주소 유효성 검사
회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.
코드를 해석하면 주소(address1) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 addressCheck1 변수는 false를 대입합니다.
주소(address1) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 addressCheck1에 true를 대입합니다.
/* 주소 유효성 검사 */
if(address1 == ""){
$('.final_addr_ck').css('display','block');
addressCheck1 = false;
}else{
$('.final_addr_ck').css('display', 'none');
addressCheck1 = true;
}4-1. 상세 주소 유효성 검사
회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다.
코드를 해석하면 주소(address2) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 addressCheck2 변수는 false를 대입합니다.
주소(address2) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 addressCheck2에 true를 대입합니다.
/* 상세 주소 유효성 검사 */
if(address2 == ""){
$('.final_addr2_ck').css('display','block');
addressCheck2 = false;
}else{
$('.final_addr2_ck').css('display', 'none');
addressCheck2 = true;
}
5. 최종 유효성 검사
최종적으로 앞의 유효성 검사 변수들이 true가 되었는지 모두 확인합니다.
모두 true일 경우 회원가입 form을 서버에 전송합니다.
최종 유효성 검사를 위한 if문을 작성합니다.
/* 최종 유효성 검사 */
if(idCheck&&nameCheck&&mailCheck&&mailnumCheck&&pwdCheck&&pwdCheck2&&pwckcorCheck&&phoneCheck&&addressCheck1&&addressCheck2){
}if문 내부에 주석 처리하였던 회원가입 form을 전송하는 코드를 삽입합니다.
$("#join_form").attr("action", "/member/join");
$("#join_form").submit();
if문 아래에 return false를 기입하였습니다.
위의 if문에서 유효성 검사 변수들 중 단 한 개라도 false가 있을 경우 해당 코드를 읽게 되는데, 감싸고 있는 join_button click 메서드가 정상 종료되지 못할 경우를 대비해서 넣었습니다.
return false;
6. 테스트
6-1 전혀 입력하지 않은 경우
6-2 일부만 제대로 입력한 경우
6-3 정상적으로 입력을 완료한 경우
join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>회원가입</title>
<link href="${path}/resources/css/login/signup.css" rel="stylesheet"/>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<div class="title">
<a href="/swan">SWAN</a>
</div>
<div class="content">
<form id="join_form" method="post">
<div class="user-details">
<div class="input-box">
<span class="details">아이디</span>
<input type="text" name="id" id="userId" placeholder=" 6~16자 영문, 숫자" class="id_input" required>
<span class="id_input_re_1 ">사용 가능한 아이디입니다.</span>
<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
<span class="final_id_ck" style="color: red;">아이디를 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">이름</span>
<input type="text" name="name" required class="user_input">
<span class="final_name_ck" style="color: red; display: none;">이름을 입력해주세요.</span>
</div>
<div class="input-box mail_wrap">
<span class="details mail_name">이메일</span>
<input type="text" name="email" class="mail_input" placeholder="이메일 입력" required style="width: 70%;">
<div class="mail_check_button" style="float: right;">
<span>인증번호 전송</span>
</div>
<span class="final_mail_ck" style="color: red;">이메일을 입력해주세요.</span>
<span class="mail_input_box_warn"></span>
</div>
<div class="input-box mail_check_input_box" id="mail_check_input_box_false">
<span class="details">인증번호 확인</span>
<input class="mail_check_input" disabled="disabled" placeholder="인증번호 입력">
<div class="clearfix"></div>
<span id="mail_check_input_box_warn"></span>
</div>
<div class="input-box">
<span class="details">전화번호</span>
<input type="tel" name="phone" placeholder=" Phone" required class="phone_input">
<span class="final_phone_ck" style="color: red;">전화번호를 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">비밀번호</span>
<input type="password" name="pwd" placeholder=" 영문, 숫자, 특수문자 8~16자" class="pwd" id="password_1" required style="width: 47%; margin-right: 4%;">
<input type="password" name="pwd2" placeholder=" 비밀번호 재확인" class="pwdCk" id="password_2" required style="width: 47%;">
<span id="alert-success" style="display: none; color : green;">비밀번호가 일치합니다.</span>
<span id="alert-danger" style="display: none; color: red;">비밀번호가 일치하지 않습니다.</span>
<span class="final_pw_ck" style="color: red;">비밀번호를 입력해주세요.</span>
<span class="final_pwck_ck" style="color: red;">비밀번호 재확인을 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">주소</span>
<input id="colFormLabelLg3" onclick="execPostCode();" name="address" placeholder="주소를 입력하세요." required class="address_input1">
<span class="final_addr_ck" style="color: red;">주소를 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">상세 주소</span>
<input required name="address2" class="address_input2" placeholder="상세 주소를 입력하세요.">
<span class="final_addr2_ck" style="color: red;">상세 주소를 입력해주세요.</span>
</div>
</div>
<div class="gender-details">
<input type="radio" name="gender" id="dot-1" value="M">
<input type="radio" name="gender" id="dot-2" value="F">
<input type="radio" name="gender" id="dot-3" value="N">
<span class="gender-title">성별</span>
<div class="category">
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">남자</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">여자</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">선택X</span>
</label>
</div>
</div>
<div class="button">
<input type="button" value="회원가입" class="join_button">
</div>
</form>
</div>
</div>
</main>
<script>
var idCheck = false; // 아이디
var nameCheck = false; // 이름
var phoneCheck = false; // 전화번호
var mailCheck = false; // 이메일
var mailnumCheck = false; // 이메일 인증번호 확인
var pwdCheck = false; // 비밀번호
var pwdCheck2 = false; // 비밀번호 재입력
var addressCheck1 = false; // 주소
var addressCheck2 = false; // 상세 주소 입력
$(document).ready(function(){
//회원가입 버튼(회원가입 기능 작동)
$(".join_button").click(function(){
/* 입력값 변수 */
var id = $('.id_input').val(); // 아이디 입력란
var name = $('.user_input').val(); // 이름 입력란
var phone = $('.phone_input').val(); // 전화번호 입력란
var mail = $('.mail_input').val(); // 이메일 입력란
var address1 = $('.address_input1').val(); // 주소 입력란
var address2 = $('.address_input2').val(); // 상세주소 입력란
var pwd = $('.pwd').val(); // 비밀번호 입력란
var pwdCk = $('.pwdCk').val(); // 비밀번호 재입력란
/* 아이디 유효성 검사 */
if(id == ""){
$(".final_id_ck").css('display', 'block');
idCheck = false;
} else {
$('.final_id_ck').css('display', 'none');
idCheck = true;
}
/* 이름 유효성 검사 */
if(name == ""){
$(".final_name_ck").css('display', 'block');
nameCheck = false;
} else {
$('.final_name_ck').css('display', 'none');
nameCheck = true;
}
/* 비밀번호 유효성 검사 */
if(pwd == ""){
$('.final_pw_ck').css('display', 'block');
pwdCheck = false;
} else {
$('.final_pw_ck').css('display', 'none');
pwdCheck = true;
}
/* 비밀번호 재입력 유효성 검사 */
if(pwdCk == ""){
$('.final_pwck_ck').css('display', 'block');
pwdCheck2 = false;
} else {
$('.final_pwck_ck').css('display', 'none');
pwdCheck2 = true;
}
/* 이메일 유효성 검사 */
if(mail == ""){
$('.final_mail_ck').css('display','block');
mailCheck = false;
}else{
$('.final_mail_ck').css('display', 'none');
mailCheck = true;
}
/* 전화번호 유효성 검사 */
if(phone == ""){
$('.final_phone_ck').css('display','block');
phoneCheck = false;
}else{
$('.final_phone_ck').css('display', 'none');
phoneCheck = true;
}
/* 주소 유효성 검사 */
if(address1 == ""){
$('.final_addr_ck').css('display','block');
addressCheck1 = false;
}else{
$('.final_addr_ck').css('display', 'none');
addressCheck1 = true;
}
/* 상세 주소 유효성 검사 */
if(address2 == ""){
$('.final_addr2_ck').css('display','block');
addressCheck2 = false;
}else{
$('.final_addr2_ck').css('display', 'none');
addressCheck2 = true;
}
/* 최종 유효성 검사 */
if(idCheck&&nameCheck&&mailCheck&&mailnumCheck&&pwdCheck&&pwdCheck2&&pwckcorCheck&&phoneCheck&&addressCheck1&&addressCheck2){
$("#join_form").attr("action", "/member/join");
$("#join_form").submit();
}
return false;
});
});
var code = ""; //이메일전송 인증번호 저장위한 코드
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var checkBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
type:"GET",
url:"mailCheck?email=" + email,
success:function(data){
// console.log("data : " + data);
checkBox.attr("disabled",false);
boxWrap.attr("id", "mail_check_input_box_true");
code = data;
}
});
});
/* 인증번호 비교 */
$(".mail_check_input").blur(function(){
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;
}
});
<!-- id 중복 검사 -->
//아이디 중복검사
$('.id_input').on("propertychange change keyup paste input", function(){
/* console.log("keyup 테스트"); */
var id = $('.id_input').val(); // .id_input에 입력되는 값
var data = {id : id}; // '컨트롤에 넘길 데이터 이름' : '데이터(.id_input에 입력되는 값)'
$.ajax({
type : "post",
url : "/member/memberIdChk",
data : data,
success : function(result){
//console.log("성공 여부" + result);
if(result != 'fail' && result != 0){
$('.id_input_re_1').css("display","inline-block");
$('.id_input_re_2').css("display", "none");
idckCheck = true;
} else {
$('.id_input_re_2').css("display","inline-block");
$('.id_input_re_1').css("display", "none");
idckCheck = false;
}
}// success 종료
}); // ajax 종료
});// function 종료
/* 비밀번호 확인 일치 유효성 검사 */
$('.pwdCk').on("propertychange change keyup paste input", function(){
var pwd1 = $('#password_1').val();
var pwd2 = $('#password_2').val();
$('.final_pwck_ck').css('display', 'none');
if (pwd1 == pwd2) {
$("#alert-success").css('display', 'inline-block');
$("#alert-danger").css('display', 'none');
pwckcorCheck = true;
} else {
$("#alert-success").css('display', 'none');
$("#alert-danger").css('display', 'inline-block');
pwckcorCheck = false;
}
});
</script>
<!-- 주소 API 가져오기 -->
<script src=http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false></script>
<script>
function execPostCode() {
daum.postcode.load(function() {
new daum.Postcode({
oncomplete : function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 각 주소의 노출 규칙에 따라 주소를 조합
// 내려오는 변수가 값이 없을 땐 공백('')값을 가지므로, 이를 참고
var addr = ''; // 주소 변수
// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져옴
if(data.userSelectedType == 'R'){
// 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else {
// 사용자가 지번 주소를 선택했을 경우
addr = data.jibunAddress;
}
// 주소 정보를 해당 필드에 넣음.
document.getElementById('colFormLabelLg3').value = addr;
// 커서를 주소 필드로 이동
document.getElementById("colFormLabelLg3").focus();
}
}).open();
});
}
</script>
</body>
</html>반응형
'😎 STS3 Spring 쇼핑몰' 카테고리의 다른 글
| STS3 쇼핑몰 프로젝트[8] 로그인 기능 구현(mapper, service) (0) | 2022.08.01 |
|---|---|
| STS3 쇼핑몰 프로젝트[7] 이메일 형식 유효성 검사 (0) | 2022.08.01 |
| STS3 쇼핑몰 프로젝트[6] 회원 가입 유효성 검사(2) (0) | 2022.08.01 |
| STS3 쇼핑몰 프로젝트[6] 회원 가입 유효성 검사(1) (0) | 2022.07.31 |
| STS3 쇼핑몰 프로젝트[5] 주소록 API 연동 (0) | 2022.07.31 |
