Trabalhando com números de telefone no código JavaScript

Um dos principais problemas que os desenvolvedores enfrentam em seu desenvolvimento inicial é como obter dados de um usuário e depois validar esses dados. Se você estiver recebendo uma entrada como um nome ou número de registro de um usuário, poderá validar facilmente esses dados, no entanto, ele se torna um pouco complexo quando você está recebendo entrada como um número de telefone.

Nesta postagem, examinaremos como pegar um número de telefone como entrada de um usuário e, em seguida, validá -lo de acordo com nossas necessidades nesta postagem usando a tag de entrada HTML5 com TEL Type e depois usando uma tag de entrada simples de HTML e validando -a nós mesmos usando JavaScript.

Usando a tag de entrada HTML5 com TEL Type

Podemos usar a tag de entrada HTML5 para receber a entrada do usuário e podemos dar o tipo de Tel Na tag de entrada para dizer ao navegador que esta caixa de entrada deve levar um número de telefone. A entrada HTML5 Tel Type tem algumas vantagens, sendo que podemos definir o obrigatório atributo na tag de entrada dizendo ao navegador que o usuário não pode prosseguir sem inserir o número de telefone e o outro é que podemos definir um atributo de padrão. Vamos demonstrar a tag de entrada em HTML:

No código acima, podemos ver que demos uma expressão regular como um padrão para a tag de entrada e, portanto, usando isso validará o número de telefone. Vamos ver um programa HTML adequado:

Exemplo: 123-456-7890

Enviar

No código acima, inicializamos a etiqueta da etiqueta que mostra um exemplo do número de telefone que é aceito pela tag de entrada abaixo, onde definimos um padrão. Agora a tag de entrada será responsável por validar a entrada obtida do usuário. Depois disso, definimos um botão e demos o tipo de botão. Sempre que um usuário clicará no enviar botão, ele gerará uma resposta com base na ação da tag do formulário. Alguns dos exemplos estão abaixo:

Se clicarmos no botão Enviar, deixando a caixa de entrada do número de telefone em branco:

Se dermos um padrão errado e clicar no botão Enviar, veremos o seguinte aviso:

Usando JavaScript para validar o número de telefone

Também podemos validar o número de telefone usando JavaScript. Para este primeiro, criaremos uma tag de entrada e um botão em HTML da seguinte maneira:

Exemplo: 123-456-7890

Enviar

Usamos o evento OnClick no elemento do botão, o que significa que sempre que um usuário clica no botão Enviar, a função Handleclick () começará a executar. Esta função handleclick () será inicializada em um arquivo separado código.JS que referenciamos usando o roteiro Tag visto no código acima.

Vamos agora trabalhar na parte JavaScript:

// Função para manusear o clique no botão Enviar
const handleclick = () =>
// obtendo a referência da entrada do MyPhone
var input = documento.getElementById ("myphone").valor;
// formato para o número de telefone
var format = /^\ (?([0-9] 3) \)?[-]?([0-9] 3) [-]?([0-9] 4) $/;
// declarações condicionais
if (input === ")
Alerta ("Insira o número de telefone")

else if (entrada.Match (formato))
alerta ("número de telefone:"+ entrada);

outro
alerta ("tipo usando formato correto");

No código acima, primeiro, inicializamos a função handleclick () e depois referenciamos o valor da tag de entrada. Depois disso, definimos o formato do número de telefone que queremos usar expressões regulares. Um exemplo de número de telefone aceito, neste caso, seria 123-456-7890. Em seguida, usamos as declarações condicionais e verificamos se a entrada estiver vazia, alerta, então Por favor, insira o número de telefone caso contrário, se a entrada corresponder ao formato, alerte esse número de outra forma alerta de que o número que o usuário tem tipos está no formato errado. Vamos ver a saída uma a uma:

Primeiro, clicaremos no botão Enviar enquanto saímos da caixa de entrada em branco:

Em seguida, digitaremos um número de formato errado, então veremos a seguinte saída:

No final, vamos para o formato correto e ver a saída:

Conclusão

Validar os números de telefone em JavaScript pode se tornar uma dor de cabeça para um novo desenvolvedor. Existem dois métodos que podemos usar para validar números de telefone. Primeiro, para obter informações de um usuário com a ajuda de uma tag de entrada HTML. Ao lado de validar o número de telefone, damos à tag de entrada o tipo de tel e um padrão para o qual ele deve validar. O segundo método está criando um programa JavaScript personalizado que validará seu número de telefone de acordo com um determinado formato dado como uma expressão regular.

Nesta postagem, aprendemos a receber um número de telefone como entrada de um usuário e, em seguida, validamos esse número de telefone usando dois métodos; Tag de entrada html5 com tipo Tel e lógica JavaScript personalizada.