Het pattern attribuut

Het attribuut pattern specificeert validatie van een invoerveld in een HTML formulier op basis van een reguliere expressie.

Reguliere expressies zijn speciale commando's die het mogelijk maken om vrijwel alle validatieregels te creëren. Je kunt er meer over leren in het boek over reguliere expressies in PHP of in het boek over reguliere expressies in JavaScript.

Bij een poging om het formulier te verzenden, indien het veld met dit attribuut niet correct is ingevuld - zal de browser het formulier niet laten verzenden en een foutmelding tonen in de vorm van een tooltip. Helaas kan de tekst van de foutmelding en zijn uiterlijk niet worden gewijzigd met HTML of CSS.

Houd er rekening mee dat de aanwezigheid van het attribuut pattern u niet vrijstelt van het controleren van de juistheid van het ingevulde formulier aan serverzijde met PHP (aangezien de validatie via het attribuut gemakkelijk te omzeilen is).

Het attribuut pattern moet worden toegepast op de tags input of textarea.

Voorbeeld

Laten we naar de tag input kijken en het attribuut pattern toevoegen, waarin we een reguliere expressie plaatsen die controleert of er in de input een getal bestaande uit twee cijfers is ingevoerd (bijvoorbeeld 25).

Voer een willekeurig getal in en probeer op de knop te klikken om het formulier te verzenden. Als er een getal dat niet uit twee cijfers bestaat is ingevoerd, dan laat de browser het formulier niet verzenden en toont een foutmelding. Anders wordt het formulier verzonden:

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

Voorbeeld . Leeg veld

In het vorige voorbeeld gaf de browser alleen een foutmelding als het veld niet leeg was (hoewel een leeg veld geen getal met twee cijfers is). Laten we proberen te bereiken dat er ook een foutmelding verschijnt voor een leeg veld - samen met het attribuut pattern schrijven we ook het attribuut required:

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>

Zie ook

het attribuut required,
waarmee je een leegtecontrole kunt uitvoeren