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
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 regex 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 como10:61
vai limpar o campo\d
no final busca um numero, é equivalente a digitar[0-9]