使用正则表达式验证时间格式
[英]Validating Time Format with Regular Expression
问题描述
I have to create a combination stopwatch and countdown timer and validate the time format (00:00:00) of the countdown with a regular expression. 
我必须创建秒表和倒数计时器的组合，并使用正则表达式验证倒数的时间格式（00:00:00）。 I tried using var regex = /^\\d{0-2}:\\d{0-2}:\\d{0-2}$/; 我尝试使用var regex = / ^ \\ d {0-2}：\\ d {0-2}：\\ d {0-2} $ /; but keeps coming up as invalid. 但一直显示为无效。 Not sure if the regex code is wrong or I have it in the wrong place? 不确定正则表达式代码是否错误或我将其放置在错误的位置？ Also supposed to be showing the event output in a div area below but everything's coming up as "undefined" so far. 还应该在下面的div区域中显示事件输出，但到目前为止，所有内容都显示为“ undefined”。 Totally confused and would appreciate any ideas. 完全困惑，不胜感激任何想法。 Thanks so much! 非常感谢！
// 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; } 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; } 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> <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> <div id="output" ></div> <p> </p> <span id="stopwatch_output" onclick="startStopwatch()">Stopwatch</span> <span id="countdown_output" onclick="startCountdown()">Countdown</span> <span id="timerstop" onclick="stopTimer()">STOP</span> <span id="resettimer" onclick="clearOutput()">RESET</span> <p> </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>
2 个解决方案
解决方案1
1 2016-06-30 01:20:01
If you want to check timer value with and without leading zero you can use this regex: 如果要检查带有和不带前导零的计时器值，可以使用此正则表达式：
([0-9]+):([0-5]?[0-9]):([0-5]?[0-9])
Returns true for 01:1:01 or 1:1:1 but not for 1::1 or :: 对于01:1:01或1:1:1返回true，但对于1::1或::则不返回
解决方案2
0 2016-06-30 01:10:49
The problem is a minor typo: 问题是一个小的错别字：
var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;
To specify a match for zero to two digits (would one or two be better?) you use a comma as a separator: 要指定零到两位数字的匹配项（一个或两个更好吗？），请使用逗号作为分隔符：
var regex = /^\d{0,2}:\d{0,2}:\d{0,2}$/;
It's a typo that's easy to overlook! 这是一个容易忽略的错字！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.