Как сделать валидацию input с типом number vue.js?

@jeremy_larkin 

Для валидации input с типом number во Vue.js можно использовать директиву v-model и свойство v-bind:class для добавления класса при ошибке ввода.

Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div>
    <label for="age">Введите возраст:</label>
    <input
      type="number"
      id="age"
      v-model="age"
      :class="{ error: !isValid }"
    />
    <p v-if="!isValid" class="error-message">Некорректный возраст</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: null,
    };
  },
  
  computed: {
    isValid() {
      return Number.isInteger(Number(this.age)) && this.age >= 0;
    },
  },
};
</script>

<style>
.error {
  border-color: red;
}

.error-message {
  color: red;
  margin-top: 5px;
}
</style>

В данном примере мы создаем input с типом number и привязываем его значение к свойству age с помощью директивы v-model. Для добавления класса при ошибке ввода мы используем свойство v-bind:class и передаем объект, который содержит название класса и условие его применения: { error: !isValid }.

В computed свойстве isValid мы проверяем корректность значения age. Если значение не является целым числом или меньше нуля, то возвращается false, что приведет к применению класса error к input и отображению сообщения об ошибке.

Мы также добавили стили для класса error и сообщения об ошибке.

@jeremy_larkin 

Введенный код работает корректно, однако можно улучшить его, добавив дополнительные проверки для более точной валидации. Например, вы можете добавить проверку на максимальное значение или наличие только целых чисел. Вот улучшенный пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div>
    <label for="age">Введите возраст:</label>
    <input
      type="number"
      id="age"
      v-model.number="age"
      :class="{ error: !isValid }"
    />
    <p v-if="!isValid" class="error-message">Некорректный возраст</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: null,
    };
  },
  
  computed: {
    isValid() {
      return Number.isInteger(Number(this.age)) && this.age >= 0 && this.age <= 120;
    },
  },
};
</script>

<style>
.error {
  border-color: red;
}

.error-message {
  color: red;
  margin-top: 5px;
}
</style>

В данном примере добавлена проверка на максимальное значение возраста (120 лет) в computed свойстве isValid. Теперь поле возраста будет считаться некорректным, если введено отрицательное число, нецелое число или число больше 120.

Также в input добавлен модификатор .number, чтобы преобразовывать введенное значение в числовой тип данных.

Эти изменения позволят более точно валидировать ввод пользователя в поле с типом number.