1

Pessoal alguém teria alguma validação para campo tipo telefone?

Onde o usuario não consegue colocar números fictícios no campo como sequencias de número (99999 8888 123456) ou algo do tipo?

1

4 Respostas 4

1

Eu utilizo o plugin jQuery mask, para gerencias minhas mascaras.

Code

Apenas adaptei o final para validar sua necessidade.

$(document).ready(function(){
    $('body').on('focus', '.phone', function(){
        var maskBehavior = function (val) {
            return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
        },
        options = {
            onKeyPress: function(val, e, field, options) {
                field.mask(maskBehavior.apply({}, arguments), options);

                if(field[0].value.length >= 14){
                    var val = field[0].value.replace(/\D/g, '');
                    if(/\d\d(\d)\1{7,8}/.test(val)){
                        field[0].value = '';
                        alert('Telefone Invalido');
                    }
                }
            }
        };
        $(this).mask(maskBehavior, options);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>

<input type="text" placeholder="Telefone" name="phone" class="phone"/>

Explicação

var maskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
}

Esta parte verifica se vai ser 9 ou 8 dígitos e formata a mascara do jeito correto.

options = {
    onKeyPress: function(val, e, field, options) {
        field.mask(maskBehavior.apply({}, arguments), options);

Aplica a regra anterior sempre que uma tecla é pressionada.

if(field[0].value.length >= 14){
    var val = field[0].value.replace(/\D/g, '');
    if(/\d\d(\d)\1{7,8}/.test(val)){
        field[0].value = '';
        alert('Telefone Invalido');
    }
}

Aqui esta o que você quer, quando o conteúdo tiver mais de 14 caracteres realiza a verificação do conteúdo.

  • var val = field[0].value.replace(/\D/g, ''); - remove tudo que não seja digito (só pra facilitar).
  • /\d\d(\d)\1{7,8}/ - validação de sequencial igual, ignora o DDD, se os dígitos forem todos igual.
  • \1{7,8} - remete a captura anterior, que deve repetir de 7 a 8 vezes

Caso tudo isso seja valido, então realiza o if que invalida o conteudo.

0

Não. O máximo que pode ser feito é um Regex que valide o formato do texto colocado para o telefone. Por exemplo, esse abaixo que valida os seguinte formatos com código do país, DDD e telefone com 8 ou 9 dígitos +XX (XX) XXXX-XXXX ou +XX (XX) XXXXX-XXXX

/^(?:\+)[0-9]{2}\s?(?:\()[0-9]{2}(?:\))\s?[0-9]{4,5}(?:-)[0-9]{4}$/

Um exemplo de como utilizar esse Regex:

var regExp = /^(?:\+)[0-9]{2}\s?(?:\()[0-9]{2}(?:\))\s?[0-9]{4,5}(?:-)[0-9]{4}$/;
var telefone = '+55 (55) 23321-5454';
var resultado = regExp.test(telefone); (retorna true ou false)
3
  • no mínimo mostre a utilização da regex como mascara, não somente jogue ela aí
    – Paz
    Commented 12/03/2018 às 14:09
  • pode me dar um exemplo? Commented 12/03/2018 às 14:25
  • @LeonardoMacedo Editei a resposta com um exemplo. Commented 12/03/2018 às 14:33
0

PARA A MASCARA DO INPUT

Tente usar esse plugin, já que não existe um recurso nativo para isso.

Ao adiciona-lo no seu projeto você poderá usar um método em seu plugin, o .inputmask e assim definir a mascara para o seu input através de uma referencia a sua classe, id ou nome de propriedade.

Segue também um teste no JSFiddle para garantir que funcione:

$("#test").inputmask({
            mask: "(99)99999-9999",
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input id="test" type="text"></input>


PARA A VALIDAÇÃO DOS DADOS INSERIDOS NO INPUT

Como você mencionou nos comentários que também quer uma validação e ela não é algo lógico, ou seja, é algo que você necessita para o seu sistema e é definido por você mesmo sem lógica integrada.

Quero que haja uma validação no input onde o usuario não consiga digitar numeros que não existe como exemplo: 9999999 88888 77777 123456789 987654321 11122233 4455566888

Tente fazer a validação por um array blackList, onde todos os elementos desse array serão testados e você tomará ação caso um desses elementos der match através de expressão regular.

Segue um exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button onclick="blackListExpressions.forEach(myFunction)">Try it</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");

var blackListExpressions = [/9999/, /8888/, /7777/];
var testeString = '(11)99999-9999';

function myFunction(item, index) {
    if(testeString.match(item)){
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + "true" + "<br>";

    }
    else{
		demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + "false" + "<br>";
    }
}
</script>

4
  • Eu tenho essas mascaras em meu sistema, eu preciso mesmo é que o campo valide os dados informados, para não aceitar 9999 888 etc... Commented 12/03/2018 às 14:24
  • @LeonardoMacedo então você quer que haja validação no input para não aceitar números repetidos?
    – Paz
    Commented 12/03/2018 às 14:27
  • quero que haja uma validação no input onde o usuario não consiga digitar numeros que não existe como exemplo: 9999999 88888 77777 123456789 987654321 11122233 4455566888 Commented 12/03/2018 às 14:30
  • @LeonardoMacedo veja se meu novo exemplo atende sua necessidade
    – Paz
    Commented 12/03/2018 às 14:55
0

Não sei se pode te interessar, mas vou te dar uma resposta utilizando apenas a validação pelo lado do Cliente. No entanto não é possível fazer a validação de números sequencias dessa forma. O ponto positivo é que ele abre o teclado do dispositivo para a pessoa digitar o número se ela acessar pelo celular por exemplo.

No exemplo abaixo usei o <input type="tel"> exitem existem várias regras de validação direto pelo HTML (o detalhe aqui é que um usuário avançado pode entrar no Dev Tools por exemplo e apagar essas regras antes de enviar)

Primeiro eu usei um CSS para alternar a borda do caso seja válido ou inválido. Vc ainda pode usar ícones para isso ou Tooltips, vai do seu gosto e projeto...

Depois fiz as regras no <input>

pattern="[0-9]+$"  //O pattern do campo só aceita números
required           //o campo é de preenchimento obrigatório
minlength="9"      //tem que ter no mínimo 9 números
maxlength="14"     //e no máximo 14 números

Veja o exemplo funcionando.

input[type="tel"]:valid {
    border: 2px solid green;
}
input[type="tel"]:invalid {
    border: 2px solid red;
}
<input type="tel" id="telNo" name="telNo" pattern="[0-9]+$" required minlength="9" maxlength="14" size="30" placeholder="apenas numeros, de 9 a 14 caracteres">

Como ele é um <input> do tipo Tel ele vai abrir o teclado do dispositivo: (além de ter a semântica correta para o tipo de campo!)

inserir a descrição da imagem aqui

Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .