[JavaScript] 정규식 이메일 주소 체크

회원가입 양식을 만들 때 필요할 가능성이 있다.

html5 input type을 email로 설정하면 알아서 될지도 모르지만, 

이 경우는 아마도 form이 submit 되는 경우만 해당될 것이다.

type을 text로 하거나 submit이 아닌 이벤트의 경우 정규식을 활용하는 것이 좋다.

html 태그 내에 pattern을 집어넣어 하는 방법도 있는 것 같은데 이것도 거의 정규식스러운 일이다.

(이 경우도 뭔가 submit이 발생해야 가능할 것 같은 느낌이 들었다.)

다음 예제는 form 태그 없이 그냥 버튼 클릭을 했을 때의 경우만 다룬다.

ooo@ooo.ooo 의 형식을 만족해야 통과하는 스크립트를 적용했다.

아마 form submit을 이용하는 경우 type="email" 을 적어주는 것만으로 해결이 될 수도 있다.

(지원되지 않는 브라우저가 있을 수는 있다.)

소스코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' placeholder='email' id='email'/>
<button id='submitButton'>submit</button>

<script>
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
$(document).ready(function(){
    $("#submitButton").click(function(){
        var email = $("#email").val();
        if(email.match(regExp)==null){
            alert("Please enter the correct email");
            $("#email").focus();
            return;
        }
        alert("good");
    });
});
</script>