[Ajax] 이메일 중복확인

로직

- '이미' 정규식 표현을 사용하여 이메일 유효성검사가 되어 있는 <span/>태그에 중복확인 로직 추가

- Ajax를 이용

- cnt가 0 이면 사용 가능한 이메일,  1이면 이미 존재하는 이메일

- ajax 통신은 유효성이 검사된 이메일에만 불러오기

 

코드

- Mapper.java

email이 존재하면 1이 출력, email이 존재하지 않으면 0이 출력

@Select("select COUNT(email) from dbelle.user where email=#{email}")
int emailCheck(String email);

 

- Service.java

email이 존재하면 cnt : 1

email이 존재하지 않으면 cnt : 0

public int emailCheck(String email) {

  int cnt = userMapper.emailCheck(email);
  System.out.println("cnt:" + cnt);

  return cnt;
}

 

- Controller.java

@RestController
public class EmailController {

	@Autowired
	private UserService userService;
	
	@PostMapping(value="/email/emailCheckProcess")
	@ResponseBody
	public int emailCheck(@RequestParam("email") String email)  {
		
		int cnt = userService.emailCheck(email);
		
		return cnt;
		
	}
}

 

- .jsp

<div class="col-12">
    <div class="form-floating">
        <input type="email" class="form-control" id="email" name="email placeholder="Your Email" value="" required>
              <label for="email">Your Email</label>
    </div>
</div>
<span id="vaildEmail"></span>

 

-.js

$(function() {

	let emailValidCheck = document.getElementById('email');
    
	emailValidCheck.addEventListener('focusout', function(event) {
		setValidEmail(event.target.value);
	});
}


//이메일 유효성 검사
function setValidEmail(email) {
    if (!email_check(email)) {
        $("#vaildEmail").text('잘못된 형식의 이메일 주소입니다').css("color", "red");
        console.log("정규표현식에 맞지 않음 incorrect");
        return false;

    } else {
        $("#vaildEmail").text('유효한 형식의 이메일 입니다.').css("color", "green");
        checkEmail();
        console.log("정규표현식에 맞음 correct");
        return true;	
    }
}

function email_check(email) {
    console.log(email);
    let regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    return (email != '' && email != 'undefined' && regex.test(email));

}


//이메일 중복검사
function checkEmail() {
    var email = $('#email').val(); //email값이 "id"인 입력란의 값을 저장
    
    $.ajax({
        url: '/email/emailCheckProcess', //Controller에서 요청 받을 주소
        type: 'POST', //POST 방식으로 전달
        data: {
             "email": email
         },

        success: function(cnt) { //컨트롤러에서 넘어온 cnt값을 받는다 
            if (cnt == 0) { //cnt가 1이 아니면(0일 경우) -> 사용 가능한 아이디 
                $("#vaildEmail").text("사용할 수 있는 아이디 입니다.").css("color", "green");
                console.log(email);

            } else { // cnt가 1일 경우 -> 이미 존재하는 아이디
                $("#vaildEmail").text("이미 존재하는 이메일 입니다.").css("color", "red");
                alert("아이디를 다시 입력해주세요");
                $('#email').val('');
            }
        },
        error:function(request,status,error){
              const errorMsg = JSON.parse(request.responseText);
              alert("ERROR CODE: "+request.status+"\n"+
                    "ERROR MESSAGE: "+errorMsg.message+"\n"+
                    "상태가 지속될 경우 관리자에게 문의해주세요");
            }
        }
    );
}

 

예시