HTML5 patterns bij input
Bij HTML5 heb je patterns bij input.
Zie: http://html5pattern.com/Names
Nu staan daar een aantal leuke dingen, maar ik wil er een paar bij hebben.
Naam: A tot Z, spatie, A tot Z, minimaal 5 letters. Inclusief ç en ë etc
Straat: A tot Z of 1 tm 10, spatie, nummer (eventueel met achtervoegsel)
Postcode heb ik al: [1-9][0-9]{3}\s?[a-zA-Z]{2}
Telefoonnummer: 10 cijfers, spaties mogen ook, streepjes en punten ook. +31 of 0031 mag ook. 06 ook. Ik heb al: [0-9.\-\s]{10,15}
emailadres: men zegt type="email", maar dan valideert iets@iets ook (zonder .nl bijvoorbeeld)
rekeningnummer: iets met nummers???
Kan iemand mij hier mee helpen?
Ik zal ze dan ook aan html5pattern.com toevoegen ;)
Is dat wel veilig vraag ik me af.
Een formulier is immers zo verbouwd dat dit niet meer werkt. :)
Anders gezegd: Is het geen beter plan om dit soort controles serverside te doen?
Gewijzigd op 07/08/2013 17:00:44 door Bart V B
@Bart, je moet altijd alles server side controleren wat vanaf de gebruiker komt.
Eddy (dacht ik), het komt er op neer dat je een JS engine compatible pattern moet maken. Ik zal dat vanavond doen (als niemand me voor is)
Op Chrome en Opera werkt in in elk geval goed. Geeft nette (browser) meldingen dat het verplicht is (required) en zo. Zonder extra opmaak/html/css van mijn kant.
En uiteraard wordt dit serverside ALSNOG gecontroleerd.
Toevoeging op 08/08/2013 11:04:32:
Niemand was je voor Wouter!
't Is een super-functie, maar ik ben er echt slecht is.
De standaard 'email'-type is nog niet goed genoeg, dus dat moet ook via een pattern.
pattern="^[a-zA-Zà-ö\s]{5,}$"
Je moet even met een Unicode-tabel uitvogelen welke karakterbereiken (bijvoorbeeld voor Slavische namen) en speciale tekens (zoals streepjes en apostrofs) je wilt toestaan.
Alleen een IBAN-nummer controleren is nog lastig.
Ik heb op jsFiddle het een en ander gezet: http://jsfiddle.net/V8Wp9/
Die IBAN-check werkt, maar dan mag je geen spaties toevoegen.
En dat wil ik wel (optioneel).
Dus NL45RABO03934655 is geldig.
maar NL45 RABO 03934655 moet dat ook zijn (en dat is het nu niet).
Iemand een idee?
NL95 INGB 0001 2345 67
Volgens de volgende reguliere expressies kun je nog grotere verschillen tussen landen verwachten, maar daarmee kom je wel ongeveer in de buurt van het patroon dat je zoekt:
http://serprest.pt/jquery/ht5ifv/extensions/tools/IBAN/
Die genereert deze Javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function isValidIBAN($v){ //This function check if the checksum if correct
$v = $v.replace(/^(.{4})(.*)$/,"$2$1"); //Move the first 4 chars from left to the right
$v = $v.replace(/[A-Z]/g,function($e){return $e.charCodeAt(0) - 'A'.charCodeAt(0) + 10}); //Convert A-Z to 10-25
var $sum = 0;
var $ei = 1; //First exponent
for(var $i = $v.length - 1; $i >= 0; $i--){
$sum += $ei * parseInt($v.charAt($i),10); //multiply the digit by it's exponent
$ei = ($ei * 10) % 97; //compute next base 10 exponent in modulus 97
};
return $sum % 97 == 1;
}
var $patterns:{ //Map automatic generated by IBAN-Patterns Online Tool
IBAN: function($v){
$v = $v.replace(/[-. ]/g,'');
return /^BE\d{14}$|^NL\d{2}[A-Z]{4}\d{10}$/.test($v) && isValidIBAN($v);
},
};
$v = $v.replace(/^(.{4})(.*)$/,"$2$1"); //Move the first 4 chars from left to the right
$v = $v.replace(/[A-Z]/g,function($e){return $e.charCodeAt(0) - 'A'.charCodeAt(0) + 10}); //Convert A-Z to 10-25
var $sum = 0;
var $ei = 1; //First exponent
for(var $i = $v.length - 1; $i >= 0; $i--){
$sum += $ei * parseInt($v.charAt($i),10); //multiply the digit by it's exponent
$ei = ($ei * 10) % 97; //compute next base 10 exponent in modulus 97
};
return $sum % 97 == 1;
}
var $patterns:{ //Map automatic generated by IBAN-Patterns Online Tool
IBAN: function($v){
$v = $v.replace(/[-. ]/g,'');
return /^BE\d{14}$|^NL\d{2}[A-Z]{4}\d{10}$/.test($v) && isValidIBAN($v);
},
};
Dus moet ik toch gewoon als HTML5-pattern dit hebben?
Code (php)
1
^BE\d{14}$|^NL\d{2}[A-Z]{4}\d{10}$
Gewijzigd op 15/08/2013 12:36:09 door Eddy E
Voornaam Achternaam: [A-Za-zÁ-Öá-ö]{1,}\s[A-Za-zÁ-Öá-ö]{1,}
Adres: [A-Za-zÁ-Öá-ö\D]{1,}\s\d{1,}
Woonplaats: .{3,}
Postcode: [1-9][0-9]{3}\s?[a-zA-Z]{2}
Telefoonnummer: 0[\d\s-]{10,13}
Emailadres: [\w\+\-\._]+@[\w\-\._]+\.\w{2,}
IBAN: ^(?=[0-9A-Z]{18}$)NL\d{2}[A-Z]{4,5}\d{10}$
Voor een datum gebruik je type="date".
Je zou zeggen dat type="email" beter is voor een emailadres. Maar de browser keurt iets@iets ook goed als emailadres, en dat is het natuurlijk niet.
Reacties, vragen en of opmerkingen?
Toevoeging op 29/08/2013 15:07:46:
Online gegooid: http://jsfiddle.net/FPxbn/
Gewijzigd op 29/08/2013 16:13:56 door Eddy E
Eddy E op 29/08/2013 15:05:42:
Je zou zeggen dat type="email" beter is voor een emailadres. Maar de browser keurt iets@iets ook goed als emailadres, en dat is het natuurlijk niet.
In een netwerk is declaratie@salarisadministratie wel een geldig e-mailadres. En als je een declaratie wilt mailen naar de salarisadministratie, hoeft dat niet per se via internet. Beter van niet zelfs.
Ik zou wél type="email" gebruiken, om te voorkomen dat je geldige e-mailadressen uitsluit. In steeds meer TLD's, bijvoorbeeld onlangs nog .be, worden speciale karakters met accenten toegestaan: als je het patroon te streng formuleert, keur je geldige e-mailadressen af.
De Á-Öá-ö staat er bij ;)
Eddy E op 29/08/2013 16:12:54:
Is iets@iets echt te 'versturen'? Intern wellicht, maar ik ga mijzelf niet intern op mijn eigen website (http!) inschrijven... Toch?
Hahaha, nee niet op een website. Maar je wilt niet weten hoeveel bedrijven met een duur LAN de hele dag intern via internet zitten te mailen.
Goed dat je hier de uitkomst deelt! Daar kunnen we wat mee.