javascript - 체크 - 자바스크립트 메일 보내기




자바 스크립트에서 이메일 주소를 확인하는 방법은 무엇입니까? (20)

JavaScript로 전자 메일 주소의 유효성을 검사하려면 어떻게해야합니까?


TLD의 존재를 확인하지 않는 솔루션은 불완전합니다.

이 질문에 대한 거의 모든 대답은 Regex를 사용하여 전자 메일 주소를 확인하는 것이 좋습니다. Regex는 기본적인 유효성 검사에만 유용하다고 생각합니다. 전자 메일 주소의 확인 유효성 검사는 실제로 두 가지 개별 문제입니다.

1- 전자 메일 형식 유효성 검사 : 전자 메일이 RFC 5322의 전자 메일 형식 및 패턴을 준수하는지, 실제로 TLD가 있는지 확인하십시오. 모든 유효한 TLD 목록은 here 에서 찾을 수 here .

예를 들어 주소 [email protected] 는 정규식을 전달하지만 ccc 는 IANA의 최상위 도메인이 아니므로 유효한 전자 메일이 아닙니다.

2- 실제로 이메일이 존재하는지 확인하기 : 이렇게 하려면 유일한 옵션사용자에게 이메일을 보내는 것 입니다.


HTML5 자체에는 전자 메일 유효성 검사가 있습니다. 브라우저가 HTML5를 지원하는 경우 다음 코드를 사용할 수 있습니다.

<form><input type="email" placeholder="[email protected]">
    <input type="submit">
</form>

jsFiddle 링크

HTML5 사양 :

유효한 전자 메일 주소 는 다음 ABNF의 email 과 일치하는 문자열로 유니 코드 문자 집합입니다.

email   = 1*( atext / "." ) "@" label *( "." label )
label   = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext   = < as defined in RFC 5322 section 3.2.3 >
let-dig = < as defined in RFC 1034 section 3.5 >
ldh-str = < as defined in RFC 1034 section 3.5 >

이 요구 사항은 RFC 5322를 고의적으로 위반 하는 것으로 전자 메일 주소에 대한 구문이 너무 엄격하고 ( "@"문자 앞에) 너무 모호하며 ( "@"문자 뒤에) 너무 느리거나 주석을 허용하지 않는 전자 메일 주소에 대한 구문을 정의합니다 , 공백 문자 및 대부분의 사용자에게 익숙하지 않은 방식으로 인용 된 문자열)을 여기에서 실제로 사용할 수 있습니다.

다음 JavaScript 및 Perl 호환 정규 표현식은 위의 정의를 구현 한 것입니다.

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

RFC를 준수하는 전자 메일 주소의 올바른 유효성 검사는 한 줄짜리 정규 표현식으로 달성 할 수있는 것이 아닙니다. PHP에서 찾은 최고의 솔루션을 가진 기사가 유효한 이메일 주소무엇입니까? . 분명히, 그것은 Java로 포팅되었습니다. 필자는이 기능이 너무 복잡하여 JavaScript에서 이식 및 사용이 불가능하다고 생각합니다. JavaScript / node.js 포트 : https://www.npmjs.com/package/email-addresses .

클라이언트에서 데이터의 유효성을 검사하지만 서버의 유효성을 다시 확인하는 것이 좋습니다. 이를 염두에두고 간단하게 문자열이 클라이언트에서 올바른 전자 메일 주소로 보이는지 확인하고 서버에서 엄격한 검사를 수행 할 수 있습니다.

문자열이 유효한 메일 주소와 같은지 확인하기 위해 사용하는 JavaScript 함수는 다음과 같습니다.

function looksLikeMail(str) {
    var lastAtPos = str.lastIndexOf('@');
    var lastDotPos = str.lastIndexOf('.');
    return (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2);
}

