m:ss 时间格式的文本输入正则表达式在 Vue 中存在问题，在 6 点或以上的任何一分钟 [英] Text input Regex for m:ss time format is buggy in Vue, for any minute at or above 6

问题描述

我正在尝试进行验证，以防止用户为此时间格式输入无效数字 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 中，我在文本输入框中有这个

 
<输入v-model=格式时间"id=时间输入"类型=文本"/>

我有这个:

 观看:{格式时间(){const totalLength = this.formatTime.length;让 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);如果(总长度> = 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 有效.正则表达式在我看来是正确的，但也许它与逻辑或 substr 有关系?

请帮忙，谢谢！

解决方案

问题是这一行的正则表达式:

const b = this.formatTime.replace(/[^0-5]/g, "")//1. 删除 0 到 5 以外的任何内容.substr(1, 1);//2. 取结果的第二个字符

假设一个键序列为 789...

1. 按键 1: 7 在字符类范围内(因此未删除)，所以 a 是 7.

2. 按键 2: 7 和 8 超出字符类范围，所以它们从字符串中重新删除.空字符串的第二个字符仍然是空的，所以 b 是空字符串.

3. 按键 3: 7 和 8 在字符类范围内(因此 未删除).结果只有两个字符长，因为前面的按键被上面去掉了，所以第三个字符不存在，c是空字符串.

4. 最后，它与分隔符 (${a}:${b}${c}) 组合在一起，得到 7:.

解决方案

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

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

演示

I am trying to have validation that prevents the user from typing invalid numbers for this time format m:ss (m = minute, s = seconds).

I.E) 1 minute and 30 seconds = 1:30, 1 minute and 59 seconds 1:59. This would not be allowed: 1:61 or 1:77, since those are not valid seconds.

The first s can only be values 0-5, the second s and m can be 0-9

In Vue I have this in the text input box

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

I have this in watch:

 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;
    },
}

The values work when I type numbers 1:11 to 5:55. But the bug is when I try to type 6-9 first, I can't type any other number after

I.E) I try to type 6:11 -> I get stuck on 6: and can't type any valid number. I can't even type 6:11, when that should be valid.

Happens when I try to type 7:10, 8:44, 9:11. Anything 6 and above, it gets stuck at the first number.

I don't know what the problem is since 1:44, or 5:59 works. The regex looks right to me, but maybe it's something with the logic or substr?

Please help and thank you!

解决方案

The problem is the regular expression in this line:

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

Assume a key sequence of 789...

1. Keypress 1: 7 is inside the character class range (thus not removed), so a is 7.

2. Keypress 2: 7 and 8 are outside the character class range, so they're removed from the string. The 2nd character of an empty string is still empty, so b is the empty string.

3. Keypress 3: 7 and 8 are inside the character class range (thus not removed). The result is only two characters long because the preceding keypress got stripped above, so the 3rd character does not exist, and c is the empty string.

4. Finally, it gets assembled with a delimiter (${a}:${b}${c}), resulting in 7:.

Solution

One way to fix this is for the second replacement to remove all non-digits, and then limit the 2nd digit to 5.

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

demo

这篇关于m:ss 时间格式的文本输入正则表达式在 Vue 中存在问题，在 6 点或以上的任何一分钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！