m:ss 时间格式的文本输入正则表达式在 Vue 中存在错误，对于 6 分钟或以上的任何分钟

Question

我正在尝试进行验证，以防止用户针对此时间格式输入无效数字 m:ss（m = 分钟，s = 秒）。

I.E）1分30秒=1:30，1分59秒1:59。这是不允许的：1:61 或 1:77，因为它们不是有效秒数。

第一个s只能是值0-5，第二个s和m可以是0-9

在 Vue 中，我在文本输入框中有这个

            <div>
               <input
                  v-model="formatTime"
                  id="time-input"
                  type="text"
               />
            </div>

我在手表里有这个：

 watch: {
   formatTime () {
      const totalLength = this.formatTime.length;
      let a = this.formatTime.replace(/[^0-9]/g, "")
        .substr(0, 1);

      const b = this.formatTime.replace(/[^0-5]/g, "")
        .substr(1, 1);

      const c = this.formatTime.replace(/[^0-9]/g, "")
        .substr(2, 1);
      if (totalLength >= 2) {
        a = `${a.substring(0, 1)}:${b}${c}`;
      }
      this.formatTime = a;
    },
}

当我输入数字 1:11 到 5:55 时，这些值有效。但错误是当我先尝试输入 6-9 时，我无法在

之后输入任何其他数字

I.E) 我尝试输入 6:11 -> 我卡在 6: 上，无法输入任何有效数字。我什至不能输入 6:11，当它应该有效时。

当我尝试键入 7:10、8:44、9:11 时发生。任何 6 及以上的数字，它都会卡在第一个数字上。

我不知道问题出在哪里，因为 1:44 或 5:59 有效。正则表达式在我看来是正确的，但也许它与逻辑或子字符串有关？

请帮忙，谢谢！

Answer 1

问题出在这一行的正则表达式：

const b = this.formatTime.replace(/[^0-5]/g, "")  // 1. remove anything not 0 through 5
  .substr(1, 1);                                  // 2. take 2nd character of result

假设键序列为 789...

按键 1: 7 在字符 class 范围内（因此未删除), 所以 a 是 7.
按键 2: 7 和 8 在字符 class 范围，所以它们 从字符串中删除了 。空字符串的第 2 个字符仍然是空的，所以 b 是空字符串 .
按键 3: 7 和 8 在字符 class 范围（因此 未删除 ）。结果只有两个字符长，因为前面的按键被上面剥离了，所以第3个字符不存在，c是空字符串.
最后，它与定界符 (${a}:${b}${c}) 组合，结果是 7:.

解决方案

解决此问题的一种方法是在第二个替换中删除所有非数字，然后将第二个数字限制为 5.

let b = this.formatTime.replace(/[^0-9]/g, "").substr(1, 1);
if (b > 5) b = 5;

demo

m:ss 时间格式的文本输入正则表达式在 Vue 中存在错误，对于 6 分钟或以上的任何分钟

Text input Regex for m:ss time format is buggy in Vue, for any minute at or above 6

javascript

regex

substr

vue.js

vuejs2

解决方案