0

Eu tenho um input onde é preenchido com horas (####:##), por exemplo: 1250:00, 0800:00, ... Eu preciso saber se foi digitado corretamente e não 1250:66, 0800:99 Existe um máscara que não permite digitar letras ou espaços

1 Resposta 1

2

Use o evento onblur no input então basta usar split para dividir ambos números, feito isso o evento irá validar os valores e limpar o input se forem incorretos, por exemplo:

var hora = document.getElementById("hora");

hora.addEventListener('blur', function () {
     var valores = this.value.split(':');

     if (!valores[0] || !valores[1]) return;

     var hora = valores[0];
     var minutos = valores[1];

     if (!/^(\d{2}|[1-9]\d+)$/.test(hora) || minutos > 59) {
         this.value = ''; //Apaga os valores do campo
     }
});
<input id="hora" value="10:00">

Claro, que para as horas usei para facilitar, ela funciona mais ou menos assim

 ^(\d{2}|[1-9]\d+)$
  • ^ busca a expressão desde o começo
  • ( inicia um grupo, pois temos duas condições para a hora, com dois dígitos, que podem ser horas como 00, 01, 02, 03, 04, 05, 06, 07, 08 e 09
  • \d{2} verifica se tem 2 digitos, se referindo aos números acima
  • | depois do "pipe" (o sinal | se chama pipe) na regex verificamos se o numeros maiores que 09, então com o [1-9] checamos se a expressão começa com 1 até 9 para ser um valor valido
  • \d+ o sinal de mais diz a expressão que deve buscar numeros continuamente, até encontrar outra expressão, ou seja pode ter um ou mais numeros seguidos
  • ) finaliza o grupo, e termina assim ambas condições
  • $ "determina" que a expressão deve terminar exatamente ali, não podendo conter nada mais após o numero

Daria para fazer sem regex, mas ficaria um pouco maior o código.


Pode-se também tentar resolver tudo com regex, desde que ela não fique muito complexa para entender depois, ficaria algo como:

var hora = document.getElementById("hora");

hora.addEventListener('blur', function () {
     if (!/^(\d{2}|[1-9]\d+):[0-5]\d$/.test(this.value)) {
         this.value = ''; //Apaga os valores do campo
     }
});
<input id="hora" value="10:00">

Veja que agora só tem a regex, sem split, o que fiz foi adicionar :[0-5]\d, explicando:

  • : é somente para checar o divisor entre a hora e os minutos
  • [0-5] checa se o primeiro digito dos minutos não passam do 5, ou seja se digitar algo como 10:61 vai limpar o campo
  • \d no final busca um numero, é equivalente a digitar [0-9]

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 .