javascript - RegEx til at matche m: ss til inputvalidering

Jeg har haft problemer med at lave et RegEx, der opfylder følgende:

• kun ét tal for minutterne (0 til 9);
• kun to tal for sekunderne (00 til 59);
• skal have formatet m:ss.

Indtil videre har jeg dette: ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$

Dog ser sagen 00 for eksempel ud til at passere, og det burde den ikke, da den ikke er i m:ss-formatet.

Svar #1

Dit regex - ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$ - har en 0{0}?, der får motoren til at matche 0 præcis nul gange (denne token ignoreres). Den har også overflødig {1} (da [0-5] vil matche et ciffer fra 0 til 5 præcis én gang). Bemærk, at der ikke er nogen grund til at placere et enkelt tegn i en tegnklasse (som [0]), det kan forårsage problemer senere, når du har brug for at justere mønsteret. Og vigtigere, dit regex indeholder en valgfri gruppe (?:([0]{0}?\d):)?, der kan matche én eller nul gange. Derfor tillader dit regex input som 56.

Du kan bruge følgende regex:

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

Se demo

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/>

Forklaring :

• ^ - starten af strengen
• \d - ét ciffer
• : - et kolon
• [0-5] - ét ciffer fra 0 til 5 rækkevidde
• \d - ét ciffer
• $ - slutningen af strengen

Svar #2

Medmindre jeg misser noget, burde dette være meget simpelt...

^[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/>

Her er et fungerende eksempel, som giver en fuld forklaring:

^ påstår positionen i starten af en linje

[0-9] matcher et enkelt tegn, der findes på listen nedenfor 0-9 et enkelt tegn i området mellem 0 og 9

: matcher tegnet : bogstaveligt

[0-5] matcher et enkelt tegn, der findes på listen nedenfor 0-5 et enkelt tegn i området mellem 0 og 5

[0-9] matcher et enkelt tegn, der findes på listen nedenfor 0-9 et enkelt tegn i området mellem 0 og 9

$ fastslår positionen i slutningen af en linje