JavaScript

[Javascript] 이메일 형식인지 확인하는 기능 만들기

teamnova 2022. 4. 7. 12:00
728x90

문자열이 이메일 형식인지 아닌지 확인하는 기능을 만들어보겠습니다.

 

이때 사용할 정규식은 다음과 같습니다.

^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$

 

 

이제 정규식을 활용해 버튼을 누르면 textarea에 작성한 문자열이 이메일형식인지 확인하는 기능을 만들어봅시다

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>이메일 형식 확인하기</title>

</head>
<body>

<textarea id="email" placeholder="이메일을 입력해주세요"></textarea>
<button onclick="check_email();">확인</button>

<script type="text/javascript">
    function check_email() {
        let input = document.getElementById("email").value

        let email_format = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
        if (email_format.test(input)) alert("이메일 입력 성공!");
        else {
            alert("잘못된 이메일 형식입니다");
            document.getElementById("email").value = "";
        }
    }
</script>
</body>
</html>