Как сделать валидацию 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 и сообщения об ошибке.