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

[Spring][쇼핑몰 프로젝트][4] 인증번호 이메일 전송(3)

Browse Source 
https://kimvampa.tistory.com/107
This commit is contained in:
SeoJin Kim
2020-11-09 17:49:53 +09:00
parent 9576eed6cc
commit f40e184724
6 changed files with 67 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,6 +58,7 @@
<span>인증번호 전송</span>
</div>
<div class="clearfix"></div>
<span id="mail_check_input_box_warn"></span>
</div>
</div>
<div class="address_wrap">
@@ -91,6 +92,8 @@
<script>
var code = ""; //이메일전송 인증번호 저장위한 코드
$(document).ready(function(){
//회원가입 버튼(회원가입 기능 작동)
$(".join_button").click(function(){
@@ -128,7 +131,9 @@ $('.id_input').on("propertychange change keyup paste input", function(){
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var email = $(".mail_input").val(); // 입력한 이메일
var cehckBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
@@ -136,7 +141,10 @@ $(".mail_check_button").click(function(){
url:"mailCheck?email=" + email,
success:function(data){
console.log("data : " + data);
//console.log("data : " + data);
cehckBox.attr("disabled",false);
boxWrap.attr("id", "mail_check_input_box_true");
code = data;
}
@@ -144,6 +152,21 @@ $(".mail_check_button").click(function(){
});
/* 인증번호 비교 */
$(".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");
} else { // 일치하지 않을 경우
checkResult.html("인증번호를 다시 확인해주세요.");
checkResult.attr("class", "incorrect");
}
});
</script>

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

@@ -180,6 +180,12 @@
background-color: #ececf7;
cursor: pointer;
}
.correct{
color : green;
}
.incorrect{
color : red;
}
/* 주소 영역 */
.address_wrap{

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
#Tue Nov 03 20:58:09 KST 2020
#Mon Nov 09 16:44:38 KST 2020
version=1.0.0-BUILD-SNAPSHOT
groupId=com.vam
m2e.projectName=VamPa

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

@@ -52,12 +52,13 @@
</div>
<div class="mail_check_wrap">
<div class="mail_check_input_box" id="mail_check_input_box_false">
<input class="mail_check_input" disabled="disabled">
<input class="mail_check_input" disabled="disabled">
</div>
<div class="mail_check_button">
<span>인증번호 전송</span>
</div>
<div class="clearfix"></div>
<span id="mail_check_input_box_warn"></span>
</div>
</div>
<div class="address_wrap">
@@ -91,6 +92,8 @@
<script>
var code = ""; //이메일전송 인증번호 저장위한 코드
$(document).ready(function(){
//회원가입 버튼(회원가입 기능 작동)
$(".join_button").click(function(){
@@ -128,7 +131,9 @@ $('.id_input').on("propertychange change keyup paste input", function(){
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var email = $(".mail_input").val(); // 입력한 이메일
var cehckBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
@@ -136,7 +141,10 @@ $(".mail_check_button").click(function(){
url:"mailCheck?email=" + email,
success:function(data){
console.log("data : " + data);
//console.log("data : " + data);
cehckBox.attr("disabled",false);
boxWrap.attr("id", "mail_check_input_box_true");
code = data;
}
@@ -144,8 +152,21 @@ $(".mail_check_button").click(function(){
});
/* 인증번호 비교 */
$(".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");
} else { // 일치하지 않을 경우
checkResult.html("인증번호를 다시 확인해주세요.");
checkResult.attr("class", "incorrect");
}
});
</script>

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

@@ -157,10 +157,10 @@
float: left;
}
#mail_check_input_box_false{
background-color:#ebebe4;
background-color:#ebebe4;
}
#mail_check_input_box_true{
background-color:white;
background-color:white;
}
.mail_check_input{
width:100%;
@@ -180,6 +180,12 @@
background-color: #ececf7;
cursor: pointer;
}
.correct{
color : green;
}
.incorrect{
color : red;
}
/* 주소 영역 */
.address_wrap{

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
#Tue Nov 03 20:58:10 KST 2020
#Mon Nov 09 16:44:39 KST 2020
version=1.0.0-BUILD-SNAPSHOT
groupId=com.vam
m2e.projectName=VamPa_MySQL