투케이2K

504. (javaScript) [간단 소스] 자바스크립트 이메일 형식 유효성 검증 정규식 생성 및 test() 함수 사용해 정규식 일치 여부 확인 - @ 뒤에 점 다중 허용 처리 본문

JavaScript

504. (javaScript) [간단 소스] 자바스크립트 이메일 형식 유효성 검증 정규식 생성 및 test() 함수 사용해 정규식 일치 여부 확인 - @ 뒤에 점 다중 허용 처리

투케이2K 2026. 3. 6. 20:20
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / 정규식 / 이메일 검증 / test()


- 사전) 자바스크립트 test() 함수 간략 설명 : 

  >> test() 함수는 JavaScript 정규식(RegExp) 객체의 메서드로, 문자열이 해당 정규식 패턴과 일치하는지 (true/false) 를 반환하는 함수입니다

  >> test() 함수는 문자열이 정규식에 맞으면 true , 맞지 않으면 false 를 반환합니다

  >> test() 함수 내부 동작 방식 : 

    - 문자열을 하나씩 읽음
    - 정규식 패턴이 처음부터 끝까지 만족하는지 확인
    - 조건을 만족하면 true
    - 하나라도 불일치하면 false

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
          console.log("");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("");

          try {

            // -------------------------------------
            // ✅ 이메일 검증을 하기 위한 정규식 선언
            // -------------------------------------            
            // ^[A-Za-z0-9._%+-]+ : A-Za-z0-9 = 영문 대소문자와 숫자 / ._%+- = 마침표(dot), 밑줄, 퍼센트, 플러스, 하이픈 허용 / + = 1회 이상 반복 (최소 1자 이상이어야 함)
            // -------------------------------------
            // (?:[A-Za-z0-9_-]+\.){1,2} : 도메인 라벨 + 점(.) 이 1번 또는 2번 반복 (즉, domain.(1개) 또는 sub.domain.(2개)까지만 허용)
            // -------------------------------------
            // [A-Za-z]{2,}$ : 최종 TLD(예: com, kr, museum)는 최소 2자 알파벳
            // -------------------------------------            
            const emailRegExp = /^[A-Za-z0-9._%+-]+@(?:[A-Za-z0-9_-]+\.){1,2}[A-Za-z]{2,}$/;


            // -------------------------------------
            // 이메일 검증을 하기 위한 샘플 데이터 선언
            // ------------------------------------- 
            const emailArray = [            
              "twok@example.com",           // ✅ 점 1개
              "twok@sub.example.com",       // ✅ 점 2개              
              "twok@sub.example.test.com",  // ❌ 점 3개
              "twok@sub..example.com",      // ❌ 연속 점
              "twok@sub.example.c",         // ❌ (TLD 1 글자 / com, kr, museum 형식이 되어야함)
            ];


            // -------------------------------------
            // ✅ test() 함수를 사용해 문자열이 해당 정규식 패턴과 일치하는지 (true/false) 검증 수행
            // -------------------------------------            
            emailArray.forEach(s => {

              if (emailRegExp.test(s) == true){
                console.log(`✅ email : ${s} / return : ${emailRegExp.test(s)}`);
              }
              else {
                console.log(`❌ email : ${s} / return : ${emailRegExp.test(s)}`);
              }
              
            });


            // -------------------------------------
            // 로그 출력 샘플 첨부
            // -------------------------------------
            /*
            ✅ email : twok@example.com / return : true
            ✅ email : twok@sub.example.com / return : true
            ❌ email : twok@sub.example.test.com / return : false
            ❌ email : twok@sub..example.com / return : false
            ❌ email : twok@sub.example.c / return : false
            */
            // -------------------------------------

          }
          catch (exception) {
            console.error("");
            console.error("=========================================");
            console.error("[window onload] : [Exception] : 예외 상황 발생");
            console.error("-----------------------------------------");
            console.error(exception);
            console.error("=========================================");
            console.error("");

          }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

(java/자바) [유틸 파일] : getRegExpDetail 정규식 패턴 형식 검증 - 휴대폰 번호, 이메일, 주민번호, ip주소 등

https://kkh0977.tistory.com/4345

https://blog.naver.com/kkh0977/223143798563?trackingCode=blog_bloghome_searchlist


[Mac Os] [validator] : String 문자열 유효성 검증 모듈 사용해 Email 이메일 유효성 검증 - isEmail

https://kkh0977.tistory.com/5334

https://blog.naver.com/kkh0977/223342853687?trackingCode=blog_bloghome_searchlist


[라이브러리] [Web] [npm] validator 문자열 (String) 유효성 검증 라이브러리

https://kkh0977.tistory.com/5350

https://blog.naver.com/kkh0977/223343528525?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

506. (javaScript) [간단 소스] 자바스크립트 textarea 에 설정 된 fontSize 폰트 사이즈 확인 및 동적 style 스타일 지정 폰트 사이즈 변경  (0) 2026.03.10
505. (javaScript) 자바스크립트 navigator.connection 네트워크 품질 확인 및 img.src , fetch api 호출로 실제 네트워크 사용 가능 확인  (0) 2026.03.07
503. (javaScript) [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드  (0) 2026.03.03
502. (javaScript) [간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행  (0) 2026.03.03
501. (javaScript) [간단 소스] 자바스크립트 async await 사용해 new Promise 순차 대기 sleep 일정 시간 대기 동작 코드 작성  (0) 2026.03.02
'JavaScript' Related Articles more
Comments