-3

Gostaria de validar o telefone celular e residencial, adicionando o parenteses e traço automaticamente.

Celular

O que eu gostaria:

Validar se o celular contém o dígito 9 no início e DDD (2 dígitos), totalizando 11 dígitos. Logo, validar se contém 11 dígitos.

Adicionar o parenteses automaticamente e traço.

(51)97654-3389

E residencial:

O que eu gostaria:

Validar se contém o DDD (2 dígitos), totalizando 10 dígitos. Logo, validar se contém 10 dígitos.

Adicionar o parenteses e traço automaticamente.

(51)3456-5043

Pesquisei sobre regex mas não compreendi 100%.

Como poderia fazer isso com JavaScript/jQuery?

1
  • 1
    Para usar regex é preciso definir o formato dos números. Qualquer caractere diferente que possa variar no formato invalida a regex.
    – Sam
    Commented 2/10/2018 às 17:02

1 Resposta 1

3

Você pode utilizar uma expressão regular.

É uma string que define um padrão de busca. É um algoritmo. Podemos dizer que ela é uma linguagem para localização de padrões em texto. Veja: O que é uma expressão regular?

O JavaScript possui o RegExp.prototype.test(), que retorna true ou false para sua validação.

A expressão regular que utilizo para validar telefones brasileiros é o seguinte:

/^\(\d{2}\) \d{4,5}-\d{4}$/gi
{início da linha}({dois dígitos}) {de quatro a cinco dígitos}-{quatro dígitos}{fim da linha}

Essa expressão aceitará telefones no formato (XX) XXXX-XXXX e (XX) XXXXX-XXXX.

Para testar uma string contra ela, pode utilizar o test():

const isValidPhone = (phone) => {
  const brazilianPhoneRegex = /^\(\d{2}\) \d{4,5}-\d{4}$/gi;
  return brazilianPhoneRegex.test(phone);
};

isValidPhone("(41) 99778-2914");
// true

isValidPhone("(411) 99778-2914");
// false

isValidPhone("(41) 9778-2914");
// true

Se você quiser ser mais permissivo, eu faria de outra maneira. Pegaria o string de input, retiraria tudo que não é numérico e verificaria se ele tem de 10 a 11 dígitos, que é o formato do telefone com DDD de dois dígitos. Isso ficaria da seguinte forma:

const isValidPhone = (phone) => {
  const sanitizedPhone = phone.replace(/\D/g,'');
  return sanitizedPhone.length >= 10 && sanitizedPhone.length <= 11;
};

isValidPhone("(41) 99778-2914");
// true

isValidPhone("()41A977B8-----8319");
// true, pois tira todo caractere que não é numérico

Para a máscara, pode usar o jQuery, como você mesmo sugeriu. Para não reinventarmos a roda, existem algumas perguntas no Stack Overflow em Português que já responderam ela: Máscara de telefones usando jQuery Mask Plugin

Se quiser estender ou testar a expressão regular, eu utilizo bastante o site RegExr.

2
  • Particularmente eu colocaria os espaços e o hífen como opcionais para aumentar o range de possibilidades - partindo do pressuposto que a entrada não venha necessariamente em determinado padrão.
    – Woss
    Commented 2/10/2018 às 17:14
  • Não votei, mas acho que o autor da pergunta poderia esclarecer mais os formatos dos números para ambos os casos. Assim seria melhor dar uma resposta precisa.
    – Sam
    Commented 2/10/2018 às 17:19

Você deve fazer log-in para responder a esta pergunta.