Como validar telefone e criar máscara em JavaScript
Benedito Silva Júnior
29/11/2021
Validar um número de telefone e aplicar uma máscara de formatação são tarefas comuns ao desenvolver formulários interativos. Garantir que o usuário insira o telefone no formato correto melhora a experiência e evita erros de dados. Neste post, vamos aprender como validar telefone e criar máscara em JavaScript.
O que é validação e máscara?
- Validação: Verifica se o número de telefone está no formato correto (por exemplo, se contém a quantidade certa de dígitos).
- Máscara: Formata a entrada do número de telefone à medida que o usuário digita, facilitando a visualização e garantindo que o formato esteja correto.
Por exemplo, para um número de telefone no Brasil, o formato ideal pode ser (XX) XXXXX-XXXX.
Criando a máscara de telefone
Vamos criar uma função que, à medida que o usuário digita, formata o número no formato de telefone brasileiro (XX) XXXXX-XXXX.
HTML
Primeiro, crie um campo de entrada no seu HTML para o número de telefone:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validação de Telefone com Máscara</title>
</head>
<body>
<h1>Validação de Telefone com Máscara</h1>
<form>
<label for="telefone">Telefone:</label>
<input type="text" id="telefone" placeholder="(00) 00000-0000" maxlength="15" oninput="aplicarMascara(this)">
<p id="erro" style="color: red;"></p>
</form>
<button onclick="validarTelefone()">Validar Telefone</button>
<p id="resultado"></p>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
Agora, vamos criar a função de máscara e a função de validação no arquivo script.js:
// Função para aplicar máscara no telefone
function aplicarMascara(input) {
// Remove todos os caracteres que não são dígitos
let telefone = input.value.replace(/\D/g, '');
// Aplica a máscara (XX) XXXXX-XXXX
if (telefone.length > 10) {
telefone = telefone.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
} else if (telefone.length > 5) {
telefone = telefone.replace(/^(\d{2})(\d{4})/, '($1) $2-');
} else if (telefone.length > 2) {
telefone = telefone.replace(/^(\d{2})/, '($1) ');
}
// Atualiza o valor do campo de entrada
input.value = telefone;
}
// Função para validar telefone
function validarTelefone() {
const telefone = document.getElementById('telefone').value;
const regexTelefone = /^\(\d{2}\) \d{5}-\d{4}$/; // Padrão de telefone brasileiro (XX) XXXXX-XXXX
// Verifica se o número corresponde ao formato da expressão regular
if (regexTelefone.test(telefone)) {
document.getElementById('resultado').innerText = "Telefone válido!";
document.getElementById('erro').innerText = "";
} else {
document.getElementById('resultado').innerText = "";
document.getElementById('erro').innerText = "Número de telefone inválido. Por favor, siga o formato (XX) XXXXX-XXXX.";
}
}Explicação do código
- Máscara de telefone (
aplicarMascara):
- A função
aplicarMascaraé chamada sempre que o usuário digita no campo de telefone, formatando a entrada automaticamente. - A função utiliza expressões regulares para remover todos os caracteres que não são números e, em seguida, aplica a máscara
(XX) XXXXX-XXXX. - Dependendo do número de dígitos, a função aplica formatações intermediárias (por exemplo,
(XX) XXXX-quando há 6 dígitos).
- A função
- Validação de telefone (
validarTelefone):
- A função
validarTelefoneé acionada quando o botão “Validar Telefone” é clicado. - Ela utiliza uma expressão regular (
regexTelefone) que corresponde ao formato(XX) XXXXX-XXXXpara verificar se o telefone inserido está no formato correto. - Se o número for válido, uma mensagem de sucesso é exibida. Caso contrário, uma mensagem de erro aparece.
- A função
Testando o código
Digite um número de telefone no campo. À medida que você digita, o número será automaticamente formatado para o padrão (XX) XXXXX-XXXX.
Exemplo:
Entrada: 11987654321
Resultado: (11) 98765-4321Clique no botão “Validar Telefone”. Se o telefone estiver no formato correto, a mensagem Telefone válido! será exibida.
Se o telefone não estiver no formato correto (por exemplo, com dígitos a menos), a mensagem Número de telefone inválido. Por favor, siga o formato (XX) XXXXX-XXXX. será exibida.
Melhorias e personalizações
- Validação com diferentes formatos: Dependendo do seu país ou região, você pode ajustar a expressão regular e a máscara para se adequar ao formato local.
- Validação adicional: Além do formato, você pode adicionar validações mais avançadas, como verificar se o DDD é válido.
- Máscara para outros campos: Essa mesma técnica pode ser usada para formatar outros tipos de entrada, como CPF, CNPJ, CEP, entre outros.
Aplicar uma máscara de formatação e validar números de telefone em JavaScript é uma tarefa simples que melhora a experiência do usuário e garante que os dados sejam inseridos corretamente.
Neste post, mostramos como formatar automaticamente um número de telefone e validá-lo com expressões regulares. Agora, você pode aplicar essas técnicas em seus próprios projetos para garantir uma entrada de dados mais confiável.
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre como validar telefone e criar máscara em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários