Geldigheid testen van een (Nederlandse) Postcode

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

Hieronder zie een een formuliertje met één tekstveld. Als je daar een Nederlandse postcode 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.

Merk op dat elk land zijn eigen postcode-formaat heeft. Dit script werkt alleen voor Nederlandse Postcodes, dat wil zeggen: vier cijfers, een spatie en twee letters.

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 postcode wordt gevraagd. Als de knop Test! wordt ingedrukt wordt de JavaScript-function TestThePostCode() gestart. Deze function haalt de opgegeven postcode uit het tekstveld en laat daar de function VerifyPostcode_check(str) op los.
• De parameter str van de function VerifyPostcodel_check(str) is de inhoud van het tekstveld.
• De function VerifyPostcode_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 de postcode worden getypt.
• Daarna controleert VerifyPostcode_check(str) of str een correct geformatteerde postcode is. Als dat zo is geeft de function de waarde true terug. Anders geeft de function false terug.
• TestThePostcode() toont een alert, afhankelijk van de return-waarde van VerifyPostcode_check(str).
   
• In de function VerifyPostcode_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 techniek 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 VerifyPostcode_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 correcte postcode zou kunnen zijn:

  /^[1-9][0-9]{3}[\s][A-Z]{2}$/i

  Het betekent het volgende:
  • Het eerste karakter is een cijfer, maar niet 0.
  • Daarna volgt drie maal een cijfer.
  • Vervolgens komt er een spatie.
  • Vervolgens komt er twee maal een letter.
  • Het geheel is hoofdletter-onafhankelijk.
     
• Heel vaak moet je de postcode opgeven zonder spatie tussen de letters en de cijfers. Als je wilt testen op die (overigens onjuiste) schrijfwijze van de postcde moet je de character-class [\s] weglaten uit de reguliere expressie.
  Als je de gebruiker wilt toestaan om wèl of géén spatie te gebruiken, moet je [\s] vervangen door [\s]?. Het vraagteken maakt de aanwezigheid van de spatie optioneel. De spatie mag dus aanwezig zijn, maar hoeft dat niet.
• De function VerifyPostcode_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 een Nederlandse postcode. Dit gebeurt met een Reguliere Expressie.
 
function TestThePostcode() {
  if (VerifyPostcode_check(document.f.t.value)) {
    window.alert('De opgegeven postcode is correct gevormd...')
  } else {
    window.alert('De opgegeven postcode is NIET correct gevormd!')
    document.f.t.focus();
  }
}
 
function VerifyPostcode_check(str) {
  str=str.replace(/(^\s*)|(\s*$)/g, "");
  if(!str.match(/^[1-9][0-9]{3}[\s][A-Z]{2}$/i)) {
    return false;
  } else {
    return true;
  }
}

<form action="JavaScript:TestThePostcode();" 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: voorb153.zip, 754 bytes.