Javascript blur 이벤트로 이메일 입력 후 형식 체크 (jquery 활용)

 

 

#1 HTML 코드

원하는 대로 작성한다.

기본적으로 input 태그만 사용해도 된다.

 

<input type="text" title="email" name="email" id="email">
<div class="count">
    <em id="emailCnt"></em>/50
</div>

 

 

 

 

#2 javascript 코드

입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면

textMaxLengthCheck 함수를 함께 사용하고

이런 기능이 필요없다면 메일 체크 코드만 사용하면 된다.

 

================================================================
================================================================
================================================================
//email validation check
function emailChk(email) {
    const regExp = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.[a-zA-Z]{2,4}$/;
    if(!regExp.test(email)){
        alert("이메일 형식이 아닙니다.");
        return false;
    }
    return true;
}
        
/**
 * 최대 글자수 실시간 체크 후 dispalyId 에 글자수 표시
 * @param str targetId(체크 대상)
 * @param int maxLength(최대 글자수)
 * @param str dispalyId(표시 대상)
 * 사용 안해도 됨
 */
function textMaxLengthCheck(targetId, maxLength, dispalyId) {
	let thisTxt = $(targetId).val();
	
	if (thisTxt.length > maxLength) {
		thisTxt = thisTxt.substring(0, maxLength);
		$(targetId).val(thisTxt);
	}

	$(dispalyId).html(thisTxt.length);
}
================================================================
================================================================
================================================================



//이메일 입력 후 input 태그를 빠져나올 때 형식 체크
$('#email').on("blur", function () {
	if(!emailChk($(this).val())){
		$(this).val('');
	}
});

//이메일 글자수 check 50 optional
$("#email").on("keyup", function() {
	textMaxLengthCheck("#email", 50, "#emailCnt");
});

 

 

 

Enjoy your day ~ !!!