Numero di telefono Regex in JavaScript

Durante la verifica di un modulo HTML, è fondamentale convalidare il numero di telefono. A seconda della regione, un numero di telefono valido potrebbe avere diversi formati. Esistono regole generali, come limitare il numero di cifre o mantenere il numero solo a valori numerici. Tuttavia, in alcune situazioni, un numero di telefono potrebbe avere un formato che include caratteri speciali come un segno più, un trattino e una parentesi, oppure può avere un formato completamente diverso rispetto ad altri paesi o regioni.

Questo studio spiegherà il regex per la convalida del numero di telefono in JavaScript.

Numero di telefono Regex in JavaScript

Le espressioni regolari sono il metodo più semplice per convalidare i numeri di telefono in JavaScript. Tuttavia, a seconda delle preferenze dell'utente, i numeri di telefono possono essere formattati in vari modi. Ecco alcune espressioni regolari per la convalida del numero di telefono.

Esempio 1: numero di telefono di base Regex Convalidtion
Qui, i modelli di regex di seguito o le espressioni regolari consentono solo numeri di telefono con 10 cifre. Non sono ammessi personaggi speciali, compresi gli spazi.

REGEX MOTORE
Seguire il modello regex dato per la convalida del numero di telefono di base:

/^\ d 10 $/

O

/^\ d 3 \ d 3 \ d 4 $/

Ecco una ripartizione di tutti gli elementi per aiutare i lettori a capire cosa contiene.

• "^"Indica l'inizio della stringa
• "/"Il carattere di slash in avanti viene utilizzato per indicare i confini dell'espressione regolare
• "D"Sta per le cifre
• ""Indica il limite
• "\"Il personaggio di Backslash è il personaggio di fuga
• "$"Indica la fine della stringa

Utilizzare uno qualsiasi dei regex di cui sopra per il numero di telefono di convalida senza alcun carattere speciale o delimitatore.

Nel file HTML, creare un modulo utilizzando il codice seguente:

Telefono di base regex senza delimitatore

Telefono #:

Si prega di inserire un numero di telefono valido

Invia

Nello snippet di codice sopra,

• Innanzitutto, crea un modulo con l'ID "modulo".
• Quindi creare un campo di testo di input per il valore di input e assegnare un ID "numero".
• Un paragrafo che utilizza

  Tag che mostrerà un errore quando il valore di input non è valido.

• Crea un pulsante di invio con l'ID "invia".

Le seguenti classi CSS vengono utilizzate per il messaggio di errore:

.errore

colore rosso;

.MSG

visualizzazione: nessuno;

Il modulo HTML sembrerà:

Nel file JavaScript, usa le righe seguenti del codice:

funzione validatephonenumber (e)
var pnumber = documento.getElementById ('Number').valore;
Se (!Phoneregex (pnumber))
documento.getElementById ('Errore').classlist.Aggiungi ('msg');
avviso ("inviato");

altro
documento.getElementById ('Errore').classlist.rimuovere ('msg');

e.preventDefault ();

In questo frammento di codice:

• Definire una funzione "ConvalidatePhonenumber ()".
• Ottieni il valore del campo di input usando l'ID "numero"Con l'aiuto del"getElementById ()"Metodo e archivialo in una variabile"pnumber".
• Chiama la funzione "Phoneregex ()"Passando il numero di input"pnumber"Come argomento e controlla se il numero di input è uguale al regex.
  • Se si! Quindi mostra un avviso con il messaggio "Presentato"E aggiunge la classe"MSG" usando il "classlist.aggiungere()"Metodo che non visualizza nessuno.
  • Se la condizione non è vera, mostra l'errore chiamando "classlist.rimuovere()"Metodo, che mostrerà un errore.

Dopodiché, definisci una funzione chiamata "Phoneregex ()"Dove verrà definito il pattern Regex per il numero di telefono di convalida:

funzione phoneregex (input_str)
var regpattern = /^\ d 3 \ d 3 \ d 4 $ /;
restituire regpattern.test (input_str);

Infine, chiama la funzione "ConvalidatePhonenumber ()"Sull'invio utilizzando l'ID del pulsante"invia"Con l'aiuto del"addEventListener ()" metodo:

documento.getElementById ('forma').addEventListener ('invio', validatiPhonEnumber);

