Scripts

Postcode Checker met Raphael graphics library

Door Cornel van der Heiden -14-07-2010 10:09 -10.809 views

Ik heb aan de hand van het 'Geldige Postcode' tooltje van Chris Horeweg een simpel maar grappig appje gebouwd met behulp van de Raphael graphics library. Die vind je hier: http://raphaeljs.com/. Ik dacht: misschien leuk om te laten zien wat er met JS te doen is met graphics! Verder gebruikt dit scriptje AJAX. Natuurlijk kan het uitgebouwd worden. Maar in ieder geval: veel plezier ermee. Voorbeeld: www.nenicto.nl/raphael/rafael.html

Download alle bestanden als ZIP

rafael.html

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="application/javascript">
var paper;
var circle;
function LoadPostcodeChecker(form){
	if (window.XMLHttpRequest){
  		xmlhttp=new XMLHttpRequest();
  	} else {
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.open("GET","test.php?p="+form.test.value,false);
	xmlhttp.send();
	var text = xmlhttp.responseText;
	$('#output').html(text);
	if(text.indexOf("OK") > -1){
		rect.animate({fill: 'green'},1000);
	} else {
		rect.animate({fill: 'red'},1000);
	}
}
function OnLoad(){
	paper = Raphael("notepad",155,50);
	rect = paper.rect(0,0,155,10);
	rect.attr("fill","yellow");
	rect.animate({height: 50},2000,"bounce");
}
</script>
<title>Untitled Document</title>

</head>

<body onload="OnLoad();">
<div id="test"><form id="testform" action="" method="get">
<input style="width: 150px;" id="test" name="test" type="text" onkeyup="LoadPostcodeChecker(this.form);" />
</form></div>
<div id="notepad">
</div>
<div id="output"></div>
</body>
</html>[/code]

test.php

<?php

# Dit is de regex die je wilt gebruiken
$regex = '~\A[1-9]\d{3} ?[a-zA-Z]{2}\z~';

# Dit is de oude regex, waar twee fouten in zaten
# Ten eerste begint een postcode ten alle tijden met een 1
# En ten tweede, \s is niet genoeg
#$regex = '/^[0-9]{4}[\s]{0,1}[a-z]{2}$/i';

# Dit is gewoon een simpele pagina eromheen
# Maar, omdat de demo online staat,  geen zin in XSS =)
if(!empty($_GET['p'])){
	$postcode = $_GET['p'];
} else {
	$postcode = 'niets';
}
$valid = preg_match($regex, $postcode, $matches);

# Debug
//echo '<pre>'.print_r($matches, true).'</pre>';

if($valid)
{
    echo 'OK. Ingevoerde postcode: '.$postcode;    
}
else
{
    echo 'NOT! Wat je ingevoerd hebt, namelijk '.$postcode.', is geen geldige postcode!';
}
?>