이메일 입력 필드를 위한 한글 및 공백 제거 jQuery

2025. 4. 21. 16:36·Programing/javascript
반응형

이메일 주소는 일반적으로 알파벳, 숫자, 특수기호(@, ., _) 등으로 구성되며, 한글이나 공백이 포함되어서는 안 됩니다. 이를 보완하기 위해 입력 중 실시간으로 한글 및 공백을 제거하는 기능을 구현할 수 있습니다. 본 글에서는 .onlymail 클래스를 이용하여 이메일 입력 필드에서 한글 및 공백을 제거하는 jQuery 코드를 살펴보겠습니다.


✨ 코드 원문

$(document).on('keyup focusout', '.onlymail', function(){
    // 한글(유니코드)과 공백 삭제
    $(this).val($(this).val().replace(/[\uAC00-\uD7AF\u3130-\u318F\u1100-\u11FF\s]/gi,"")); 
});

✨ 주요 기능 설명

1. 대상 요소 바인딩

  • .onlymail 클래스를 가진 모든 input 요소에 대해 keyup 또는 focusout 시 필터링을 수행합니다.
  • 동적 요소에도 대응할 수 있도록 $(document).on()을 사용합니다.

2. 정규표현식을 통한 한글 및 공백 제거

.replace(/[\uAC00-\uD7AF\u3130-\u318F\u1100-\u11FF\s]/gi, "")
  • \uAC00-\uD7AF: 완성형 한글
  • \u3130-\u318F: 호환 자모 영역
  • \u1100-\u11FF: 자모 구성 요소
  • \s: 공백 문자 (띄어쓰기, 탭 등)
  • 이 정규식을 통해 이메일 입력에 불필요하거나 부적절한 문자를 실시간으로 제거합니다.

✨ 사용 예시

<input type="text" class="onlymail" placeholder="이메일 주소를 입력하세요" />
  • 위 input 필드에 사용자가 한글이나 공백을 입력하려고 하면 자동으로 제거됩니다.

✨ 활용 팁

  • 이메일 입력 필드 유효성 검사는 해당 필터 외에도 별도 pattern 또는 정규식 체크가 필요합니다.
  • input 이벤트를 추가로 활용하면 모바일 환경에서도 보다 안정적인 작동을 기대할 수 있습니다.

✨ 결론

이메일 입력 시 발생할 수 있는 한글 및 공백 입력을 방지하는 것은 기본적인 입력 검증 절차 중 하나입니다. jQuery를 이용해 실시간으로 이러한 문자들을 제거함으로써 사용자로 하여금 보다 정확한 이메일 정보를 입력하게 유도할 수 있습니다.

반응형

'Programing > javascript' 카테고리의 다른 글

URL 형식 유효성 검사 함수  (0) 2025.04.22
휴대폰 번호 유효성 검사 JavaScript  (1) 2025.04.21
긴 문자열 중간 생략을 위한 JavaScript 함수  (0) 2025.04.21
금액을 10원 단위로 반올림, 올림, 내림하는 JavaScript  (0) 2025.04.21
가격 입력 필드를 위한 jQuery 자동 포맷팅 및 제한(금액만)  (0) 2025.04.21
숫자와 쉼표(,)만 입력 가능하게 하는 jQuery 입력 필터링  (0) 2025.04.21
한글만 입력 가능한 입력 필터링 jQuery (한글 + 영문 추가)  (1) 2025.04.21
자바스크립트 Flyweight Pattern  (1) 2025.04.19
'Programing/javascript' 카테고리의 다른 글
  • 긴 문자열 중간 생략을 위한 JavaScript 함수
  • 금액을 10원 단위로 반올림, 올림, 내림하는 JavaScript
  • 가격 입력 필드를 위한 jQuery 자동 포맷팅 및 제한(금액만)
  • 숫자와 쉼표(,)만 입력 가능하게 하는 jQuery 입력 필터링
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (422) N
      • 금융 (40) N
      • Programing (268) N
        • Algorithm (28) N
        • API (2)
        • javascript (121) N
        • CSS (6)
        • HTML (10)
        • PHP (15) N
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (17)
        • MS-SQL (1)
        • MySQL (12)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (5)
      • IT 일반 (15)
      • 리뷰 (36) N
        • Book (17) N
        • 제품 (1)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (31) N
        • 회고 (2) N
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    위시리스트
    jsp
    IT 관련
    자바스크립트
    자바스크립트유틸
    Java
    자바
    IT·컴퓨터
    기초
    SQL
    JavaScript
    블로그
    php
    It
    읽고 싶은 책
    IT블로그
    iT's MY LiFE
    사고 싶은 책
    js패턴
    디자인패턴
  • hELLO· Designed By정상우.v4.10.3
Dongkkase
이메일 입력 필드를 위한 한글 및 공백 제거 jQuery
상단으로

티스토리툴바