javascript - 用正則表達式匹配 m: ss 以進行輸入驗證

我一直在努力創建一個正則表達式來達成以下目的：

• 分鐘只允許一個數字（0 到 9）；
• 秒鐘僅有兩個數字（00 到 59）；
• 必須符合格式 m:ss。

到目前為止，我有這個：^(?:([0]{0}?\d):)?([0-5]{1}?\d)$

然而，例如案例 00 似乎是通過的，但它不應該通過，因為它不是 m:ss 格式。

答案＃1

你的正則表達式 - ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$ - 有一個 0{0}?，這會使引擎將 0 精確匹配零次（這個標記會被忽略）。它還有冗餘的 {1}（因為 [0-5] 會精確匹配從 0 到 5 的一位數字）。注意，沒有必要將單個字符放入字符類（例如 [0]），當你之後需要調整模式時，這可能會引發問題。更重要的是，你的正則表達式包含一個 可選 群組 (?:([0]{0}?\d):)?，它可以匹配零次或一次。因此，你的正則表達式允許像 56 這樣的輸入。

你可以使用以下正則表達式：

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

查看示範

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

說明：

• ^ - 字串的開始
• \d - 一位數字
• : - 冒號
• [0-5] - 從 0 到 5 的一位數範圍
• \d - 一位數字
• $ - 字串結尾

答案＃2

除非我漏掉了什麼，這應該非常簡單...

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

這是一個可行的範例，提供了完整的說明：

^ 斷言在行首的位置

[0-9] 匹配下列列表中的單個字元 0-9 在 0 到 9 範圍內的單個字元

: 字符 : 的字面匹配

[0-5] 匹配下列列表中出現的單一字符 0-5，介於 0 到 5 之間的單一字符

[0-9] 匹配下列列表中的單個字元 0-9 在 0 到 9 範圍之間的單個字元

$ 斷言行尾位置