RegEx匹配m:ss进行输入验证

Question

我一直在努力创建一个RegEx来实现以下目标:

• 分钟只有一个数字(0到9);
• 秒只有两个数字(00到59);
• 必须格式为m:ss.

到目前为止我有这个: ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$

然而,例如00的情况似乎是通过,它不应该,因为它不是m:ss格式.

Answer 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 - 一位数
• $ - 字符串结尾

Answer 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之间

$断言一行的结尾位置