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)
^ asserts position at start of a line
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)
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)
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)
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)
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)
$ 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(" <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(" <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>