순서
1. 인증 번호 입력란 변환 기능
2. 인증 번호 일치 여부 검사 기능
3. 테스트
1. 인증 번호 입력란 변환 기능
인증 번호 입력란(mail_check_input)에 사용할 수 있도록 하기 위해 두 가지가 기능 실행되어야 합니다.
ㄱ. 인증 번호 입력란 태그의 속성 disabled 속성 값이 변경.
ㄴ. 인증 번호 입력란의 배경색 변경.
이 기능은 인증 번호 전송이 정상적으로 작동하였을 때만 진행이 됩니다.
그렇기 때문에 앞서 말한 두 가지 기능을 수행하는 명령 코드는 ajax 내에 있는 success코드에 작성되어야 합니다. success 코드 자체가 ajax가 정상적으로 진행이 완료되었을 때 작동하는 코드이기 때문입니다.
변경이 되어야 할 대상[$(".mail_check_input"), $(". mail_check_input_box")]을 쉽게 사용하기 위해서 checkBox, boxWrap변수를 선언 및 할당하였습니다.
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var cehckBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
type:"GET",
url:"mailCheck?email=" + email,
success:function(data){
//console.log("data : " + data);
}
});
});succes 코드 안에 이메일 인증 입력란[$(".mail_check_input")]이 입력이 가능하도록 속성을 변경해주는 코드를 추가해줍니다.
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var cehckBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
type:"GET",
url:"mailCheck?email=" + email,
success:function(data){
//console.log("data : " + data);
cehckBox.attr("disabled",false);
}
});
});succes 코드 안에 이메일 인증 입력란[$(".mail_check_input_box")]의 색상이 변경되도록 해당 태그 id속성 값을 변경해주는 코드를 추가합니다.
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
var email = $(".mail_input").val(); // 입력한 이메일
var cehckBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box"); // 인증번호 입력란 박스
$.ajax({
type:"GET",
url:"mailCheck?email=" + email,
success:function(data){
//console.log("data : " + data);
cehckBox.attr("disabled",false);
boxWrap.attr("id", "mail_check_input_box_true");
}
});
});2. 인증번호 일치 여부 검사 기능
입력된 인증 번호와 이메일로 전송된 인증 번호에 대한 비교는 controller에서 진행되지 않고 뷰에서 진행되도록 만들었습니다.
controller로부터 전달받은 인증 번호를 뷰에 저장하는 코드를 추가합니다. 사용자가 입력한 인증 번호와 비교할 수 있도록 하기 위함입니다.
스크립트 문 제일 상단에 code 변수를 선언합니다.
var code = ""; //이메일전송 인증번호 저장위한 코드인증 번호 이메일 전송 메서드 내의 ajax success 코드에 controller부터 전달받은 인증 번호를 위에서 선언한 code에 저장시키는 코드를 추가합니다.
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;
}
});
});속성 class 값이 "mail_check_wrap"인 div태그 제일 아래에 span태그를 추가해줍니다.
그리고 class 속성을 추가해주고 값은 "mail_check_input_box_warn"으로 합니다. (추가해준 span 태그는 인증 번호의 일치 여부를 알려주는 경고글 역할을 합니다. )
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>join.css에 correct와 incorrect 코드(class 속성)를 추가해줍니다.
추가해준 css 속성은 인증 번호의 일치 여부에 따라 위에서 추가해준 span태그의 글 색상을 변경시킬 때 사용될 것입니다.
.correct{
color : green;
}
.incorrect{
color : red;
}인증 번호 비교를 위한 메서드를 추가합니다.
해당 메서드는 인증 번호 입력란에 데이터를 입력한 뒤 마우스로 다른 곳을 클릭 시에 실행이 됩니다.
/* 인증번호 비교 */
$(".mail_check_input").blur(function(){
})편의를 위해서 아래의 변수를 선언 및 할당하는 코드를 추가해줍니다.
- inpuCode: 사용자가 입력하는 인증 번호입니다.
- checkResult: 추가한 span태그입니다.
/* 인증번호 비교 */
$(".mail_check_input").blur(function(){
var inputCode = $(".mail_check_input").val(); // 입력코드
var checkResult = $("#mail_check_input_box_warn"); // 비교 결과
});인증 번호 일치 여부에 따라 다른 코드가 실행되도록 if문을 추가합니다.
비교값은 inputCode == code로 하였습니다.
/* 인증번호 비교 */
$(".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");
}
});3. 테스트
이메일로 전송된 인증 번호
인증 번호가 일치하지 않을 경우
인증 번호가 일치할 경우
'😎 STS3 Spring 쇼핑몰' 카테고리의 다른 글
| STS3 쇼핑몰 프로젝트[6] 회원 가입 유효성 검사(1) (0) | 2022.07.31 |
|---|---|
| STS3 쇼핑몰 프로젝트[5] 주소록 API 연동 (0) | 2022.07.31 |
| STS3 쇼핑몰 프로젝트[4] 인증 번호 이메일 전송(2) (0) | 2022.07.31 |
| STS3 쇼핑몰 프로젝트[4] 인증 번호 이메일 전송(1) (0) | 2022.07.31 |
| STS3 쇼핑몰 프로젝트[3] 아이디 중복 검사 기능 (0) | 2022.07.31 |
