Convalida i numeri di telefono in JavaScript con espressioni regolari

Convalida i numeri di telefono in JavaScript con espressioni regolari

Timestamp: 8 giugno 2023 8:54

Introduzione

Che tu te ne renda conto o meno, i dati sono diventati una parte cruciale della nostra vita quotidiana. Dall'ordinazione di cibo online alla ricerca di cibo per gatti, inviamo e riceviamo costantemente dati. In qualità di sviluppatori di applicazioni Web, è nostra responsabilità garantire che gli input dell'utente siano nel formato specificato in modo che il database comprenda correttamente i dati e l'applicazione rimanga solida.

La convalida del numero di telefono è importante perché garantisce che i dati vengano salvati in un formato coerente in tutto il database. Ad esempio, gli utenti potrebbero aver bisogno di chiarimenti sull'opportunità di inserire il prefisso internazionale prima del numero di telefono. Con un'adeguata convalida in atto, gli utenti possono determinare facilmente se è necessario. Allo stesso modo, l'esperienza utente migliora con un formato coerente, poiché sai cosa aspettarti dagli utenti e puoi implementare la logica di conseguenza. Sarebbe un'esperienza negativa per gli utenti se il codice si interrompesse in una fase successiva a causa di dati incoerenti.

Le espressioni regolari sono potenti strumenti per la corrispondenza dei modelli. Forniscono la flessibilità necessaria per abbinare modelli di vari tipi, a seconda del caso d'uso. Inoltre, le espressioni regolari sono indipendenti dalla lingua, rendendo la logica di convalida più portabile, in quanto è possibile integrare facilmente la convalida di base. Lavorare con regex in JavaScript è un compito semplice.

Questo articolo ti aiuterà a capire come utilizzare la potenza delle espressioni regolari per convalidare i numeri di telefono per la tua applicazione. Scriverai una semplice funzione JavaScript per convalidare i numeri di telefono con i prefissi internazionali.

Cos'è un'espressione regolare?

In termini semplici, un'espressione regolare corrisponde a un modello predefinito in una data stringa. È ampiamente utilizzato nei linguaggi di programmazione e utilizzato principalmente per convalidare input di un formato specifico. Inoltre, le espressioni regolari sono comunemente utilizzate per la ricerca, la divisione e la sostituzione di modelli specificati.

Diciamo che vuoi trovare un indirizzo email in un documento. L'indirizzo e-mail può essere qualsiasi indirizzo, non uno specifico. Scrivere una semplice espressione ti aiuterà a trovare rapidamente lo schema poiché conosci già la struttura di un indirizzo email.

Un'espressione regolare utilizza caratteri speciali per denotare diversi tipi di pattern. Per esempio:

  • . (punto) è un carattere speciale che può corrispondere a qualsiasi carattere.
  • * (asterisco) corrisponde al carattere precedente 0 o più volte.
  • + (più) corrisponde al carattere precedente una o più volte.
  • ? (punto interrogativo) rende facoltativo il carattere precedente.
  • [abc] corrisponde a qualsiasi carattere a, b, o c.
  • (abc) raggruppa i caratteri insieme.
  • ^ (caret) corrisponde all'inizio della riga.
  • $ (dollaro) corrisponde alla fine della riga.

Questi sono solo alcuni. Se vuoi approfondire e conoscere più schemi, puoi fare riferimento a questo documento di Microsoft.

Costruiamo un'espressione regolare che controlla se un dato set di numeri è un codice postale di cinque cifre. Per iniziare a scrivere l'espressione, useremo il ^ (accento circonflesso), poiché corrisponde all'inizio della riga. In un'espressione regolare, d corrisponde a qualsiasi cifra e un numero tra parentesi graffe ({}) corrisponde all'elemento precedente esattamente il numero di volte indicato all'interno delle parentesi graffe. Dall'elenco sopra, lo sappiamo $ viene utilizzato per abbinare la fine della riga.

Combinando queste informazioni, otteniamo un'espressione regolare come questa:

/^d{5}$/

Esaminiamo ora il grafico sottostante per comprendere meglio l'espressione.

Espressione regolare per la corrispondenza del codice postale a cinque cifre

Espressione regolare per la corrispondenza del codice postale a cinque cifre

Ora che abbiamo una conoscenza di base delle espressioni regolari e della loro costruzione generale, è un buon momento per esplorare come queste espressioni possono essere implementate in una funzione JavaScript.

