> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 RegExp를 사용하여 이메일 주소를 확인하는 방법은 무엇입니까?

JavaScript에서 RegExp를 사용하여 이메일 주소를 확인하는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-09-09 23:49:02
앞으로
901명이 탐색했습니다.

如何在 JavaScript 中使用 RegExp 验证电子邮件地址?

입력란에 이메일을 입력할 때 누구나 실수할 수 있습니다. 따라서 사용자가 유효한 이메일 문자열을 입력했는지 확인하는 것은 개발자의 책임입니다. 이메일 주소를 검증하는 데 사용할 수 있는 라이브러리가 많이 있으며, 이를 다양한 JavaScript 프레임워크와 함께 사용할 수 있지만 일반 JavaScript에서는 사용할 수 없습니다. 그러나 라이브러리를 사용하려면 CDN을 사용해야 합니다.

여기에서는 정규식을 사용하여 일반 JavaScript로 이메일 주소를 확인합니다.

예제 1에 사용된 정규식

예제 1에서는 다음 정규식 패턴을 사용하여 이메일의 유효성을 검사했습니다.

으아아아

사용자는 아래에서 위 정규 표현식에 대한 설명을 따를 수 있습니다.

  • ^ - 문자열의 시작 부분입니다.

  • [a-z0-9]+ - 문자열 시작 부분의 a~z와 0~9 사이의 모든 문자.

  • @ - 문자열에는 일부 영숫자 문자 뒤에 "@" 문자가 포함되어야 합니다.

  • [a-z]+ - 문자열에서 "@" 문자 다음에는 a와 z 사이에 문자가 하나 이상 있습니다.

  • . – 이메일에는 점, 일부 문자, "@" 문자가 와야 합니다

  • [a-z]{2,3}$ - 문자열 끝에 2~3개의 알파벳 문자가 포함되어야 합니다. '$'는 문자열의 끝을 나타냅니다.

예 1

아래 예에서는 사용자가 버튼을 클릭하면 verifyEmail() 함수가 호출됩니다. verifyEmail() 함수에서는 JavaScript의 Prompt() 메서드를 사용하여 사용자의 이메일 입력을 가져옵니다.

이후 위 구문에 설명된 대로 정규 표현식을 생성했습니다. 우리는 정규식을 사용하여 이메일이 정규식과 일치하는지 여부에 따라 부울 값을 반환하는 test() 메서드를 통해 사용자의 이메일 입력을 테스트합니다.

으아아아

예제 2에 사용된 정규 표현식

예 2에서는 이메일의 유효성을 검사하기 위해 다음 정규식 패턴을 사용했습니다.

으아아아

사용자는 아래에서 위 정규 표현식에 대한 설명을 따를 수 있습니다.

  • S+ - 모든 영숫자 단어를 나타냅니다.

  • . – 점 문자를 나타냅니다.

기본적으로 위 패턴은 word@word.word 유형의 이메일 주소와 일치합니다.

예 2

아래 예에서는 HTML을 사용하여 이메일 입력을 만들었습니다. 사용자는 입력 필드에 이메일을 입력할 수 있습니다. 입력에 이메일을 입력한 후 사용자는 submitEmail() 함수를 호출하는 "입력한 이메일 확인" 버튼을 클릭해야 합니다.

submitEmail() 함수에서는 위의 정규식과 test() 메서드를 사용하여 사용자가 입력한 이메일 문자열을 확인합니다.

출력에서는 사용자가 다양한 이메일을 입력하고 출력을 관찰할 수 있습니다.

으아아아

정규식을 사용하여 이메일 문자열의 유효성을 검사하는 방법을 배웠습니다. 초보자가 이메일에 대한 정규식을 만드는 방법을 이해할 수 있도록 두 가지 정규식을 보고 설명했습니다.

또한 개발자는 필요에 따라 이메일 주소의 유효성을 검사하기 위해 사용자 정의 정규식을 만들 수 있습니다.

위 내용은 JavaScript에서 RegExp를 사용하여 이메일 주소를 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