mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][6]회원가입 유효성 검사(1)

Browse Source 
1. 유효성 검사 통과 유무 변수 선언
2. form 전송 막기
3. 입력값 변수 선언
4. span 태그 추가
5. 아이디 유효성 검사
6. 아이디 중복검사 유효성 검사
This commit is contained in:
SeoJin Kim
2020-12-03 13:10:32 +09:00
parent 96e6c073cc
commit 2a3ca92ba0
6 changed files with 128 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
VamPa/src/main/webapp/WEB-INF/views/member/join.jsp
View File

@@ -25,31 +25,36 @@
<input class="id_input" name="memberId">
</div>
<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
<span class="final_id_ck">아이디를 입력해주세요.</span>
</div>
<div class="pw_wrap">
<div class="pw_name">비밀번호</div>
<div class="pw_input_box">
<input class="pw_input" name="memberPw">
</div>
<span class="final_pw_ck">비밀번호를 입력해주세요.</span>
</div>
<div class="pwck_wrap">
<div class="pwck_name">비밀번호 확인</div>
<div class="pwck_input_box">
<input class="pwck_input">
</div>
<span class="final_pwck_ck">비밀번호 확인을 입력해주세요.</span>
</div>
<div class="user_wrap">
<div class="user_name">이름</div>
<div class="user_input_box">
<input class="user_input" name="memberName">
</div>
<span class="final_name_ck">이름을 입력해주세요.</span>
</div>
<div class="mail_wrap">
<div class="mail_name">이메일</div>
<div class="mail_input_box">
<input class="mail_input" name="memberMail">
</div>
<span class="final_mail_ck">이메일을 입력해주세요.</span>
<div class="mail_check_wrap">
<div class="mail_check_input_box" id="mail_check_input_box_false">
<input class="mail_check_input" disabled="disabled">
@@ -82,6 +87,7 @@
<input class="address_input_3" name="memberAddr3" disabled="disabled">
</div>
</div>
<span class="final_addr_ck">주소를 입력해주세요.</span>
</div>
<div class="join_button_wrap">
<input type="button" class="join_button" value="가입하기">
@@ -95,11 +101,40 @@
var code = ""; //이메일전송 인증번호 저장위한 코드
/* 유효성 검사 통과유무 변수 */
var idCheck = false; // 아이디
var idckCheck = false; // 아이디 중복 검사
var pwCheck = false; // 비번
var pwckCheck = false; // 비번 확인
var pwckcorCheck = false; // 비번 확인 일치 확인
var nameCheck = false; // 이름
var mailCheck = false; // 이메일
var mainumCheck = false; // 이메일 인증번호 확인
var addressCheck = false // 주소
$(document).ready(function(){
//회원가입 버튼(회원가입 기능 작동)
$(".join_button").click(function(){
$("#join_form").attr("action", "/member/join");
$("#join_form").submit();
/* 입력값 변수 */
var id = $('.id_input').val(); // id 입력란
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;
}
//$("#join_form").attr("action", "/member/join");
//$("#join_form").submit();
});
});
@@ -119,10 +154,12 @@ $('.id_input').on("propertychange change keyup paste input", function(){
// console.log("성공 여부" + result);
if(result != 'fail'){
$('.id_input_re_1').css("display","inline-block");
$('.id_input_re_2').css("display", "none");
$('.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");
$('.id_input_re_1').css("display", "none");
idckCheck = false;
}
}// success 종료
}); // ajax 종료

21
VamPa/src/main/webapp/resources/css/member/join.css
View File

@@ -267,6 +267,27 @@
color: white;
}
/* 유효성 검사 문구 */
.final_id_ck{
display: none;
}
.final_pw_ck{
display: none;
}
.final_pwck_ck{
display: none;
}
.final_name_ck{
display: none;
}
.final_mail_ck{
display: none;
}
.final_addr_ck{
display: none;
}
/* float 속성 해제 */
.clearfix{
clear: both;

2
VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Wed Nov 18 08:07:25 KST 2020
#Thu Dec 03 12:42:51 KST 2020
version=1.0.0-BUILD-SNAPSHOT
groupId=com.vam
m2e.projectName=VamPa

47
VamPa_MySQL/src/main/webapp/WEB-INF/views/member/join.jsp
View File

@@ -25,31 +25,36 @@
<input class="id_input" name="memberId">
</div>
<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
<span class="id_input_re_2">아이디가 이미 존재합니다.</span>
<span class="final_id_ck">아이디를 입력해주세요.</span>
</div>
<div class="pw_wrap">
<div class="pw_name">비밀번호</div>
<div class="pw_input_box">
<input class="pw_input" name="memberPw">
</div>
<span class="final_pw_ck">비밀번호를 입력해주세요.</span>
</div>
<div class="pwck_wrap">
<div class="pwck_name">비밀번호 확인</div>
<div class="pwck_input_box">
<input class="pwck_input">
</div>
<span class="final_pwck_ck">비밀번호 확인을 입력해주세요.</span>
</div>
<div class="user_wrap">
<div class="user_name">이름</div>
<div class="user_input_box">
<input class="user_input" name="memberName">
</div>
<span class="final_name_ck">이름을 입력해주세요.</span>
</div>
<div class="mail_wrap">
<div class="mail_name">이메일</div>
<div class="mail_input_box">
<input class="mail_input" name="memberMail">
</div>
<span class="final_mail_ck">이메일을 입력해주세요.</span>
<div class="mail_check_wrap">
<div class="mail_check_input_box" id="mail_check_input_box_false">
<input class="mail_check_input" disabled="disabled">
@@ -82,6 +87,7 @@
<input class="address_input_3" name="memberAddr3" disabled="disabled">
</div>
</div>
<span class="final_addr_ck">주소를 입력해주세요.</span>
</div>
<div class="join_button_wrap">
<input type="button" class="join_button" value="가입하기">
@@ -95,11 +101,40 @@
var code = ""; //이메일전송 인증번호 저장위한 코드
/* 유효성 검사 통과유무 변수 */
var idCheck = false; // 아이디
var idckCheck = false; // 아이디 중복 검사
var pwCheck = false; // 비번
var pwckCheck = false; // 비번 확인
var pwckcorCheck = false; // 비번 확인 일치 확인
var nameCheck = false; // 이름
var mailCheck = false; // 이메일
var mainumCheck = false; // 이메일 인증번호 확인
var addressCheck = false // 주소
$(document).ready(function(){
//회원가입 버튼(회원가입 기능 작동)
$(".join_button").click(function(){
$("#join_form").attr("action", "/member/join");
$("#join_form").submit();
/* 입력값 변수 */
var id = $('.id_input').val(); // id 입력란
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;
}
//$("#join_form").attr("action", "/member/join");
//$("#join_form").submit();
});
});
@@ -119,10 +154,12 @@ $('.id_input').on("propertychange change keyup paste input", function(){
// console.log("성공 여부" + result);
if(result != 'fail'){
$('.id_input_re_1').css("display","inline-block");
$('.id_input_re_2').css("display", "none");
$('.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");
$('.id_input_re_1').css("display", "none");
idckCheck = false;
}
}// success 종료
}); // ajax 종료

21
VamPa_MySQL/src/main/webapp/resources/css/member/join.css
View File

@@ -267,6 +267,27 @@
color: white;
}
/* 유효성 검사 문구 */
.final_id_ck{
display: none;
}
.final_pw_ck{
display: none;
}
.final_pwck_ck{
display: none;
}
.final_name_ck{
display: none;
}
.final_mail_ck{
display: none;
}
.final_addr_ck{
display: none;
}
/* float 속성 해제 */
.clearfix{
clear: both;

2
VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Wed Nov 18 08:07:26 KST 2020
#Thu Dec 03 12:42:52 KST 2020
version=1.0.0-BUILD-SNAPSHOT
groupId=com.vam
m2e.projectName=VamPa_MySQL