javascript - RegEx untuk mencocokkan m: ss untuk validasi input

Saya telah berjuang untuk membuat RegEx yang memenuhi hal berikut:

hanya satu angka untuk menit (0 hingga 9);
hanya dua angka untuk detik (00 hingga 59);
harus memiliki format m:ss.

Sejauh ini saya memiliki ini: ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$

Namun kasus 00 misalnya tampaknya lolos dan seharusnya tidak, karena itu tidak dalam format m:ss.

Jawaban #1

Regex Anda - ^(?:([0]{0}?\d):)?([0-5]{1}?\d)$ - memiliki 0{0}? yang membuat mesin mencocokkan 0 tepat nol kali (token ini diabaikan). Itu juga memiliki {1} yang berlebih (karena [0-5] akan mencocokkan satu digit dari 0 hingga 5 tepat satu kali). Perlu dicatat bahwa tidak ada alasan untuk menempatkan satu karakter ke dalam kelas karakter (seperti [0]), ini bisa menyebabkan masalah nanti ketika Anda perlu menyesuaikan pola. Dan yang lebih penting, regex Anda mengandung grup opsional (?:([0]{0}?\d):)? yang dapat mencocokkan satu atau nol kali. Dengan demikian, regex Anda memungkinkan input seperti 56.

Anda dapat menggunakan regex berikut:

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

Lihat demo

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

Penjelasan :

^ - awal dari string
\d - satu digit
: - titik dua
[0-5] - satu digit dari kisaran 0 hingga 5
\d - satu digit
$ - akhir dari string

Jawaban #2

Kecuali saya melewatkan sesuatu, ini seharusnya sangat sederhana...

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

Berikut adalah contoh yang bekerja, yang memberikan penjelasan lengkap:

^ memastikan posisi di awal baris
[0-9] mencocokkan satu karakter yang ada dalam daftar di bawah ini 0-9 satu karakter dalam rentang antara 0 dan 9
: mencocokkan karakter : secara harfiah
[0-5] mencocokkan satu karakter yang ada dalam daftar di bawah ini 0-5 satu karakter dalam rentang antara 0 dan 5
[0-9] mencocokkan satu karakter yang ada dalam daftar di bawah ini 0-9 satu karakter dalam rentang antara 0 dan 9
$ menegaskan posisi di akhir baris