Validieren des Zeitformats mit normalem Ausdruck

Question

Ich muss eine Kombination aus Stoppuhr und Countdown-Timer erstellen und das Zeitformat (00:00:00) des Countdowns mit einem regulären Ausdruck überprüfen. Ich habe versucht, mit var regex =/^ \ d {0-2}: \ d {0-2}: \ d {0-2} $ /; aber kommt immer als ungültig auf. Nicht sicher, ob der Regex-Code falsch ist oder ich ihn an der falschen Stelle habe? Darf auch die Event-Ausgabe in einem div-Bereich darunter anzeigen, aber alles wird als "undefined" angezeigt. Völlig verwirrt und würde irgendwelche Ideen schätzen. Vielen Dank!

// start stopwatch function and declare variables 
 
     var hundr = 10; 
 
     var minutes = 0; 
 
     var seconds = 0; 
 
     var stopwatch = 0; 
 

 
    // begin stopwatch 
 
     function startStopwatch(){ 
 
     "use strict"; 
 
     stopwatch = setInterval('setUp()', 100); 
 
     } 
 
      
 

 
    // function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds 
 
    function setUp(){ 
 
    var setTime = document.getElementById('output'); 
 
     hundr+=10; 
 
     if (hundr == 100) { 
 
     seconds++; 
 
     hundr = 0; 
 
     } 
 
     if (seconds == 60) { 
 
     minutes++; 
 
     seconds = 0; 
 
     setTime.innerHTML = "Time up!"; 
 
     clearInterval(stopwatch); 
 
     return; 
 
} 
 

 
     // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero. 
 
     if(seconds < 10){ 
 
     setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr; 
 
     } else { 
 
     setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr; 
 
     } \t 
 
     if(hundr < 10) { 
 
     setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr; 
 
     } else { 
 
     setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr; 
 
    }} 
 
     
 

 
    // start countdown function and declare variables 
 
     var ms = 99; 
 
     var mins = 0; 
 
     var secs = 60; 
 
     var countdown = 0; 
 

 
    function startCountdown(){ 
 
     "use strict";   
 
     countdown = setInterval('incrTimer()', 10); 
 
     } 
 

 
    function incrTimer(){ 
 
     "use strict"; 
 

 
    var regMatch = document.getElementById("output").value; 
 
    var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;  
 
     if (regex.test(regMatch)) { 
 
      document.getElementById("debug").innerHTML = "valid"; 
 
     } else { 
 
      document.getElementById("debug").innerHTML = "invalid - please check your code"; 
 
     } 
 
     var setCountd = document.getElementById('output'); 
 
     ms--; 
 
     if (ms == -1) { 
 
     secs--; 
 
     ms = 99; 
 
     } 
 
     if(secs == -1){ 
 
     min--; 
 
     secs = 59; 
 
     setCountd.innerHTML = "Time up!"; 
 
     clearInterval(countdown); 
 
     alert('Time up'); 
 
     return; 
 
    } 
 

 
     // if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number. 
 
     if(secs > 10){ 
 
     setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms; 
 
     } else { 
 
     setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms; 
 
     } \t 
 
     if(ms < 10) { 
 
     setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms; 
 
     } else { 
 
     setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms; 
 
    }} 
 

 
     // end function incrTimer() 
 

 

 
function stopTimer() { // pauses the output for both the stopwatch and the countdown timer 
 
    clearTimeout(stopwatch); 
 
    clearTimeout(countdown); 
 
    } // end function stopTimer() 
 

 
function clearOutput() { // clear output and restore div area 
 
      document.getElementById("output").innerHTML = ""; 
 
    } // end function clearOutput

#output{ 
 
    width:300px; 
 
    height:25px; 
 
    background-color: #e4e3db; 
 
    border:1px solid #c3c4bc; 
 

 
} 
 

 
span { 
 
    padding: 5px 10px 5px 10px; 
 
    background-color: #00FFFF; 
 
} 
 

 

 

 

 
h2 { 
 
    font-family: Arial; 
 
    color: #799b3d; 
 
} 
 

 
h4 { 
 
    font-family: Arial; 
 
    font-style: italic; 
 
    color: #1f8da8; 
 
} 
 

 
#debug { 
 
    border: 1px solid red; 
 
    width: 620px; 
 
    padding: 10px; 
 
    font-size: small; 
 
    color: blue; 
 
    background-color: #FFFF99; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<title>Final</title> 
 
\t <link rel="stylesheet" type="text/css" href="final.css"> 
 
     <script type="text/javascript" src="take7.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
<h2>Stopwatch or Countdown Timer</h2> 
 
\t <div id="output" ></div> 
 
<p>&nbsp;</p> 
 

 

 
    <span id="stopwatch_output" onclick="startStopwatch()">Stopwatch</span> 
 
    <span id="countdown_output" onclick="startCountdown()">Countdown</span> \t \t 
 
    <span id="timerstop" onclick="stopTimer()">STOP</span> 
 
    <span id="resettimer" onclick="clearOutput()">RESET</span> 
 
<p>&nbsp;</p> 
 
    <p><span id="debugOnOff" style="visibility:visible">Debug on/off</span> 
 
     <span id="hideDebug" style="visibility:visible">Hide Debug</span> 
 
<div id="debug"><p id="firstP">This space is reserved for event output information.</p></div> 
 
</body> 
 

 
</html>

Answer 1

Das Problem ist ein kleiner Tippfehler:

var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/; 

Um ein Spiel für null bis zwei Ziffern angeben (würde ein oder zwei besser sein?) Sie verwenden ein Komma als ein Separator:

var regex = /^\d{0,2}:\d{0,2}:\d{0,2}$/; 

Es ist ein Tippfehler, die leicht zu übersehen ist!

Answer 2

Wenn Sie mit Timer-Wert überprüfen und ohne führende Null Sie diese Regex verwenden können:

([0-9]+):([0-5]?[0-9]):([0-5]?[0-9]) 

Gibt true zurück, für 01:1:01 oder 1:1:1 aber nicht für 1::1 oder ::