Espressioni regolari JavaScript

JavaScript è il linguaggio di programmazione più popolare tra gli sviluppatori. Poiché quasi tutte le applicazioni Web richiedono JavaScript, è fondamentale capire come possono essere utilizzate le espressioni regolari in questo linguaggio.

In JavaScript, il RegExp oggetto viene utilizzato per la corrispondenza del modello. Questo oggetto può essere utilizzato in due modi:

  • Usando la notazione letterale, dove uno schema è formattato tra due barre
  • Usando la notazione del costruttore, dove una stringa o a RegExp l'oggetto viene passato

La notazione letterale può essere usata semplicemente come questa:

const expr = /^d{5}$/i;

D'altra parte, con la notazione del costruttore, dovrai usare il RegExp costruttore per crearne un'istanza. Ecco come appare:

const expr = new RegExp(/^d{5}$/, "i");

Puoi leggere ulteriori informazioni sull'oggetto RegExp dal file documenti MDN ufficiali. Ora, esploriamo l'importanza della convalida del numero di telefono e i vari componenti di un numero di telefono.

Convalida del numero di telefono e componenti

La convalida dei numeri di telefono sul lato client è fondamentale quando si salvano i numeri di telefono nel database. Senza un'adeguata convalida, il tuo codice potrebbe presentare comportamenti imprevisti.

Dai un'occhiata alla nostra guida pratica e pratica per l'apprendimento di Git, con le migliori pratiche, gli standard accettati dal settore e il cheat sheet incluso. Smetti di cercare su Google i comandi Git e in realtà imparare esso!

Ad esempio, supponi di utilizzare un servizio che richiede il prefisso internazionale insieme al numero di telefono, ma i tuoi utenti non li includono a causa della mancanza di convalida. Ora hai solo il numero senza il prefisso internazionale e un servizio che invia messaggi di testo SMS potrebbe non riuscire a causa di ciò. Questo è solo uno scenario ipotetico. Altri problemi possono persino causare l'arresto anomalo dell'applicazione. È fondamentale gestire correttamente i tuoi dati nel frontend, assicurandoti di salvare dati puliti e coerenti nel tuo database.

In genere, un numero di telefono è composto da quattro parti:

  • Prefisso internazionale: le prime 1-3 cifre (a seconda del Paese) definiscono il Paese del numero di telefono. Questo codice consente di instradare la chiamata al paese corretto. Un codice paese non può iniziare con uno 0.

L'articolo che stai attualmente modificando è intitolato "Convalida i numeri di telefono in JavaScript con le espressioni regolari". La parte di testo da modificare:

  • Prefisso: noto anche come città o prefisso telefonico, questa parte del numero consente di indirizzare la chiamata all'area geografica corretta all'interno del paese. In alcuni paesi, come gli Stati Uniti, i prefissi possono anche indicare un insieme specifico di numeri di telefono per un particolare servizio. Inoltre, in Nord America, un prefisso non può iniziare con uno 0 o un 1.
  • Prefisso telefonico: questa sequenza di numeri viene assegnata a uno specifico ufficio centrale o centrale telefonica dalla compagnia telefonica, restringendo ulteriormente la specifica area geografica o quartiere.
  • Numero di linea: questo è il numero univoco assegnato alla linea telefonica specifica per una famiglia o un'azienda all'interno dell'area del prefisso. Questa parte del numero di solito garantisce che ogni numero di telefono all'interno di un paese, area e prefisso sia univoco.

Escludendo il prefisso del paese, combinando le parti rimanenti si ottiene un numero di telefono di dieci cifre in cui il prefisso e il prefisso telefonico sono di tre cifre ciascuno e il numero di linea è di quattro cifre.

Passiamo ora alla scrittura di una funzione JavaScript che convalida un numero di telefono in base a questi criteri utilizzando espressioni regolari.

Crea una RegEx per la convalida del numero di telefono

Abbiamo già compreso la struttura di base di un numero di telefono. Abbiamo anche imparato a conoscere le espressioni regolari e come possono essere utilizzate in JavaScript. In questa sezione, scriveremo una semplice funzione JavaScript che convalida i numeri di telefono del formato specificato:

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

Ad esempio, un numero di telefono valido per la nostra funzione sarà così +123-456-789-1234, Ma non +012-123-456-7890 or +12-123-456-789, poiché questi numeri di telefono non seguono le regole dei numeri di telefono discusse in precedenza.