설명:

  • lastAtPos < lastDotPos : 마지막 @ 은 마지막 전이어야합니다 . 왜냐하면 @ 는 내가 아는 한 서버 이름의 일부가 될 수 없기 때문이다.

  • lastAtPos > 0 : 마지막 @ 앞에 무언가 (전자 메일 사용자 이름)가 있어야합니다.

  • str.indexOf('@@') == -1 : 주소에 @@ 이 없어야합니다. @ 가 전자 메일 사용자 이름의 마지막 문자로 표시 되더라도 " 주소에서 @ 와 마지막 @ 사이에 " 따옴표가 있어야합니다.

  • lastDotPos > 2 : 마지막 점 앞에 3 자 이상 있어야합니다 (예 : [email protected] .

  • (str.length - lastDotPos) > 2 : 두 문자 도메인을 형성하려면 마지막 점 다음에 충분한 문자가 있어야합니다. 대괄호가 필요한지 확실하지 않습니다.


나는 이것이 이것이 최상의 해결책이라는 것을 발견했다 :

/^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/

다음 형식을 허용합니다.

1.  [email protected]
2.  [email protected]
3.  [email protected]
4.  [email protected]
9.  #!$%&'*+-/=?^_`{}|[email protected]
6.  "()[]:,;@\\\"!#$%&'*+-/=?^_`{}| ~.a"@example.org
7.  " "@example.org (space between the quotes)
8.  üñîçøðé@example.com (Unicode characters in local part)
9.  üñîçøðé@üñîçøðé.com (Unicode characters in domain part)
10. Pelé@example.com (Latin)
11. δοκιμή@παράδειγμα.δοκιμή (Greek)
12. 我買@屋企.香港 (Chinese)
13. 甲斐@黒川.日本 (Japanese)
14. чебурашка@ящик-с-апельсинами.рф (Cyrillic)

그것은 분명히 다용도이며 중요한 anything.anything 형식을 여전히 시행하면서 모든 중요한 국제 문자를 허용합니다. RFC에 의해 기술적으로 허용 된 공백은 차단되지만 너무 희귀해서이 작업을 수행하게되어 기쁩니다.


두 번째로 전자 메일의 유효성을 검사하기 위해 정규 표현식을 사용하기로 결정한 것을 이해해야합니다. 아마도 좋은 생각이 아닙니다 . 일단 당신이 그 용어에 익숙해지면, 그곳에서 당신을 도울 수있는 많은 구현 있습니다. 이 기사는 그들을 멋지게 요약합니다.

간단히 말해서, 사용자가 입력 한 내용이 실제로 전자 메일인지 확실히 확인하는 유일한 방법은 실제로 전자 메일을 보내고 어떻게되는지 확인하는 것입니다. 그것 이외의 모든 것은 단지 추측입니다.


모든 이메일 주소는 'at'(즉, @) 기호를 포함합니다. 필요한 조건을 테스트합니다.

email.indexOf("@") > 0

더 복잡한 것은 신경 쓰지 마라. 이메일이 RFC- 구문 론적으로 유효한지 여부를 완벽하게 판단 할 수 있다고해도 그것이 그것을 제공 한 사람에게 속하는지 여부는 알려주지 않습니다. 그것이 정말로 중요합니다.

테스트하려면 검증 메시지를 보내십시오.


아마도 정규식을 사용하는 것이 가장 좋은 방법 일 것입니다. 당신은 here 에서 많은 시험을 볼 수있다 ( chromium 에서 취함)

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/;
    return re.test(String(email).toLowerCase());
}

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

var re = /^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i;

하지만 자바 스크립트 유효성 검사에만 의존해서는 안된다는 것을 명심하십시오. JavaScript는 쉽게 비활성화 될 수 있습니다. 이것은 서버 측에서도 검증되어야합니다.

위의 예는 다음과 같습니다.

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var 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;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>


와우, 복잡성이 많이 있습니다. 여러분이하고 싶은 것이 가장 명백한 구문 에러를 잡는 것이라면, 다음과 같이 할 것입니다 :

\[email protected]\S+

