Geldigheid testen van een e-mail adres

Op veel websites vind je een mail-formulier, waarin je een e-mail adres moet opgeven. Het is dan de bedoeling dat daar een bestaand adres wordt ingevuld.
Het is niet gemakkelijk om na te gaan of een opgegeven e-mail adres ook daadwerkelijk bestaat. Wel is het mogelijk om met betrekkelijk eenvoudige middelen na te gaan of een opgegeven e-mail adres zou kunnen bestaan. Ofwel: je kunt nagaan of een opgegeven e-mail adres de juiste vorm heeft.

Hieronder zie een een formuliertje met één tekstveld. Als je daar een e-mail adres invult en dan op de knop Test! drukt, komt er een alert op het scherm die zegt of het adres correct vormgegeven is of niet.

Op deze pagina staat beschreven hoe je dat aanpakt. De code staat onderaan deze bladzijde. Je kunt hem ook downloaden voor je eigen gebruik.

• De code bestaat uit een eenvoudig formulier waarin een e-mail adres wordt gevraagd. Als de knop Test! wordt ingedrukt wordt de JavaScript-function TestTheAddress() gestart. Deze function haalt het opgegeven e-mailadres uit het tekstveld en laat daar de function VerifyEmail_check(str) op los.
• De parameter str van de function VerifyEmail_check(str) is de inhoud van het tekstveld.
• De function VerifyEmail_check(str) verwijdert eerst de 'whitespace' (spaties e.d.) aan het begin en het einde van str. Er wordt dus een TRIM-actie op uitgevoerd.
  Hiermee wordt voorkomen dat het script wordt misleid doordat er per ongeluk spaties aan het begin en/of einde van het e-mail adres worden getypt.
• Daarna controleert VerifyEmail_check(str) of str een correct geformatteerd e-mail adres is. Als dat zo is geeft de function de waarde true terug. Anders geeft de function false terug.
• TestTheAddress() toont een alert, afhankelijk van de return-waarde van VerifyEmail_check(str).
   
• In de function VerifyEmail_check(str) wordt een "Reguliere Expressie" gebruikt. Dit is een speciale manier om zoekpatronen in tekststrings mee te beschrijven.
   
• Je kent vast wel de beschrijving *.txt om alle tekstfiles in een directory te laten zien. Het sterretje wordt jokerteken of wildcard genoemd. Reguliere expressies werken ook met een soort jokertekens om patronen in een tekst mee te beschrijven.
• De techniek is afkomstig uit het UNIX-operating system. Daar tref je het aan in de filters awk en sed, maar ook in de editors ed, vi en emacs. Later is het ook ingebouwd in allerhande web-design talen.
• Helaas is er toch niet zoiets als de 'standaard' reguliere expressie taal. Het gaat eerder om verschillende dialecten. De programmeertaal Perl beschikt waarschijnlijk de meest complete set reguliere expressies.
  Gelukkig volgen al deze verschillende vormen van reguliere expressies wel dezelfde principes. Als je het basis-idee onder de knie hebt, leer je gemakkelijk de verschillende dialecten aan.
• Ook JavaScript is, vanaf versie 1.1, uitgerust met uitgebreide mogelijkheden om reguliere expressies te gebruiken.
   
• Het voert in het kader van dit onderwerp te ver om diep op de reguliere expressie techniek in te gaan. Zie daarvoor het item "Reguliere Expressies in JavaScript".
• De function VerifyEmail_check(str) gebruikt twee reguliere expressies. De eerste is:

  /(^\s*)|(\s*$)/g

  Het betekent het volgende:
  • Alle 'whitespace'-karakters die aan het begin of einde van de string staan worden gevonden. Ze worden met behulp van de String-methode replace() vervangen door een 'lege' string; ze worden dus verwijderd.
  • Het hangt af van de browser wat als 'whitespace'-karakter wordt gezien. Het is altijd een spatie, maar het kan ook zijn een horizontale of verticale tab, carriage return, linefeed, enz.
    Alleen spaties zijn voor deze toepassing van belang, dus deze expressie volstaat.
   
  De tweede reguliere expressie kijkt of het een correct e-mail adres zou kunnen zijn:

  /^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]*$/i

  Het betekent het volgende:
  • Het eerste karakter is een letter of cijfer.
  • Daarna volgt een aantal malen een letter, cijfer, punt, streepje of liggend streepje.
  • "Ergens" staat het karakter @.
  • Vervolgens komt er een letter of cijfer.
  • Vervolgens komt er een aantal malen een letter, cijfer, punt, streepje of liggend streepje.
  • Aan het einde staat een punt gevolgd door nog een aantal letters of cijfers.
    Oorspronkelijk waren er twee tot zes letters of cijfers na de laatste punt. Na het vrijgeven van de top-level domeinen in 2014 is die beperking opgeheven.
  • Het geheel is hoofdletter-onafhankelijk.
   
• Met deze aanpak is het ook mogelijk om een IP-adres als domein van de afzender op te geven.
   
• De function VerifyEmail_check(str) vergelijkt de opgegeven string met de reguliere expressies.
  Voor de vergelijking worden de methodes replace en match van het String-object gebruikt. Merk op dat de reguliere expressie niet tussen (enkele of dubbele) aanhalingstekens staat!

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
// Check de juistheid van het e-mail adres. Dit gebeurt met een Reguliere Expressie.
// gebaseerd op File : verifyemail.js
// Version : 1.1; Date : april 3rd, 2002.
// Author : Lars B. Jensen, lars.jensen@ljweb.com
// Verbeterde werking en implementatie door Ben Boukes (c) 2004
 
function TestTheAddress() {
  if (VerifyEmail_check(document.f.t.value)) {
    window.alert('Het opgegeven e-mail adres is juist...')
  } else {
    window.alert('Het opgegeven e-mail adres is NIET juist!')
    document.f.t.focus();
  }
}
 
function VerifyEmail_check(str) {
  str=str.replace(/(^\s*)|(\s*$)/g, "");
  if(!str.match(/^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]*$/i)) {
    return false;
  } else {
    return true;
  }
}
</script>

<form action="JavaScript:TestTheAddress();" name="f" id="f">
<table border="1" cellspacing="1" cellpadding="5" align="center" bgcolor="#DDFFDD" frame="box" rules="none"><tr>
  <td colspan="2" align="center">
    Vul hier een e-mail adres in:<br>
    <input type="text" name="t" size="30" maxlength="50"></td>
</tr><tr>
  <td align="center">
    <input type="submit" value=" Test! "></td>
    <td align="center"><input type="reset" value="Opnieuw..."></td>
</tr></table></form>

Downloaden:
 
Druk op de knop:  File: voorb140.zip, 879 bytes.

Opmerking:
 
Je kunt op een vergelijkbare manier ook testen op de geldigheid van een URL. Zie het item Geldigheid testen van een URL.