Pattern input HTML5

E' sempre bene aiutare l'utente nella compilazione di un modulo html, in modo che possa sapere con precisione cosa scrivere e dove farlo, a tal proposito Html5 introduce questo nuovo attributo, il pattern.

Come si può notare dal codice di esempio qua sopra, è sufficiente aggiungerlo all'interno di un input con type text, password, search, url, telephone o email per poter iniziare ad utilizzarlo.

In sostanza, all'interno dell'attributo dovremo andare ad aggiungere un espressione regolare, ovvero un istruzione che conterrà le direttive per indicare al browser cosa è giusto che sia inserito all'interno dell'input, così che in caso di errore possa segnalare all'utente che c'è qualcosa che non va (a seconda del browser il campo input può essere evidenziato di rosso oppure apparire un tooltip di allerta).

Passiamo subito all'analisi di qualche esempio.
Poniamo di dover creare un campo dove l'utente dovrà inserire il CAP del proprio comune di residenza.
Tale informazione è composta unicamente da 5 numeri (nessun carattere o altro simbolo), quindi potremo andare a creare quanto segue:

[CODE][/CODE]

L'istruzione è semplice, all'interno delle parentesi quadre dichiariamo il set di caratteri consentito (in questo caso solo numeri da 0 a 9), successivamente tra le parentesi graffe indichiamo in numero di volte che tale set deve ripetersi (ovvero 5 volte).
Nell'insieme otteniamo quindi che nell'input in questione sarà consentito inserire solo 5 numeri da 0 a 9.

N.B: Il carattere - (trattino), indica una "serie", ovvero in questo caso una di numeri da 0 a 9.
Ovviamente avremo potuto ottenere lo stesso risultato digitando [0123456789].

N.B: Se avessimo voluto indicare una ripetizione minima ed una massima, sarebbe stato sufficiente esprire ad esempio: {0,5}
dove 0 è il numero minimo e 5 quello massimo di volte che si può ripetere il carattere inserito. Questo sistema è comodo ad esempio se volessimo controllare l'inserimento di una password, che si presuppone non debba essere ne troppo corta ma neanche troppo lunga.

Compreso ciò, si evince come sia possibile utilizzare quanto appreso per moltissime situazioni, ad esempio:

[5-9] Solo numeri da 5 a 9
[13579] Solo numeri dispari
[02468] Solo numeri pari
[012345679] Tutti i numeri tranne l'8

N.B: Esiste un altro metodo per poter dichiarare l'inserimento di soli numeri, e corrisponde a d,
quindi indicare: d{5} o [0-9]{5} è la stessa cosa.

Oltre hai numeri, possiamo dichiarare anche set di caratteri e/o simboli, ad esempio:

[CODE][/CODE]
Accetta solo lettere minuscole


[CODE][/CODE]
Accetta solo lettere maiuscole


[CODE][/CODE]
Accetta lettere maiuscole e minuscole

N.B: Il simbolo + posto subito dopo la chiususa della parentesi quadra, indica che è consentito inserire anche più di un solo carattere, senza di questo infatti, nei casi in questione se ne sarebbe potuto inserire al massimo uno.
Anche in questo caso è possibile utilizzare un carattere speciale per semplificare l'accettazione di tutti i caratteri e corrisponde a:

[CODE]w[/CODE]
Attenzione, l'underscore ( _ ) è considerato come carattere e non simbolo.

Proseguendo, come spiegavo poco fa, oltre a lettere e numeri si può consentire anche il solo inserimento di simboli, per farlo, il carattere jolly in questione è W:

[CODE][/CODE]
Quindi la seguente stringa accettà tutti i simboli (ovviamente escluso l'underscore, per la motivazione spiegata poco fa)


A questo punto è di facile comprensione capire che possiamo unire tutti gli elementi a disposizione per creare soluzioni più complesse. Di seguito per voi qualche esempio di situazioni che potrebbero capitarvi.

Controllo validità indirizzo email:
[CODE][/CODE]

Controllo validità indirizzo web (comprensivo di protocollo http://):
[CODE][/CODE]

Controllo validità di un codice fiscale:
[CODE][/CODE]

Controllo validità indirizzo IPv4:
[CODE][/CODE]

Controllo data nel formato (DD-MM-YYYY):
[CODE][/CODE]

Controllo di un prezzo (con decimali separati sia da una virgola che da un punto):
[CODE][/CODE]


Dagli esempi appena mostrati si può notare come, con l'utilizzo delle informazioni apprese nella guida, siamo riusciti ad ottenere i controlli più svariati.

Rimangono da analizzare solo alcuni altri semplici caratteri speciali utilizzati nell'ultimo esempio, ovvero:

- Il simbolo separatore ( | ), può essere definita una condizione, equivale ad "oppure".
Nell'ultimo esempio infatti abbiamo espresso: accetta solo numeri (d+), poi altri numeri preceduti da un punto (.d+) oppure ( | ) da una virgola (,d+).

N.B: Ogni espressione che richieda l'utilizzo di una condizione deve essere racchiusa tra parentesi tonda, come si può notare dallo stesso esempio (.d+|,d+).

- Il carattere speciale ? infine, indica che l'espressione è valida 0 o 1 volta, è un metodo più veloce per indicare {0,1}


Al momento è tutto, per maggiori informazioni potete consultare questi indirizzi: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf (Documento ufficiale dell'ECMAScript in lingua inglese) oppure http://it.wikibooks.org/wiki/JavaScript/Espressioni_regolari (versione riadattata in lingua italiana).


Se avete domande o richieste, potete lasciare un commento qua sotto, sarò lieto di rispondervi.