일반적으로 사용자가 만드는 가장 명백한 오류를 잡아 내고 양식이 대부분 옳다는 것을 확인합니다. 이것이 바로 JavaScript 유효성 검사의 전부입니다.


이 문제를 해결하기 위해 정말로 기대하고 있습니다. 그래서 위의 정규식 전자 메일 검증을 수정했습니다.

Wikipedia Email Address 에서 예제를 전달하십시오.

그리고 here 결과를 볼 수 here .


이 작업을 수행:

[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?

왜? RFC 2822를 기반으로 합니다.이 표준은 모든 전자 메일 주소가 준수 해야하는 표준입니다.

흔히 데이터베이스에 전자 메일 주소를 저장할 때 소문자로 만들고 실제로 정규 표현식은 대소 문자를 구분하지 않을 수 있습니다. 이 경우 약간 짧습니다.

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

다음은 JavaScript에서 사용되는 예제입니다 (끝에 대소 문자를 구분하지 않는 플래그 i 가 있음).

var emailCheck=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;
console.log( emailCheck.test('[email protected]') );

참고 :
기술적으로는 일부 전자 메일은 인용 부호 안에 이스케이프 문자가있는 @ 기호 앞에 따옴표를 포함 할 수 있습니다 (따라서 전자 메일 사용자는 불쾌 할 수 있으며 따옴표로 묶여있는 한 @"..." 와 같은 내용을 포함 할 수 있음). 누구도이 모든 것을 해낸다! 그것은 쓸모가 없습니다. 그러나 실제 RFC 2822 표준에 포함되어 있으며 여기서는 생략되어 있습니다.

자세한 정보 : http://www.regular-expressions.info/email.html


이것이 node-validator 일입니다 :

/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~][email protected](?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/

이것이 올바른 RFC822 버전입니다.

function checkEmail(emailAddress) {
  var sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  var sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  var sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  var sQuotedPair = '\\x5c[\\x00-\\x7f]';
  var sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d';
  var sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22';
  var sDomain_ref = sAtom;
  var sSubDomain = '(' + sDomain_ref + '|' + sDomainLiteral + ')';
  var sWord = '(' + sAtom + '|' + sQuotedString + ')';
  var sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*';
  var sLocalPart = sWord + '(\\x2e' + sWord + ')*';
  var sAddrSpec = sLocalPart + '\\x40' + sDomain; // complete RFC822 email address spec
  var sValidEmail = '^' + sAddrSpec + '$'; // as whole string

  var reValidEmail = new RegExp(sValidEmail);

  return reValidEmail.test(emailAddress);
}

입력 문자열이 전자 메일인지 확인하기 위해 정규식을 사용해서는 안됩니다. 너무 복잡하고 모든 경우를 다루지는 않습니다.

이제는 사례의 90 % 만 커버 할 수 있으므로 다음과 같이 작성하십시오.

function isPossiblyValidEmail(txt) {
   return txt.length > 5 && txt.indexOf('@')>0;
}

당신은 그것을 수정할 수 있습니다. 예를 들어 'aaa @'가 유효합니다. 그러나 전반적으로 당신은 요지를 얻습니다. 과장하지 마세요 ... 간단한 90 % 솔루션은 작동하지 않는 100 % 솔루션보다 낫습니다.

세상은 더 간단한 코드가 필요합니다 ...


전자 메일 유효성 검사기를 100 % 정확하게 얻는 것은 어렵습니다. 올바른 방법은 계정에 테스트 이메일을 보내는 것입니다. 즉, 합리적인 것을 얻는 데 도움이되는 몇 가지 기본 점검이 있습니다.

개선해야 할 몇 가지 사항 :

RegExp 대신 다음과 같이 regexp 을 작성하십시오.

if (reg.test(/@/))

둘째, @ 기호 다음에 마침표가 있는지 확인하고 @s와 마침표 사이에 문자가 있는지 확인하십시오.


squirtle 과 달리, 여기에 복잡한 솔루션이 있지만 전자 메일의 유효성을 올바르게 검사 할 수 있습니다.

function isEmail(email) { 
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
} 

다음과 같이 사용하십시오.

if (isEmail('[email protected]')){ console.log('This is email is valid'); }

Wikipedia 표준 메일 구문 :

https://en.wikipedia.org/wiki/Email_address#Examples https://fr.wikipedia.org/wiki/Adresse_%C3%A9lectronique#Syntaxe_exacte

function validMail(mail)
{
    return /^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()\.,;\[email protected]\"]+\.{0,1})+([^<>()\.,;:\[email protected]\"]{2,}|[\d\.]+))$/.test(mail);
}

// VALID MAILS

validMail('[email protected]') // Return true
validMail('[email protected]') // Return true
validMail('[email protected]') // Return true
validMail('[email protected]') // Return true
validMail('[email protected]') // Return true
validMail('user+mailbox/[email protected]') // Return true
validMail('"very.(),:;<>[]\".VERY.\"[email protected]\\ \"very\".unusual"@strange.example.com') // Return true
validMail('!#$%&\'*+-/=?^_`.{|}[email protected]') // Return true
validMail('"()<>[]:,;@\\\"!#$%&\'-/=?^_`{}| ~.a"@example.org') // Return true
validMail('"[email protected]"@example.com') // Return true
validMail('"Fred Bloggs"@example.com') // Return true
validMail('"Joe.\\Blow"@example.com') // Return true
validMail('Loïc.Accentué@voilà.fr') // Return true
validMail('" "@example.org') // Return true
validMail('[email protected][IPv6:2001:DB8::1]') // Return true

// INVALID MAILS

validMail('Abc.example.com') // Return false
validMail('[email protected]@[email protected]') // Return false
validMail('a"b(c)d,e:f;g<h>i[j\k][email protected]') // Return false
validMail('just"not"[email protected]') // Return false
validMail('this is"not\[email protected]') // Return false
validMail('this\ still\"not\\[email protected]') // Return false
validMail('[email protected]') // Return false
validMail('[email protected]') // Return false

이 테스트 표시 : https://regex101.com/r/LHJ9gU/1


이제까지 RFC5322로 확인한 최고의 정규 표현식

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])+


