티스토리 뷰

WEB/JavaScript

[JavaScript] 이메일 형식 체크 정규표현식

silverline79 2026. 1. 3. 16:00

1. 이메일 정규표현식 이해하기 📧

이메일 체크를 위한 표준적인 정규표현식은 다음과 같습니다.

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

 

이 기호들의 의미를 간단히 풀이하자면 이렇습니다.

  • ^ : 문장의 시작
  • [a-zA-Z0-9._%+-]+ : 아이디 부분 (영문, 숫자, 특수문자 허용)
  • @ : 반드시 @ 기호가 와야 함
  • \. : 점(.)이 와야 함 (그냥 .은 모든 문자를 뜻해서 \를 붙여 '마침표'임을 명시합니다)
  • [a-zA-Z]{2,} : 도메인 끝자리 (com, net 등 최소 2자 이상)
  • $ : 문장의 끝

2. 자바스크립트에서 사용하는 법: .test()

정규표현식 변수 뒤에 .test(검사할값)를 붙이면 결과가 true(합격) 또는 false(불합격)로 나옵니다.

const myEmail = "user@example.com";
const isValid = emailRegex.test(myEmail); 

console.log(isValid); // true

3. 실전 폼 적용 예제 🛠️

기존 폼에 이메일 검사 기능을 추가해 보겠습니다. 사용자가 입력한 값이 형식에 맞지 않으면 "올바른 이메일 형식이 아닙니다"라는 경고를 띄워줄 거예요.

 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이메일 유효성 검사</title>
    <style>
        .form-group { margin-bottom: 20px; max-width: 400px; }
        input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
        .error-msg { color: #e74c3c; font-size: 13px; margin-top: 5px; display: none; }
        .success-msg { color: #2ecc71; font-size: 13px; margin-top: 5px; display: none; }
        .submit-btn { padding: 10px 20px; background: #3498db; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>

    <form id="emailForm" class="form-group">
        <h3>회원가입</h3>
        <input type="text" id="userEmail" placeholder="이메일을 입력하세요 (example@abc.com)">
        <p id="emailError" class="error-msg">올바른 이메일 형식이 아닙니다.</p>
        <p id="emailSuccess" class="success-msg">멋진 이메일이네요!</p>
        <br>
        <button type="submit" class="submit-btn">가입하기</button>
    </form>

    <script>
        const emailForm = document.getElementById('emailForm');
        const userEmail = document.getElementById('userEmail');
        const errorMsg = document.getElementById('emailError');
        const successMsg = document.getElementById('emailSuccess');

        // 이메일 정규표현식
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        emailForm.addEventListener('submit', (e) => {
            const value = userEmail.value;

            if (!emailRegex.test(value)) {
                // 형식에 맞지 않을 때
                e.preventDefault(); // 전송 중단
                errorMsg.style.display = 'block';
                successMsg.style.display = 'none';
                userEmail.style.borderColor = '#e74c3c';
            } else {
                // 성공 시
                alert('가입 신청이 완료되었습니다!');
            }
        });

        // 실시간 체크 (입력할 때마다 검사)
        userEmail.addEventListener('input', () => {
            if (emailRegex.test(userEmail.value)) {
                errorMsg.style.display = 'none';
                successMsg.style.display = 'block';
                userEmail.style.borderColor = '#2ecc71';
            } else {
                errorMsg.style.display = 'none';
                successMsg.style.display = 'none';
                userEmail.style.borderColor = '#ccc';
            }
        });
    </script>
</body>
</html>

 

이메일 형식 체크 정규표현식.html
0.00MB

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript]슬라이드 이미지  (0) 2026.01.03
[JavaScript] 비밀번호가 8자 이상이고 특수문자가 포함여부 체크하기  (0) 2026.01.03
[JavaScript] 자주하는 질문 FAQ 아코디언 메뉴  (0) 2026.01.03
[JavaScript] 탭메뉴, 아코디언, 모달  (0) 2026.01.03
[JavaScript] 모달 팝업  (0) 2026.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함