使用正則表達式驗證時間格式
[英]Validating Time Format with Regular Expression
問題描述
我必須創建秒表和倒數計時器的組合，並使用正則表達式驗證倒數的時間格式（00:00:00）。 我嘗試使用var regex = / ^ \\ d {0-2}：\\ d {0-2}：\\ d {0-2} $ /; 但一直顯示為無效。 不確定正則表達式代碼是否錯誤或我將其放置在錯誤的位置？ 還應該在下面的div區域中顯示事件輸出，但到目前為止，所有內容都顯示為“ undefined”。 完全困惑，不勝感激任何想法。 非常感謝！
// 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
如果要檢查帶有和不帶前導零的計時器值，可以使用此正則表達式：
([0-9]+):([0-5]?[0-9]):([0-5]?[0-9])
對於01:1:01或1:1:1返回true，但對於1::1或::則不返回
解決方案2
0 2016-06-30 01:10:49
問題是一個小的錯別字：
var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;
要指定零到兩位數字的匹配項（一個或兩個更好嗎？），請使用逗號作為分隔符：
var regex = /^\d{0,2}:\d{0,2}:\d{0,2}$/;
這是一個容易忽略的錯字！
用於驗證月份的正則表達式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.