정규식 업데이트 2018! 이 시도

let val = '[email protected]';
if(/^[a-z0-9][a-z0-9-_\.][email protected]([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(val)) {
   console.log('passed');
}

타이프 스크립트 버전 완성

//
export const emailValid = (val:string):boolean => /^[a-z0-9][a-z0-9-_\.][email protected]([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(val);

자세한 정보 https://git.io/vhEfc


정규 표현식에 대한 지식이 그렇게 좋지 않습니다. 그래서 일반 구문을 먼저 간단한 정규 표현식으로 검사하고 이후에 다른 함수와 더 구체적인 옵션을 확인합니다. 이것은 최고의 기술 솔루션이 아닐 수도 있지만,이 방법을 사용하면 더욱 유연하고 신속 해집니다.

내가 만났던 가장 일반적인 오류는 공백 (특히 시작과 끝 부분)과 때로는 이중 점입니다.

function check_email(val){
    if(!val.match(/\[email protected]\S+\.\S+/)){ // Jaymon's / Squirtle's solution
        // Do something
        return false;
    }
    if( val.indexOf(' ')!=-1 || val.indexOf('..')!=-1){
        // Do something
        return false;
    }
    return true;
}

check_email('[email protected]'); // Returns false
check_email('[email protected]'); // Returns false
check_email(' [email protected]'); // Returns false
check_email('[email protected]'); // Returns true

다음은 정규식을 사용하여 전자 메일 주소의 유효성을 검사하는 방법에 대한 매우 훌륭한 토론입니다. " http://fightingforalostcause.net/misc/2006/compare-email-regex.php "

다음은 자바 스크립트와 호환되는 현재 최상위 표현식입니다.

/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i




email-validation