Ogni sviluppatore web conosce la sensazione: hai costruito un modulo e hai emesso un gemito quando ti rendi conto che ora devi convalidare ogni campo.
Per fortuna, la convalida del modulo non deve essere dolorosa. È possibile utilizzare le espressioni regolari per gestire molte esigenze di convalida comuni.
Cosa sono le espressioni regolari?
Le espressioni regolari descrivono modelli che corrispondono a combinazioni di caratteri nelle stringhe. Puoi usarli per rappresentare concetti come "solo numeri" o "esattamente cinque lettere maiuscole".
Le espressioni regolari (chiamate anche regex) sono strumenti potenti. Hanno molti usi, tra cui ricerca avanzata, trova e sostituisci e operazioni di convalida sulle stringhe. Una famosa applicazione delle espressioni regolari è il comando grep in Linux.
Perché utilizzare le espressioni regolari per la convalida?
Ci sono molti modi per convalidare l'input del modulo, ma le espressioni regolari sono semplici, veloci e comode da usare se capisci come.
JavaScript ha il supporto nativo per le espressioni regolari. Ciò significa che il loro utilizzo per la convalida rispetto a una libreria esterna aiuta a ridurre al minimo le dimensioni dell'applicazione Web.
Le espressioni regolari sono anche in grado di convalidare molti tipi di input di moduli.
Nozioni di base sulle espressioni regolari
Le espressioni regolari sono costituite da simboli che descrivono modelli formati da caratteri in una stringa. In JavaScript, puoi creare un'espressione regolare letterale scrivendola tra due barre in avanti. La forma più semplice di un'espressione regolare è la seguente:
/abc/L'espressione regolare sopra corrisponderà a qualsiasi stringa che include i caratteri "a", "b" e "c" in quell'ordine, consecutivamente. La stringa "abc" corrisponderà a quell'espressione regolare, così come a una stringa come "abcdef".
Puoi descrivere modelli più avanzati usando caratteri speciali nelle tue espressioni regolari. I caratteri speciali non rappresentano un carattere letterale, ma rendono la tua regex più espressiva.
Puoi usarli per specificare che una parte del pattern deve ripetersi un certo numero di volte o per indicare che parte del pattern è facoltativa.
Un esempio di carattere speciale è "*". Il carattere "*" modifica un singolo carattere o un gruppo di caratteri che lo precede. Dichiara che quei caratteri possono essere assenti o possono ripetersi un numero qualsiasi di volte di seguito. Per esempio:
/abc*/
Corrisponderà a "ab" seguito da un numero qualsiasi di caratteri "c". La stringa "ab" è un valido esempio di tale modello, poiché il carattere "c" è opzionale. Le stringhe "abc" e "abccccc" sono ugualmente valide, perché "*" significa che "c" può essere ripetuto un numero qualsiasi di volte.
La sintassi dell'espressione regolare completa utilizza molti altri caratteri del modello per descrivere possibili corrispondenze. Puoi imparare di più da Regex 101 di regexlearn.com corso interattivo. Guida JavaScript di MDN è anche molto utile.
Convalida del modulo con espressioni regolari
Puoi usare regex per convalidare l'input del modulo in un paio di modi. Il primo modo è usare JavaScript. Prevede alcuni passaggi:
- Ottieni il valore dell'input del modulo.
- Controlla se il valore dell'input corrisponde all'espressione regolare.
- In caso contrario, mostra all'utente del sito Web che il valore del campo di input non è valido.
Ecco un breve esempio. Dato un campo di input come questo:
<segnaposto di input="Campo di inserimento">Puoi scrivere una funzione per convalidarla in questo modo:
funzioneconvalidare() {
permettere valore = documento.querySelector("input").valore;
cost regEx = /^.{3,7}$/;
Restituzione regEx.test (valore);
}Un altro modo è sfruttare le capacità di convalida dei moduli HTML del browser. Come? Specificando regex come valore dell'attributo pattern del tag di input HTML.
L'attributo pattern è valido solo per i seguenti tipi di input: testo, tel, email, url, password e ricerca.
Ecco un esempio che utilizza l'attributo pattern:
<modulo>
<segnaposto di input="Campo di inserimento" modello richiesto="/^.{3,7}$/">
<pulsante>Invia</button>
</form>Se invii il modulo e il valore dell'input non corrisponde all'intera espressione regolare, il modulo visualizzerà un errore predefinito simile al seguente:
Se l'espressione regolare fornita all'attributo pattern non è valida, il browser ignorerà l'attributo.
Modelli Regex comuni per la convalida dei moduli
La necessità di costruire ed eseguire il debug di espressioni regolari da zero può richiedere del tempo. Di seguito sono riportate alcune istruzioni regex che puoi utilizzare per convalidare alcuni dei tipi più comuni di dati del modulo.
Espressione regolare per convalidare la lunghezza della stringa
Uno dei requisiti di convalida più comuni è una restrizione sulla lunghezza di una stringa. L'espressione regolare che corrisponderà a una stringa di sette caratteri è:
/^.{7}$/Il "." è un segnaposto che corrisponde a qualsiasi carattere e il "7" tra parentesi graffe specifica il limite di lunghezza della stringa. Se la stringa doveva rientrare in un certo intervallo di lunghezza, ad esempio tra tre e sette, l'espressione regolare sarebbe invece simile a questa:
/^.{3,7}$/E se la stringa doveva essere lunga almeno tre caratteri senza alcun limite superiore, sarebbe simile a questa:
/^.{3,}$/È improbabile che la lunghezza sia l'unico requisito di convalida per l'input di un modulo. Ma lo userai spesso come parte di un'espressione regolare più complicata che include altre condizioni.
Espressione regolare per convalidare i campi solo lettere
Alcuni input di moduli devono contenere nient'altro che lettere per essere validi. La seguente espressione regolare corrisponderà solo a tali stringhe:
/^[a-zA-Z]+$/Questa espressione regolare specifica un set di caratteri composto dall'intero alfabeto. Il carattere speciale "+" significa che il carattere precedente deve comparire almeno una volta, senza limite superiore.
Espressione regolare per convalidare i campi solo numerici
La seguente espressione regolare corrisponderà solo a stringhe composte interamente da cifre:
/^\d+$/L'espressione regolare sopra è essenzialmente la stessa di quella precedente. L'unica differenza è che utilizza un carattere speciale "\d" per rappresentare l'intervallo di cifre, invece di scriverle.
Espressione regolare per convalidare i campi alfanumerici
Le espressioni regolari semplificano anche la convalida dei campi alfanumerici. Ecco un'espressione regolare che corrisponderà solo a stringhe composte da lettere e cifre:
/^[a-zA-Z\d]+$/Alcuni campi sono alfanumerici, ma consentono alcuni altri caratteri come trattini e trattini bassi. Un esempio di tali campi è un nome utente. Di seguito è riportata un'espressione regolare che corrisponde a una stringa composta da lettere, cifre, trattini bassi e trattini:
/^(\w|-)+$/Il carattere speciale "\w" corrisponde a un'intera classe di caratteri, come "\d". Rappresenta l'intervallo dell'alfabeto, delle cifre e del carattere di sottolineatura ("_").
Espressione regolare per convalidare i numeri di telefono
Un numero di telefono può essere un campo complicato da convalidare perché paesi diversi utilizzano formati diversi. Un approccio molto generale è garantire che la stringa contenga solo cifre e che la sua lunghezza rientri in un determinato intervallo:
/^\d{9,15}$/Un approccio più sofisticato potrebbe assomigliare a questo preso da MDN, che convalida i numeri di telefono nel formato ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Espressione regolare per convalidare le date
Come i numeri di telefono, anche le date possono avere più formati. Le date sono generalmente meno complicate da convalidare rispetto ai numeri di telefono. Come mai? Le date non contengono caratteri diversi da cifre e trattini.
Ecco un esempio che convaliderà le date del formato "GG-MM-AAAA".
/^\d{2}-\d{2}-\d{4}$/La convalida con Regex è facile
Le espressioni regolari descrivono modelli che corrispondono a combinazioni di caratteri nelle stringhe. Hanno una varietà di applicazioni, come la convalida dell'input dell'utente dai moduli HTML.
Puoi usare regex per convalidare con JavaScript o tramite l'attributo pattern HTML. È facile costruire espressioni regolari per convalidare tipi comuni di input di moduli come date e nomi utente.
