Corsi on-line

HTML5: uso delle espressioni regolari nella validazione degli input

In un precedente articolo abbiamo parlato della possibilità di utilizzare le espressioni regolari in associazione agli elementi e agli attributi di HTML5 con l’obiettivo di ricercare un’alternativa alle varie tecniche per la validazione basate su JavaScript; in questo post approfondiremo l’argomento proponendo alcuni casi specifici e dei pattern appositamente concepiti per rilevare la presenza di determinate componenti all’interno della stringhe da verificare.

html5Parlando del caso relativo ai parametri di input, le espressioni regolari vengono introdotte attraverso un apposito attributo denominato, appunto, pattern; quest’ultimo ha in pratica il compito di definire un formato sulla base del quale effettuare un confronto con il valore inserito in un campo; tale formato sarà introdotto come un’espressione regolare così come prevista per JavaScript.

A tal proposito si pensi all’input type di HTML5 tel, esso è per sua natura molto più limitato rispetto a number o a email perché non fa riferimento ad un formato standard universalmente accettato. Si ipotizzi quindi di voler verificare che il numero di telefono indicato nel campo che ha come tipo di input tel debba rispettare un formato come: “0039-399-8205-xxx”; in tal caso potremmo definire un pattern come il seguente:

<label for="numtel">Numero di telefono:</label>
<input type="tel" pattern="^\d{4}-\d{3}-\d{4}-\d{3}$" >

Nello stesso modo, volendo controllare che un determinato parametro di input contenga esclusivamente caratteri alfanumerici, potremmo introdurre il seguente pattern:

<input type="text" pattern="[a-zA-Z0-9]+" >

E’ da sottolineare che il pattern viene utilizzato per operare un confronto tra espressioni regolari e valori, ma non rende obbligatorio un campo; per stabilire che un campo dovrà essere obbligatoriamente compilato dovremo utilizzare infatti l’attributo booleano required.

Post correlati
I più letti del mese
Tematiche