회원가입_이메일 중복확인 구현 ajax/javascript

개인 복습,기록용

 <div class="form-group row">
        <div class="col-sm-6 mb-3 mb-sm-0">
                <input type="email" class="form-control form-control-user" id="email"
                name ="email"   placeholder="이메일">
                <p id="emailContent">4-12자/영문 소문자(숫자 조합 가능)</p>
       </div>
       <div class="col-sm-6">
                 <input type="button" class="form-control form-control-user"
                 id="emailCk" value="이메일 중복 확인" onclick="popup();" >
                  <input type= "hidden" id ="emailcheck" name="emailcheck">
                                    
         </div>
 </div>

html 부분

1. 이메일 중복 확인 버튼에 onclick을 걸어둔다 

2. 중복확인 여부를 확인 할 수 있게 input type="hidden" 으로 숨겨둔다. 

 

 

function popup(){
			var userid = $("#email").val();
			var regEmail = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
			if(userid.length<1){
				alert("이메일을 입력하세요.");
				
			}else if(!regEmail.test(userid)){
				alert("이메일 형식이 아닙니다.");
			}else{
				$.ajax({
					url : "/admin/member/check-email",
					type : "post",
					dataType : "json",
					data : {"email" : $("#email").val()},
					success : function(data){
						if(data>0){
							$("#emailContent").html('존재하는 이메일입니다. 다시 입력해주세요.');
							$("#emailContent").css('color','red');
							$("input[name=emailcheck]").val('');
						}else{
							$("#emailContent").html('사용가능 한 이메일입니다.');
							$("#emailContent").css('color','blue');
							$("input[name=emailcheck]").val('y');
						}
					}
					
				})
				
			}
			
		}

javascript > jquery 부분

 

3. 이메일 값이 제대로 입력된것을 확인하면 ajax로 작성한 email란에 작성했던 email값을 넘긴다. 

4. url은 controller에서 설정한 api로 기재한다.

 

@ResponseBody
@PostMapping("check-email")
public int register(@RequestParam String email) throws Exception {
		log.info("아이디 중복 확인, email = {}",email);
		Integer result = memberService.checkEmail(email);
		
		return result;
}

Controller 코드

*ajax에서 type : post로 넘겼으니 PostMapping으로 받는다. 

 

@Override
public Integer checkEmail(String email) {
		log.info("아이디 중복 확인(serviceImpl)");
		
		return memberDao.checkEmail(email);
}

Service 코드

 

//이메일 중복 확인 
Integer checkEmail(String email);

Mapper interface 코드

 

<select id = "checkEmail" parameterType="string" resultType="integer">
		select count(*) from adminMember
		where email = #{email}
</select>

mapper.xml 코드