자바스크립트 이메일 검증 - 자바스크립트 강좌 8강
이번 강좌에서는 사용자가 작성한 폼 값에서 이메일 값을 검증하는 예제를 작성해보겠습니다.
이 강좌를 보기위해서는 자바스크립트 폼 검증 관련 사전지식이 있어야 합니다.
자바스크립트 폼 검증 강좌는 이전 강좌를 참고하시길 바랍니다.
※이메일 유효성 검증이란?
사용자가 입력한 이메일 정보를 서버사이드로 전송을 하기 전에 입력한 값이 이메일 형식에 맞는지 검사하는 과정입니다.
폼검증 예제)
1. 본문코드
<body>
<form method="post" name="inputForm" action="action.html">
<fieldset>
<legend>1.이메일주소</legend>
<input type="text" name="inputEmail" id="inputEmail">
</fieldset>
<input type="button" onclick="emailcheck()" value="완료">
</form>
</body>
코드설명)
이메일 검증을 위한 최소 입력 폼 코드입니다.
완료버튼을 클릭하면 적절한 이메일 주소인지 검사를 하고 폼 전송을 시작합니다.
2. 스크립트 코드
<script>
function emailcheck(){
//이메일 정규식
var regExp = /[0-9a-zA-Z][_0-9a-zA-Z-]*@[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+){1,2}$/;
var email = document.getElementById('inputEmail').value;
if(email.length == 0){
alert('이메일 값을 입력해 주세요.');
return;
}
//이메일 형식에 맞지않으면
if (!email.match(regExp)){
alert('올바른 이메일 주소가 아닙니다.');
return;
}else{
alert('입력하신 정보를 전송합니다.');
document.inputForm.submit();
}
}
</script>
코드설명)
(1)regExp 변수에 올바른 이메일 정규식 값을 입력합니다.
(2)입력한 이메일 값이 올바르지 않을 경우 메시지를 보여주고 메소드를 중단합니다.
이메일 정규식은 (숫자, 영문) @ (숫자, 영문) . (숫자, 영문) 형식인지 체크하는 식입니다.
결과)
다음 강좌에서는 자바스크립트 선택자와 제이쿼리 선택자를 비교하고 제이쿼리 사용법에 대해 알아보겠습니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 랜덤 숫자 예제 (0) | 2017.01.13 |
|---|---|
| 자바스크립트와 제이쿼리의 선택자 - 자바스크립트 강좌 9강 (2) | 2016.11.10 |
| 자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강 (0) | 2016.11.08 |
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |