반응형
[javascript] input 이메일 유효성 체크
이메일을 작성하는 input란에 내용을 넣을 때, 이메일이 형식에 맞게 작성되어있는 지
확인할 수 있도록 input 아래에 에러 메세지를 넣어달라는 요청이 있었습니다.
먼저 <head></head> 사이에 jquery 플러그인을 넣어주시고
그 다음 html 안에 내용을 작성합니다.
<input type="email" placeholder="이메일" name="mail" id="mail" maxlength="30">
<div id="error_mail" class="result-email result-check"></div>
내용을 다 작성하였다면 다음은 javascript 차례인데요,
</body> 전에 아래 스크립트를 작성합니다.
function email_check( email ) {
var 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));
}
$("input[type=email]").blur(function(){
var email = $(this).val();
if( email == '' || email == 'undefined') return;
if(! email_check(email) ) {
$(".result-email").text('이메일 형식으로 적어주세요');
$(this).focus();
return false;
}else {
$(".result-email").text('');
}
});
이렇게 내용을 작성하면 이메일 형식 (ex. test@test.com)이 아닐 경우에는
하단에 '이메일 형식으로 적어주세요' 라는 에러 메세지가 뜨게 됩니다.
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] 모바일SMS 문자 보내기 (0) | 2021.03.16 |
|---|---|
| [javascript] 현재 시간 select로 잡기 (0) | 2020.07.16 |
| [javascript] 자동롤링되는 실시간검색어 만들기 (2) | 2018.05.18 |
| [javascript] on,off 스위치 만들기 (토글버튼: Togglebutton) (4) | 2017.08.21 |
| [javascript] slideup 효과로 상단배너 숨기기 (0) | 2017.07.26 |
