이메일 형식 확인하기

imjingu·2023년 8월 6일
js
0

개발공부

목록 보기
307/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        form 태그 관련
        이메일 형식 확인하기
        */
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.querySelector('input');
            const p = document.querySelector('p');

            const isEmail = (value) => { // 이메일인지 검사하는 함수
                // @ 앞 index가 1 보다 크고
                // split = 배열로 반환 @ 뒤에있는 문자열을 들고와 검사
                // @ 뒤의 '.' 인덱스가 1보다 커야함
                return(value.indexOf('@') > 1) && (value.split('@')[1].indexOf('.') > 1);
            }
            input.addEventListener('keyup', (event) => {
                const value = input.value; // event.currentTarget.value // 가능
                if (isEmail(value)) {
                    p.style.color = 'green'
                    p.textContent = `이메일 형식입니다: ${value}`;
                }
                else {
                    p.style.color = 'red'
                    p.textContent = `이메일 형식이 아닙니다: ${value}`;
                }
            })
        });
    </script>
    <input type="text">
    <p></p>
</body>
</html>

profile
imjingu
이전 포스트

keyCode 속성 활용 - 별 움직이기

다음 포스트

드롭다운 목록 활용하기

0개의 댓글