[ javascript / ajax ]사용자 아이디 중복 검사, 이메일 중복 검사 로직

이벤트 핸들러 등록 부분 

// 사용자 아이디 유효성, 중복 검사 
$("#username").change(function(event) {
    checkDuplicateUsername($(this));
});

 

페이지 로드 시 이벤트가 등록 되도록 설정함. 

checkDuplicateUsername() 함수 호출 시 this 로 자기 자신의 element 를 넘겨주는 방식으로 작성 

 

해당 element 에서 필드의 아이디값, value 등을 추출하여 분기처리를 하기 위함. 

 

 

중복 검사 함수 로직 

function checkDuplicateUsername(element) {

	let username = element.val();

	if (!usernameRegTest(element, fieldId)) {
		return false;
	}

	$.ajax({
		url: "/member/username/check",
		type: "post",
		data: { username: username },
		dataType: "json",
		success: function(result) {

			if (result == 1) {
				$("#id_feedback").html(makeMessage(element, messageEx.dupe.username));
				$("#id_feedback").attr('color', '#dc3545');
				usernameCheck = false;

			} else {
				$("#id_feedback").html(makeMessage(element, messageEx.success.avail));
				$("#id_feedback").attr('color', '#2fb380');
				usernameCheck = true;
			}
		},
		error: function() {
			alert(messageEx.error);
		}
	})
}

 

 

usrename 정규식 체크 함수 

// 아이디 유효성 검사 
function usernameRegTest(usernameEl, username) {

	usernameCheck = false;

	if (!isRequired(username)) {
		$("#id_feedback").html('');
		return false;
	}

	if (!ckeckRegExp("username", username)) {
		$("#id_feedback").html(makeMessage(usernameEl, hintMsg.username));
		$("#id_feedback").attr('color', '#dc3545');
		usernameCheck = false;
		return false;
	}
	return true;
}