자바스크립트로 이메일 주소를 유효성 검사하는 방법은 무엇인가요?

이 질문의 답변은 community effort 입니다. 기존 답변을 수정하여 이 게시물을 개선하십시오. 새로운 답변이나 상호 작용은 현재 허용되지 않습니다.

자바스크립트에서 사용자 입력이 이메일 주소인지 확인하고 기본 오자를 방지하기 위해 서버에 보내거나 해당 이메일로 이메일을 보내기 전에 확인하고 싶습니다. 어떻게 이것을 달성할 수 있을까요?

답변 1

regular expressions를 사용하는 것이 아마도 가장 좋은 방법입니다. here에 대한 여러 테스트를 볼 수 있습니다 (chromium에서 가져옴).

const validateEmail = (email) => {

return String(email)

.toLowerCase()

.match(

/^(([^<>()[\]\\.,;:\s@]+(\.[^<>()[\]\\.,;:\s@]+)*)|(.+))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

);

};

유니코드를 받아 들이는 정규 표현식 예제입니다.

const re =

/^(([^<>()[\]\.,;:\s@\]+(\.[^<>()[\]\.,;:\s@\]+)*)|(\.+\))@(([^<>()[\]\.,;:\s@\]+\.)+[^<>()[\]\.,;:\s@\]{2,})$/i;

하지만 JavaScript 검증만 의존하면 안된다는 것을 염두에 두세요. JavaScript는 쉽게 비활성화될 수 있습니다. 서버 측에서도 유효성을 검증해야합니다.

위에서 설명한 것을 실제로 실행한 예시입니다.

const validateEmail = (email) => {

return email.match(

/^(([^<>()[\]\\.,;:\s@\]+(\.[^<>()[\]\\.,;:\s@\]+)*)|(\.+\))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

);

};

const validate = () => {

const $result = $('#result');

const email = $('#email').val();

$result.text('');

if (validateEmail(email)) {

$result.text(email + ' is valid :)');

$result.css('color', 'green');

} else {

$result.text(email + ' is not valid :(');

$result.css('color', 'red');

}

return false;

}

$('#email').on('input', validate);

Enter an email address:

답변 2

JavaScript를 사용하여 이메일 주소를 검증하는 방법은 다양합니다. 이메일 주소는 데이터의 유효성을 검증하는 중요한 요소입니다. 대부분의 웹사이트는 이메일 주소를 요구하며, 유요한 이메일 주소인지 확인하여 개인정보 보호나, 회원가입 등 다양한 용도로 사용하고 있습니다. 이번 글에서는 JavaScript를 이용하여 이메일 주소를 검증하는 방법에 대해 알아보겠습니다.

첫 번째 방법으로는 정규식을 사용하는 방법입니다. 정규식은 패턴 매칭을 사용하여 문자열의 유효성을 검증하는 데 이용됩니다. 이메일 주소의 정규식 패턴은 다음과 같습니다.

```

var emailPattern = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

```

위 코드에서 @ 앞부분에는 소문자, 숫자, 밑줄, 하이픈, 마침표를 사용할 수 있으며, @ 뒷부분에는 도메인 명이 올 수 있습니다. 이메일 주소는 최소 2자, 최대 6자의 알파벳과 마침표로 이루어져 있습니다. 이 정규식 패턴을 사용하여 이메일 주소를 검증할 수 있습니다.

다음으로는 이메일 주소 유효성을 검사하는 라이브러리를 사용하는 방법입니다. 대표적인 이메일 주소 유효성 검사 라이브러리로는 validator.js, email-validator-js, email-validator, emailjs-validate 등이 있습니다. 이러한 라이브러리를 사용하면 보다 쉽고 간편하게 이메일 주소를 검증할 수 있습니다.

마지막으로는 AJAX를 사용하여 서버 측에서 이메일 주소를 검증하는 방법입니다. AJAX를 사용하여 이메일 주소를 서버에 전송하고, 서버측에서 이메일 주소의 유효성을 검증한 후, 결과를 반환합니다. 이 방법은 서버 측에서 이메일 주소 유효성을 검증하기 때문에 더욱 정확한 결과를 얻을 수 있습니다.

이메일 주소를 검증하는 방법은 다양하지만, above에서 소개된 방법이 가장 일반적이고 쉽게 이용할 수 있는 방법입니다. 리액트, 앵귤러, 노드, exoress, nextjs, gatsbyjs, vue, nuxt와 같은 자바스크립트 프레임워크로 구현된 웹사이트나 모바일 애플리케이션에서 이메일 주소를 검증하면서 확인해 보세요.