Número de telefone regex em javascript

Ao verificar um formulário HTML, é fundamental validar o número de telefone. Dependendo da região, um número de telefone válido pode ter vários formatos. Existem regras gerais, como limitar o número de dígitos ou manter o número a apenas valores numéricos. No entanto, em algumas situações, um número de telefone pode ter um formato que inclui caracteres especiais, como um sinal de mais, Dash e Parê -is, ou pode ter um formato completamente diferente de outros países ou regiões.

Este estudo explicará o regex para validar o número de telefone em JavaScript.

Número de telefone regex em javascript

Expressões regulares são o método mais simples para validar números de telefone em JavaScript. No entanto, dependendo das preferências do usuário, os números de telefone podem ser formatados de várias maneiras. Aqui estão algumas expressões regulares para validação do número de telefone.

Exemplo 1: Validação básica do número de telefone
Aqui, os padrões regex abaixo do rumo ou as expressões regulares permitem apenas números de telefone com 10 dígitos. Nenhum personagem especial, incluindo espaços, é permitido.

Padrão regex
Siga o padrão regex fornecido para a validação básica do número de telefone:

/^\ d 10 $/

Ou

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

Aqui está um colapso de todos os elementos para ajudar os leitores a entender o que ele contém.

• ““^”Indica o início da corda
• ““/”O personagem de slash forward é usado para indicar os limites da expressão regular
• ““d”Significa dígitos
• ““”Indica o limite
• ““\”Personagem de barriga é o personagem de fuga
• ““$”Indica o fim da corda

Use qualquer uma das regexes acima para o número de telefone validador sem nenhum caractere especial ou um delimitador.

No arquivo html, crie um formulário usando o código abaixo:

Regex básico do telefone sem delimitador

Telefone #:

Por favor insira um número de telefone válido

Enviar

No trecho de código acima,

• Primeiro, crie um formulário com o ID “forma”.
• Em seguida, crie um campo de texto de entrada para o valor de entrada e atribua um ID “número”.
• Um parágrafo usando

  tag que mostrará um erro quando o valor de entrada não for válido.

• Crie um botão Enviar com o ID “enviar”.

As seguintes classes CSS são usadas para a mensagem de erro:

.erro

cor vermelha;

.msg

Mostrar nenhum;

O formulário HTML parecerá:

No arquivo JavaScript, use as linhas de código abaixo:

função validatephoneNumber (e)
var pnumber = documento.getElementById ('número').valor;
se (!phoneregex (pnumber))
documento.getElementById ('erro').Lista de classe.add ('msg');
alerta ("submetido");

outro
documento.getElementById ('erro').Lista de classe.remover ('msg');

e.prevenvDefault ();

Neste snippet de código:

• Defina uma função “validatephoneNumber ()”.
• Obtenha o valor do campo de entrada usando o ID “número”Com a ajuda do“getElementById ()”Método e armazene -o em uma variável“pnumber”.
• Chame a função “phoneregex ()”Ao passar o número de entrada“pnumber”Como argumento, e verifique se o número de entrada é igual ao regex.
  • Se sim! Em seguida, mostra um alerta com a mensagem “submetido”E adiciona a classe“msg”Usando o“Lista de classe.adicionar()”Método que não exibe nenhum.
  • Se a condição não for verdadeira, mostre o erro chamando o “Lista de classe.remover()”Método, que mostrará um erro.

Depois disso, defina uma função chamada “phoneregex ()”Onde o padrão regex será definido para o número de telefone validativo:

função phoneregex (input_str)
var regpattern = /^\ d 3 \ d 3 \ d 4 $ /;
retornar regpattern.teste (input_str);

Por fim, chame a função "validatephoneNumber ()”No envio usando o ID do botão“enviar”Com a ajuda do“addEventListener ()”Método:

documento.getElementById ('forma').addEventListener ('submeter', validatephoneNumber);

Saída

A saída acima significa que o padrão regex apenas para números de telefone com 10 dígitos e sem nenhum personagem ou delimitador especial funciona com sucesso.

Exemplo 2: Validação complexa do número de telefone
Os padrões regex abaixo do rumo ou expressões regulares permitem números de telefone com 10 dígitos e caracteres especiais, incluindo plus sigil, traço e parênteses.

Padrão Regex para validar números de telefone com Delimiter Dash (-)
O regex para validar números de telefone com 10 dígitos e um traço especial de caracteres (-):

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

O padrão mostra:

• ““^”Indica o início da corda
• ““/”O personagem de slash forward é usado para indicar os limites da expressão regular
• ““d”Significa dígitos
• ““”Indica o limite
• ““[-]”Indica um personagem especial permitido
• ““\”Personagem de barriga é o personagem de fuga
• ““$”Indica o fim da corda

Adicione o padrão regex acima no “phoneregex ()”Função definida:

função phoneregex (input_str)
var regpattern = /^\ d 3 [-] \ d 3 [-] \ d 4) $ /
retornar regpattern.teste (input_str);

A saída correspondente será:

Padrão REGEX para validar números de telefone com delimitadores, incluindo Dash (-) e Brace ()
O regex para validar números de telefone com 10 dígitos e braços de caracteres especiais () e traço (-):

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

O padrão mostra:

• ““^”Indica o início da corda
• ““/”O personagem de slash forward é usado para indicar os limites da expressão regular
• ““d”Significa dígitos
• ““”Indica o limite
• ““[-]”Indica um personagem especial permitido
• ““(?”Também denota conforme permitido na entrada
• ““\”Personagem de barriga é o personagem de fuga
• ““$”Indica o fim da corda

Anexar a expressão regular acima no “phoneregex ()”Função definida:

função phoneregex (input_str)
var regpattern = /^\ (?(\ d 3) \)?[-]?(\ d 3) [-]?(\ d 4) $/;
retornar regpattern.teste (input_str);

Saída

A saída acima aceita os caracteres ou delimitadores especiais em entrada, incluindo aparelhos e traços com o número de telefone de 10 dígitos. Ele exibe um erro enquanto o sinal (+) é usado na entrada.

Padrão Regex para validar números de telefone com todos os delimitadores, incluindo Dash (-), Suportes (), Dot (.), Espaços e sinal (+)
O regex para validar números de telefone com 10 dígitos e caracteres especiais BRACES (), DASH (-), DOT (.), o sinal de plus (+) e o espaço:

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

O padrão mostra:

• ““^”Indica o início da corda
• ““/”O personagem de slash forward é usado para indicar os limites da expressão regular
• ““d”Significa dígitos
• ““”Indica o limite
• ““[-]”Indica um personagem especial permitido
• ““[(]?”Também denota conforme permitido na entrada
• ““\ s”Denota um espaço
• ““\.”Indica o ponto
• ““\”Personagem de barriga é o personagem de fuga
• ““$”Indica o fim da corda

Use o padrão acima no “phoneregex ()”Função definida:

função phoneregex (input_str)
var regpattern = /^[\+]?[(]?[0-9] 3 [)]?[-\ s \.]?[0-9] 3 [-\ s \.]?[0-9] 4 $/;
retornar regpattern.teste (input_str);

Saída

Compilamos todos os possíveis padrões regex ou expressões regulares para validar os números de telefone.

Conclusão

Usar expressões regulares no JavaScript é a maneira mais simples de validar números de telefone. Existem muitos cheques que o desenvolvedor pode aplicar no número de telefone com a ajuda de regex. As verificações podem ser apenas números ou números com caracteres ou delimitadores especiais, incluindo traços, aparelhos, pontos, espaços e o sinal de posição. Este estudo explica diferentes regexes que podem validar o número de telefone em javascript.