javascript - Expresión regular para coincidir con m: ss para la validación de entrada

He estado luchando por crear una expresión regular para cumplir con lo siguiente:

solo un número para los minutos (0 a 9);
solo dos números para los segundos (00 a 59);
debe tener el formato m:ss.

Hasta ahora tengo esto: ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$

Sin embargo, el caso 00, por ejemplo, parece estar pasando y no debería, ya que no está en el formato m:ss.

Respuesta #1

Tu expresión regular - ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$ - tiene un 0{0}? que hace que el motor coincida con 0 exactamente cero veces (este token se ignora). También tiene un {1} redundante (ya que [0-5] hará coincidir un dígito del 0 al 5 exactamente una vez). Ten en cuenta que no hay razón para colocar un solo carácter dentro de una clase de caracteres (como [0]), podría causar problemas más adelante cuando necesites ajustar el patrón. Y lo más importante, tu expresión regular contiene un grupo opcional (?:([0]{0}?\d):)? que puede coincidir una o cero veces. Por lo tanto, tu expresión regular permite entradas como 56.

Puedes usar la siguiente expresión regular:

/^\d:[0-5]\d$/

Ver demostración

var rx = /^\d:[0-5]\d$/;
var tests = ['0:00','1:34','156','3:67','45:55','56','4:344'];

for (var i = 0; i < tests.length; i++) {
  document.getElementById('result').innerHTML += tests[i] + ": " + (rx.test(tests[i])) + "<br/>";
}

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<div id="result"/>
<input type="text" pattern="\d:[0-5]\d" /><br/>

Explicación :

^ - inicio de la cadena
\d - un dígito
: - dos puntos
[0-5] - un dígito del rango de 0 a 5
\d - un dígito
$ - fin de la cadena

Respuesta #2

A menos que me esté perdiendo de algo, esto debería ser muy simple...

^[0-9]:[0-5][0-9]$

var regex = /^[0-9]:[0-5][0-9]$/;
var input = $('input');
input.keyup(function() {
  if (regex.test(input.val()))
    input.removeClass('error');
  else
    input.addClass('error');
});

input.error {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

Aquí hay un ejemplo funcional, que proporciona una explicación completa:

^ afirmar la posición al inicio de una línea
[0-9] coincide con un solo carácter presente en la lista siguiente 0-9 un solo carácter en el rango entre 0 y 9
: coincide con el carácter : literalmente
[0-5] coincide con un solo carácter presente en la lista siguiente 0-5 un solo carácter en el rango entre 0 y 5
[0-9] coincide con un solo carácter presente en la lista siguiente 0-9 un solo carácter en el rango entre 0 y 9
$ afirmar posición al final de una línea