Pregunta

I'm trying to build a regular expression in javascript to validate a Dutch zipcode.

The zipcode should contain 4 numbers, then optionally a space and then 2 (case insensitive) letters

Valid values:

1001aa  
1001Aa  
1001 AA

I now have this, but it does not work:

var rege = /^([0-9]{4}[ ]+[a-zA-Z]{2})$/;
¿Fue útil?

Solución

Edited to handle no leading 0 requirement for Dutch postal codes, and to eliminate matches for SS, SA, and SD. This should do it all for you.

Final regex:

var rege = /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i;

Fiddle unit test: http://jsfiddle.net/hgU3u/

Here's a breakdown:

  1. ^ matches beginning of string
  2. [1-9][0-9]{3} matches a single non-zero digit, and three 0-9 digits
  3. ? matches 0 or 1 spaces (you could use * to match 0 or more spaces)
  4. (?!sa|sd|ss) is a lookahead test to check that the remainder is not "sa", "sd", or "ss".
  5. [a-z]{2} matches 2 a-z characters
  6. $ matches the end of the string
  7. i at the end is the case-insensitive modifier

Otros consejos

In case you have trouble using this as pattern for bootstrap validation I suggest you change it to:

    ^[1-9][0-9]{3} ?(?!sa|sd|ss|SA|SD|SS)[A-Za-z]{2}$

This way it is still case-insensitive and accepted by the bootstrap validator.

Here is my solution. The i in the end makes it case-insensitive:

var rege = /^\d{4} ?[a-z]{2}$/i;

The excluded combinations, SA SD SS, need to be typed right after the ! sign to deliver a valid outcome; so, not ! SA|SD|SS but !SA|SD|SS and they introduced the :space: code.

My Dutch NL postcode regex:

^[1-9][0-9]{3}[[:space:]]{0,1}(?!SA|SD|SS)[A-Z]{2}$ or
^[1-9][0-9]{3}[ ]{0,1}(?!SA|SD|SS)[A-Z]{2}$ works also (depends on software version on your server, the [:space:] code is not always accepted)
  1. ^ asserts position at start of a line

  2. Match a single character present in the list below [1-9] 1-9 matches a single character in the range between 1 (index 49) and 9 (index 57) (case sensitive)

  3. Match a single character present in the list below [0-9] {3} matches the previous token exactly 3 times 0-9 matches a single character in the range between 0 (index 48) and 9 (index 57) (case sensitive)

  4. Match a single character present in the list below [[:space:]] {0,1} matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy) [:space:] matches a whitespace character, including a line break [ \t\r\n\v\f] (also written as \s)

  5. Negative Lookahead (?!SA|SD|SS) Assert that the Regex below does not match 1st Alternative SA SA matches the characters SA literally (case sensitive) 2nd Alternative SD SD matches the characters SD literally (case sensitive) 3rd Alternative SS SS matches the characters SS literally (case sensitive)

  6. Match a single character present in the list below [A-Z] {2} matches the previous token exactly 2 times A-Z matches a single character in the range between A (index 65) and Z (index 90) (case sensitive)

  7. $ asserts position at the end of a line

The JavaScript function I made with it:

function checkpostcode(){
$("#result_postcode").text("");
var xpr="^[1-9][0-9]{3}[[:space:]]{0,1}(?!SA|SD|SS)[A-Z]{2}$";
var pcRegex = new RegExp(xpr,"g");
var pccheck = document.getElementById("id_postcode");
if(pcRegex.test(pccheck.value)){
$("#result_postcode").html("&nbsp;&nbsp;<i class=\"fa fa-check text-success\"></i>");
$("#result_postcode").css("color", "green");
$("#id_postcode").css("border", "2px solid green");
$("#id_postcode").css("background-color", "#bdf5bd");
    validator();
} else {
$("#result_postcode").html("&nbsp;&nbsp;<i class=\"fa fa-remove text-danger\"></i>");
$("#result_postcode").css("color", "red");
$("#id_postcode").css("border", "1px solid red");   
}}

This is called from a form input field in PHP:

echo"<input type=\"text\" id=\"id_postcode\" name=\"postcode\" value=\"\" placeholder=\"4 cijfers spatie 2 letters\" style=\"width:50%\" oninput=\"checkpostcode();\" required>";
echo"<span id=\"result_postcode\"></span>";

validator() is a JavaScript function that runs every time an input field has changed and when the page finishes loading for the first time. It finally executes the display of the input button by providing the right CSS to display that button.

<script type="text/javascript" language="javascript">
$(document).ready(function(){
validator();
});
</script>

To show the disabled button:

function validator(){
var postc=document.getElementById("id_postcode");
var h=postc.value.length;
if(h>0){
//als aan alle eisen voldaan wordt button vrijgeven
$("#maak_account_id").prop("disabled", false); //activeer de button
$("#maak_account_id").removeClass(); //opmaak wissen
$("#maak_account_id").addClass("button enabled"); //opmaak plaatsen
}else{
$("#maak_account_id").prop("disabled", true); //activeer een button
$("#maak_account_id").removeClass(); //opmaak wissen
$("#maak_account_id").addClass("button disabled"); //opmaak plaatsen

}

And the form button:

<input name="maak_account" id="maak_account_id" type="submit" value="Maak mijn account aan" style="float: right;" disabled>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top