Kontrollera e-postadress med JavaScript och reguljära uttryck

För ett tag sedan satte jag upp en Password Strength Checker med hjälp av JavaScript och reguljära uttryck. På samma not kan du också kontrollera strukturen för en e-postadress med samma metod för reguljära uttryck (regex).

Om ditt formulärelement har id = ”e-postadress” och du lägger till ett formulär onSubmit = ”return checkEmail ();“, Det här är en Javascript-funktion som du kan använda för att returnera en varning om e-postadressen har en giltig struktur eller inte:

function checkEmail() {
var email = document.getElementById('emailaddress');
var filter = /^(([^<>()[\]\\.,;:\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,}))$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}

Funktionen validerar innehållet i e-postmeddelandet till det i filtret. Om jämförelsen misslyckas dyker den upp en varning och återgår fokus till e-postadressfältet!

41 Kommentarer

  1. 1

    För formulär med flera e-postadresser skulle det vara bra att göra class = ”emailaddress”. Om du har prototype.js-biblioteket (http://www.prototypejs.org) på sidan kan du göra något liknande:

    var valid = true;
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    $$ ('. e-postadress'). vardera (funktion (e-post) {
    if (! filter.test (email.value)) {
    varning (? Ange en giltig e-postadress?);
    e-post. fokus;
    valid = false;
    }
    });
    retur giltig;

  2. 5
  3. 7

    Jag gillar idén, men jag skulle tveka att anta just detta regelbundna uttryck utan beskrivning av vilka lagliga e-postadresser den inte accepterar och vilka olagliga adresser den tillåter.

    För ett exempel på ett reguljärt uttryck som gör ett anständigt jobb tillsammans med en förklaring av vilka fall det inte täcker, se detta:

    http://www.regular-expressions.info/email.html

    Min personliga preferens är att täcka de flesta enkla fall och utfärda en varning för allt annat än att avvisa det. Om Bob verkligen vill ställa in bob@com.museum snarare än bob@museum.com, varför inte låta honom?

    • 8

      Hej Reg,

      Du kan testa Regex med hjälp av en Online Regex-testare.

      Det finns definitivt mycket mer som kan göras om du vill säkerställa en e-postadress är giltigt i enlighet med RFC.

      Det finns några skäl att inte tillåta någon att ange en ogiltig e-postadress:
      1. De kommer att bli irriterade på dig när e-postmeddelandet de förväntade sig inte kommer igenom - oavsett om det var ditt fel eller inte, adressen var felaktigt angiven.
      2. Om com.museum var en giltig domän och, låt oss säga, Yahoo! hanterade den - alla e-postadresser som studsade skulle ha en negativ inverkan på ditt företags rykte för e-postleverans. Detta kan leda till att all ditt företags e-post blockeras.
      3. Om din e-postleverantör tillät dig att komma in bob@com.museum, skulle du också betala för varje e-post som skickas till den e-postadressen tills de avslutar prenumerationen på adressen på grund av studsar. Jag skulle undvika ESP som tillåter en ogiltig e-postadress som den - de tar bara dina pengar!

      Tack för att du hälsade på!
      Doug

  4. 9
  5. 10

    Det finns mycket enklare sätt att skriva uttrycket:
    var regex = /^[a-z0-9\._-]+@([a-z0-9_-]+\.)+[a-z]{2,6}$/i;
    - Med den slutliga modifieraren / i behöver du inte ange versaler.
    - Jag känner inte till något TLD med siffror i den.
    På en sidoanteckning tillåter jag TLD med upp till 6 tecken; nya kommer regelbundet och du vet aldrig (ja, vissa framtida kan till och med ha siffror i det, jag vet).

  6. 11

    Hej där,

    Jag försöker använda detta i en befintlig form i realtid, men det verkar inte verifieras i realtid som din lösenordskontroll ...

    Eller är jag bara så clueless, och det fungerar inte för mig?

  7. 12

    btw, jag gillar verkligen vad du har på gång här, dina handledning är väldigt enkla, jag kommer definitivt att bokmärka den här ....

  8. 13
  9. 16
  10. 17

    Bara en liten korrigering: Det reguljära uttrycket har ett extra () + i slutet. Det ska stå:

    ^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$

    Med den första skulle alla längd-toppdomäner accepteras (vilket inte är i sig fel som andra har påpekat, men om det var avsikten kunde uttrycket förkortas).

  11. 18

    Kan du snälla förklara det vanliga uttrycket för den här koden och hur den fungerar? Också om .test - Är .test ett standarduttalande i javascript för att kontrollera saker som du gjorde i koden ovan?

  12. 19

    Detta är en kortkod för e-postuttryck-

    function validateEmail (id)
    {
    var emailPattern = /^ [aa-ZA-Z0-9._- ]+@ [aa-zA-Z0-9.- ]+. [aa-zA-Z] {2,4 $ /;
    returnera emailPattern.test (id);

    }
    Deepak Rai
    nasi

  13. 20

    Detta är en kortkod för e-postuttryck-

    function validateEmail (id)
    {
    var emailPattern = /^ [aa-ZA-Z0-9._- ]+@ [aa-zA-Z0-9.- ]+. [aa-zA-Z] {2,4 $ /;
    returnera emailPattern.test (id);

    }
    Deepak Rai
    nasi

  14. 21
  15. 22
  16. 23

    Tack, men det finns ett fel i denna regex. Jag är inte en regexexpert, men jag försökte e-post:

    test test

    och det passerade regex ... Jag märkte att det saknas att undkomma "." så ska det vara:

    /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/

  17. 24
  18. 27

    Tja, det här är bara en grov kontroll men inte 100% korrekt, till exempel skulle det vara okej med john_doe. @ gmail.com vilket faktiskt inte är en giltig e-postadress (punkt är inte tillåtet som sista tecken i lokal del av e-post).
    Det skulle också acceptera john…doe@gmail.com vilket också är ogiltigt eftersom det inte kan finnas mer än en punkt i en sekvens.

    Det här är bara några brister som jag märkte vid första anblicken.
    Min avsikt är inte att basa bara för att påpeka detta om någon planerar att använda detta som en säkerhetskontroll - inte tillräckligt säker.

    För information om giltiga e-postadresser, kolla in det här: http://en.wikipedia.org/wiki/E-mail_address

  19. 28

    Deepak,

    Egentligen tror jag att du måste använda en flykt för punkten ("."). Så din funktion borde vara istället:

    function validateEmail (id)
    {
    var emailPattern = /^ [aa-ZA-Z0-9._- ]+@ [aa-zA-Z0-9.- ]+. [aa-zA-Z] {2,4 $ /;
    returnera emailPattern.test (id);

    }

    Annars skulle punkten betyda "vilken karaktär som helst". Jag tror att sådana specialtecken måste undvikas.

    Hälsningar,

    Federico

  20. 29

    function validateEmail (fld) {
    var fel = ””;
    var tfld = trim (fld.value); // värde för fält med tomt utrymme avklippt
    var emailFilter = /^ [^ @] + @ [^^.] +. [^ @] *ww$/;
    var illegalChars = / [(),;: \ ”[]] /;

    if (fld.value == “Ange din e-postadress”) {

    error = “Ange din e-postadress. n”;
    } annars om (! emailFilter.test (tfld)) {// testa e-post för olagliga tecken

    error = “Ange en giltig e-postadress. n”;
    } annat om (fld.value.match (illegalChars)) {

    error = “Ange en giltig e-postadress. n”;
    }
    returfel;
    }

  21. 30

    function validateEmail (fld) {
    var fel = ””;
    var tfld = trim (fld.value); // värde för fält med tomt utrymme avklippt
    var emailFilter = /^ [^ @] + @ [^^.] +. [^ @] *ww$/;
    var illegalChars = / [(),;: \ ”[]] /;

    if (fld.value == “Ange din e-postadress”) {

    error = “Ange din e-postadress. n”;
    } annars om (! emailFilter.test (tfld)) {// testa e-post för olagliga tecken

    error = “Ange en giltig e-postadress. n”;
    } annat om (fld.value.match (illegalChars)) {

    error = “Ange en giltig e-postadress. n”;
    }
    returfel;
    }

  22. 31

    function validateEmail (fld) {
    var fel = ””;
    var tfld = trim (fld.value); // värde för fält med tomt utrymme avklippt
    var emailFilter = /^ [^ @] + @ [^^.] +. [^ @] *ww$/;
    var illegalChars = / [(),;: \ ”[]] /;

    if (fld.value == “Ange din e-postadress”) {

    error = “Ange din e-postadress. n”;
    } annars om (! emailFilter.test (tfld)) {// testa e-post för olagliga tecken

    error = “Ange en giltig e-postadress. n”;
    } annat om (fld.value.match (illegalChars)) {

    error = “Ange en giltig e-postadress. n”;
    }
    returfel;
    }

  23. 32

    function validateEmail (fld) {
    var fel = ””;
    var tfld = trim (fld.value); // värde för fält med tomt utrymme avklippt
    var emailFilter = /^ [^ @] + @ [^^.] +. [^ @] *ww$/;
    var illegalChars = / [(),;: \ ”[]] /;

    if (fld.value == “Ange din e-postadress”) {

    error = “Ange din e-postadress. n”;
    } annars om (! emailFilter.test (tfld)) {// testa e-post för olagliga tecken

    error = “Ange en giltig e-postadress. n”;
    } annat om (fld.value.match (illegalChars)) {

    error = “Ange en giltig e-postadress. n”;
    }
    returfel;
    }

  24. 33
  25. 34
  26. 35
  27. 36
  28. 37
  29. 38
  30. 39
  31. 40

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.