Валидация форм

Vuetify предоставляет мощный и гибкий механизм для валидации форм, который полностью интегрирован с компонентами UI. Основой работы служит система правил (rules), позволяющая определять условия, которым должны соответствовать значения полей. Каждое правило представляет собой функцию, возвращающую либо true (если значение валидно), либо строку с сообщением об ошибке (если значение не прошло проверку).

Пример базового использования правила:

data() {
  return {
    name: '',
    nameRules: [
      v => !!v || 'Имя обязательно',
      v => (v && v.length >= 3) || 'Имя должно содержать минимум 3 символа'
    ]
  }
}

В шаблоне правило подключается через свойство :rules:

<v-text-field
  v-model="name"
  label="Имя"
  :rules="nameRules"
  required
></v-text-field>

Использование встроенных и пользовательских правил

Встроенные правила включают проверки на обязательность поля (required), длину (min, max), тип данных (email, number) и позволяют быстро создавать базовую валидацию.

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

passwordRules: [
  v => !!v || 'Пароль обязателен',
  v => /[A-Z]/.test(v) || 'Пароль должен содержать хотя бы одну заглавную букву',
  v => /[0-9]/.test(v) || 'Пароль должен содержать хотя бы одну цифру',
  v => v.length >= 8 || 'Пароль должен быть не менее 8 символов'
]

Валидация форм целиком

Для проверки нескольких полей используется компонент v-form. Его ключевые методы:

  • validate() – проверяет все поля формы, возвращает true, если все валидно.
  • reset() – сбрасывает значения и состояния ошибок всех полей.
  • resetValidation() – сбрасывает только состояние ошибок, оставляя значения полей.

Пример:

<v-form ref="form" v-model="valid">
  <v-text-field
    v-model="email"
    label="Email"
    :rules="emailRules"
    required
  ></v-text-field>

  <v-text-field
    v-model="password"
    label="Пароль"
    :rules="passwordRules"
    type="password"
    required
  ></v-text-field>

  <v-btn @click="submitForm">Отправить</v-btn>
</v-form>
data() {
  return {
    valid: false,
    email: '',
    emailRules: [
      v => !!v || 'Email обязателен',
      v => /.+@.+\..+/.test(v) || 'Неверный формат email'
    ]
  }
},
methods: {
  submitForm() {
    if (this.$refs.form.validate()) {
      console.log('Форма валидна, отправка данных...');
    }
  }
}

Асинхронная валидация

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

asyncUsernameRule: v => {
  return new Promise(resolve => {
    setTimeout(() => {
      if (v === 'admin') resolve('Имя пользователя уже занято')
      else resolve(true)
    }, 500)
  })
}

Использование:

<v-text-field
  v-model="username"
  label="Имя пользователя"
  :rules="[asyncUsernameRule]"
></v-text-field>

Группировка правил и динамическая валидация

Правила могут объединяться и динамически изменяться. Например, в зависимости от выбранного типа пользователя можно включать разные проверки:

data() {
  return {
    userType: 'guest',
    phoneRules: []
  }
},
watch: {
  userType(val) {
    this.phoneRules = val === 'guest'
      ? [v => !!v || 'Телефон обязателен для гостя']
      : []
  }
}

Валидация чекбоксов и радио-кнопок

Компоненты v-checkbox, v-radio-group и v-select также поддерживают правила через :rules. Важно учитывать, что для групповых компонентов возвращаемое правило проверяет значение всей группы, а не отдельного элемента.

Пример обязательного выбора:

<v-radio-group v-model="gender" :rules="[v => !!v || 'Выберите пол']">
  <v-radio label="Мужской" value="male"></v-radio>
  <v-radio label="Женский" value="female"></v-radio>
</v-radio-group>

Визуальные индикаторы ошибок

Vuetify автоматически отображает сообщения об ошибках под полем. Дополнительно можно управлять состоянием ошибок через свойства:

  • error-messages – массив сообщений об ошибках.
  • error – вручную выставляет состояние ошибки.
  • success и success-messages – для положительных уведомлений.
<v-text-field
  v-model="email"
  label="Email"
  :error-messages="emailErrors"
></v-text-field>
data() {
  return {
    emailErrors: []
  }
},
methods: {
  checkEmail() {
    this.emailErrors = this.email.includes('@') ? [] : ['Неверный формат email']
  }
}

Интеграция с внешними библиотеками

Vuetify можно использовать совместно с Vuelidate, Yup или другими библиотеками валидации. В этом случае правила Vuetify становятся лишь визуальным слоем, а основная логика проверки реализуется сторонней библиотекой. Это удобно для сложных форм с множеством зависимостей между полями.

Советы по организации правил

  • Разделять правила на массивы по типам проверки (обязательность, формат, длина) для удобства чтения.
  • Использовать константы для повторяющихся правил, например email или пароль, чтобы не дублировать код.
  • Динамически включать правила, если логика формы зависит от состояния других полей.
  • Проверять валидацию формы перед отправкой, используя v-form и метод validate(), чтобы гарантировать консистентность данных.

Vuetify предоставляет полный набор инструментов для создания надежных и гибких форм, где правила валидации легко комбинируются, расширяются и адаптируются под любые сценарии.

Оглавление