Lavorare con i numeri di telefono nel codice JavaScript

Uno dei principali problemi che gli sviluppatori affrontano nel loro sviluppo iniziale è come prendere i dati da un utente e quindi convalidare tali dati. Se si sta prendendo un input come un nome o un numero di registrazione da un utente, puoi facilmente convalidare tali dati, tuttavia, diventa un po 'complesso quando si sta assumendo input come numero di telefono.

In questo post, esamineremo come prendere un numero di telefono come input da un utente e quindi convalidarlo in base alle nostre esigenze in questo post utilizzando il tag di input HTML5 con il tipo Tel e quindi utilizzando un semplice tag di input di HTML e convalidalo noi stessi usando JavaScript.

Utilizzo del tag di ingresso HTML5 con tipo Tel

Possiamo utilizzare il tag di input HTML5 per prendere input dall'utente e possiamo fornire il tipo di tel Nel tag di input per dire al browser che questa casella di input dovrebbe prendere un numero di telefono. Il tipo di input tel HTML5 ha alcuni vantaggi che possiamo impostare il necessario attributo nel tag di input che dice al browser che l'utente non può procedere senza immettere il numero di telefono e l'altro è che possiamo impostare un attributo di pattern. Dimostriamo il tag di input in HTML:

Nel codice sopra possiamo vedere che abbiamo dato un'espressione regolare come modello al tag di input e quindi usando questo convaliderà il numero di telefono. Vediamo un programma HTML corretto:

Esempio: 123-456-7890

Invia

Nel codice sopra, abbiamo inizializzato il tag dell'etichetta che mostra un esempio del numero di telefono accettato dal tag di input seguente in cui abbiamo definito uno schema. Ora il tag di input sarà responsabile della convalida dell'input tratto dall'utente. Dopo questo, abbiamo definito un pulsante e gli abbiamo dato il tipo di pulsante. Ogni volta che un utente fa clic su invia pulsante genererà una risposta in base all'azione del tag modulo. Alcuni esempi sono sotto:

Se facciamo clic sul pulsante Invia lasciando la casella di input del numero di telefono vuoto:

Se diamo uno schema sbagliato e facciamo clic sul pulsante di invio vedremo il seguente avvertimento:

Utilizzo di JavaScript per convalidare il numero di telefono

Possiamo anche convalidare il numero di telefono usando JavaScript. Per questo prima creeremo un tag di input e un pulsante in HTML nel modo seguente:

Esempio: 123-456-7890

Invia

Abbiamo utilizzato l'evento OnClick sull'elemento pulsante che significa ogni volta che un utente fa clic sul pulsante di invio, la funzione HandleClick () inizierà l'esecuzione. Questa funzione HandleClick () verrà inizializzata in un file separato codice.js a cui abbiamo fatto riferimento usando il sceneggiatura Tag visto nel codice sopra.

Lavoriamo ora sulla parte JavaScript:

// Funzione da gestire Fare clic sul pulsante Invia
const HandleClick = () =>
// Ottenere il riferimento dell'ingresso di myphone
var input = document.getElementById ("myphone").valore;
// formato per il numero di telefono
var format = /^\ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $/;
// Dichiarazioni condizionali
if (input === ")
Avviso ("Inserisci il numero di telefono")

altro se (input.match (formato))
Avviso ("Numero di telefono:"+ Input);

altro
avviso ("tipo usando il formato corretto");

Nel codice sopra, in primo luogo, abbiamo inizializzato la funzione HandleClick () e quindi facciamo riferimento al valore del tag di input. Successivamente, definiamo il formato del numero di telefono che vogliamo utilizzare espressioni regolari. Un esempio di numero di telefono accettato, in questo caso, sarebbe 123-456-7890. Successivamente, utilizziamo le istruzioni condizionali e controlliamo che se l'ingresso è vuoto, Avviso Inserisci il numero di telefono Altrimenti se l'ingresso corrisponde al formato, avvisare quel numero altrimenti avvisare che il numero dell'utente ha i tipi è nel formato sbagliato. Visingiamo l'output uno per uno:

Innanzitutto, faremo clic sul pulsante di invio lasciando vuoto la casella di input:

Successivamente, digitare un numero di formato sbagliato, quindi vedremo il seguente output:

Alla fine, andiamo per il formato corretto e vediamo l'output:

Conclusione

La convalida dei numeri di telefono in JavaScript può diventare un mal di testa per un nuovo sviluppatore. Esistono due metodi che possiamo usare per convalidare i numeri di telefono. Innanzitutto, per prendere input da un utente con l'aiuto di un tag di input HTML. Accanto a convalidare il numero di telefono diamo al tag di input il tipo di Tel e uno schema a cui dovrebbe convalidare. Il secondo metodo sta realizzando un programma JavaScript personalizzato che convaliderà il tuo numero di telefono in base a un determinato formato indicato come espressione regolare.

In questo post, abbiamo imparato a prendere un numero di telefono come input da un utente e quindi abbiamo convalidato quel numero di telefono utilizzando due metodi; Tag di ingresso HTML5 con tipo Tel e logica JavaScript personalizzata.