Vue теги ввода пользовательской проверки

Question

Я использую компонент vue-tags-input.В его документах мы можем найти validation .Я пытаюсь создать проверку, поэтому допустимый ввод должен иметь:

• мин 3 знака
• два числа
• запятая между числами

вот что у меня есть:

validation: [{
    classes: 'min-length',
    rule: tag => tag.text.length < 3,
},{
    classes: 'min-length',
    rule: ({ text }) => {
        const comma = text.indexOf(',') === -1;
        if(comma) {
            const arr = text.split(',')
            if(arr[0] && arr[1]) {
                if(arr[0].typeof === 'number' && arr[1].typeof === 'number') {
                    return true;
                }
            }
        }
        return false;
    }
}]

Итак, я делю строку на массив по ,.В результате у меня должен быть массив с двумя элементами.Затем я проверяю, являются ли оба элемента числами.Как бы то ни было, это не работает должным образом, потому что оно обрабатывает 111 как действительное, но это не так.

Я создал демо на codesanbox .

Answer 1

1. Чтобы проверить, существует ли запятая, вы должны проверить, равна ли indexOf запятая -1.

   const comma = text.indexOf(",") !== -1;
   

2. Необходимо преобразовать строку вчисло, используя Number(string).

   if (typeof Number(arr[0]) === "number") {..
   

3. Вы должны вернуть false, если проверка прошла успешно, и true, если есть ошибка, вы делаете противоположное.

Полный код будет:

{
  classes: "custom",
  rule: ({ text }) => {
    const comma = text.indexOf(",") !== -1;
    if (comma) {
      const arr = text.split(",");
      if (arr[0] && arr[1]) {
        if (typeof Number(arr[0]) === "number" && typeof Number(arr[1]) === "number") {
          return false;
        }
      }
    }
    return true;
  }
}

Более короткое правило регулярного выражения будет:

{
  classes: "custom",
  rule: ({ text }) => {
    return !text.match(/^\d+,\d+$/);
  }
}