Passiamo ora alla scrittura dell'espressione regolare. Innanzitutto, controlliamo se il prefisso internazionale è composto da 1 a 3 cifre e non inizia con uno zero.

Per indicare l'inizio dell'espressione regolare, utilizzare un accento circonflesso (^), quindi verificare che esista un vantaggio all'inizio. Per questo scopo, usiamo +, che corrisponderà all'esistenza del plus all'inizio. Ora, per garantire che le cifre del prefisso internazionale siano comprese tra una e tre cifre e che la prima cifra non sia zero, possiamo scrivere qualcosa del genere: [1-9]{1}[0-9]{0,2}. Qui, [1-9]{1} specifica che qualsiasi cifra da 1 a 9 può esistere esattamente una volta e, analogamente, [0-9]{0,2} indica che qualsiasi cifra da 0 a 9 può esistere da zero a due volte.

Per il separatore, possiamo aggiungere a - (trattino) tra le sezioni del numero. Uno - può essere aggiunto dopo la convalida del codice paese. Quindi, a questo punto, la regex si presenta così:

^+[1-9]{1}[0-9]{0,2}-$

Il $ alla fine specifica la fine della riga. Ora, per il prefisso, questo sarà abbastanza simile. Un prefisso non può iniziare con uno zero o uno. Quindi, la prima parte sarà [2-9]{1}. Ciò corrisponde al fatto che il primo numero è compreso tra 2 e 9. Questa corrispondenza si verifica una volta. Quindi, per il resto del codice, possiamo scrivere [0-9]{2}. Ciò assicurerà che ci siano esattamente due cifre dopo la prima e, per ogni cifra, l'intervallo sia compreso tra 0 e 9. Ancora una volta, aggiungi il trattino separatore alla fine.

Ora, l'espressione regolare completa sarà simile a questa:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

Usiamo ancora lo stesso schema per controllare il prefisso telefonico. Supponiamo che anche il prefisso telefonico non possa iniziare con uno zero o uno. Quindi, aggiungendo [2-9]{1}[0-9]{2} e un trattino di nuovo renderà l'espressione così:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

L'unica parte che rimane ora è il numero di riga, che può essere qualsiasi cifra con una lunghezza esattamente di quattro. Questo è più semplice degli altri. L'espressione è [0-9]{4}.

L'espressione completa è la seguente:

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

Devi aver notato l'uso frequente di parentesi graffe. Vengono utilizzati per abbinare le istanze fornite all'interno del tutore. Se è una cifra specifica, tipo {1}, corrisponderà al modello precedente esattamente una volta. Tuttavia, se si tratta di un intervallo, come {0, 2}, definisce il numero minimo e massimo di corrispondenze. Quindi, nel caso di {0, 2}, corrisponderà al modello per un minimo di zero volte e un massimo di due volte.

Il cartamodello è pronto. Ora possiamo scrivere una semplice funzione JavaScript per verificare se un numero di telefono è valido utilizzando l'espressione regolare. Ecco la funzione:

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234");

La funzione è abbastanza semplice. Richiede un numero di telefono come input. Il modello di espressione regolare è memorizzato all'interno di una variabile chiamata pattern. Il modello viene istanziato utilizzando il costruttore RegExp e passando l'espressione come parametro al costruttore. Quindi, testiamo il numero di telefono utilizzando il test metodo disponibile nell'oggetto. Utilizzando un'istruzione if-else, controlliamo se il numero di telefono supera il test. In tal caso, restituiamo true e inviamo un messaggio di console che afferma che il file Phone number is valid. In caso contrario, restituisce false e visualizza un messaggio di console che indica che il numero di telefono non è valido.

Con questo, siamo a posto. Ora puoi testare i tuoi numeri di telefono per vedere se sono validi.

Sommario

Questo articolo ha lo scopo di fornire una breve panoramica delle espressioni regolari, dei loro usi e di come possono essere applicate per convalidare i numeri di telefono. Abbiamo anche discusso i vari componenti di un numero di telefono e come ogni componente può essere testato.

Con una conoscenza di base delle espressioni regolari, ora puoi esplorare modelli aggiuntivi. Puoi anche usare strumenti come regex101 per convalidare le tue espressioni online.

Timestamp:

Di più da Impilamento