Produzione

L'output sopra indica che il modello di regex solo per i numeri di telefono con 10 cifre e senza alcun carattere o delimitatore speciale funziona correttamente.

Esempio 2: Numero di telefono complesso Regex Convalida
I modelli di regex o espressioni regolari di seguito consentono numeri di telefono con 10 cifre e caratteri speciali tra cui segni più, cruscotto e parentesi.

REGEX Modello per la convalida dei numeri di telefono con Delimiter Dash (-)
Il regex per la convalida dei numeri di telefono con 10 cifre e un trattino speciale del carattere (-):

/^\ d 3 [-] \ d 3 [-] \ d 4) $/

Il modello mostra:

• "^"Indica l'inizio della stringa
• "/"Il carattere di slash in avanti viene utilizzato per indicare i confini dell'espressione regolare
• "D"Sta per le cifre
• ""Indica il limite
• "[-]"Indica un carattere speciale consentito
• "\"Il personaggio di Backslash è il personaggio di fuga
• "$"Indica la fine della stringa

Aggiungi il modello di regex sopra nel "Phoneregex ()"Funzione definita:

funzione phoneregex (input_str)
var regpattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ /
restituire regpattern.test (input_str);

L'output corrispondente sarà:

REGEX MOTORE PER VALIDARE I NUMERI di telefono con delimitatori tra cui Dash (-) e Braces ()
Il regex per la convalida dei numeri di telefono con 10 cifre e caratteri speciali Braces () e Dash (-):

/^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/

Il modello mostra:

• "^"Indica l'inizio della stringa
• "/"Il carattere di slash in avanti viene utilizzato per indicare i confini dell'espressione regolare
• "D"Sta per le cifre
• ""Indica il limite
• "[-]"Indica un carattere speciale consentito
• "(?"Indica anche come consentito nell'input
• "\"Il personaggio di Backslash è il personaggio di fuga
• "$"Indica la fine della stringa

Aggiungi l'espressione regolare di cui sopra nel "Phoneregex ()"Funzione definita:

funzione phoneregex (input_str)
var regpattern = /^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/;
restituire regpattern.test (input_str);

Produzione

L'output sopra accetta i caratteri speciali o i delimitatori in input, inclusi pareti e trattini con il numero di telefono a 10 cifre. Visualizza un errore mentre il segno (+) viene utilizzato nell'ingresso.

REGEX MODELLO PER VALIVAMENTO I NUMERI di telefono con tutti i delimitatori tra cui Dash (-), BAFT (), DOT (.), Spazi e (+) segno
Il regex per la convalida dei numeri di telefono con 10 cifre e caratteri speciali Braces (), Dash (-), Dot (.), il segno più (+) e lo spazio:

/^[\+]?[(]?[0-9] 3 [)]?[-\S\."?[0-9] 3 [-\ s \."?[0-9] 4 $/

Il modello mostra:

• "^"Indica l'inizio della stringa
• "/"Il carattere di slash in avanti viene utilizzato per indicare i confini dell'espressione regolare
• "D"Sta per le cifre
• ""Indica il limite
• "[-]"Indica un carattere speciale consentito
• "[(]?"Indica anche come consentito nell'input
• "\S"Indica uno spazio
• "\."Indica il punto
• "\"Il personaggio di Backslash è il personaggio di fuga
• "$"Indica la fine della stringa

Usa il modello sopra nel "Phoneregex ()"Funzione definita:

funzione phoneregex (input_str)
var regpattern = /^[\+]?[(]?[0-9] 3 [)]?[-\S\."?[0-9] 3 [-\ s \."?[0-9] 4 $/;
restituire regpattern.test (input_str);

Produzione

Abbiamo compilato tutti i possibili modelli di regex o espressioni regolari per la convalida dei numeri di telefono.

Conclusione

L'uso di espressioni regolari in JavaScript è il modo più semplice per convalidare i numeri di telefono. Ci sono molti controlli che lo sviluppatore può applicare sul numero di telefono con l'aiuto di Regex. I controlli possono essere solo numeri o numeri con caratteri speciali o delimitatori, inclusi trattini, parentesi graffe, punti, spazi e il segno più. Questo studio spiega diversi regex che possono convalidare il numero di telefono in JavaScript.