Правила валидации

В Vuetify валидация форм строится вокруг свойства rules, которое используется для компонентов ввода (v-text-field, v-select, v-textarea и др.). rules представляет собой массив функций, каждая из которых принимает текущее значение поля и возвращает либо true (если значение корректное), либо строку с сообщением об ошибке.

Пример базовой валидации для текстового поля:

<v-text-field
  v-model="email"
  label="Email"
  :rules="[rules.required, rules.validEmail]"
></v-text-field>

<script>
export default {
  data() {
    return {
      email: '',
      rules: {
        required: value => !!value || 'Поле обязательно для заполнения',
        validEmail: value => /.+@.+\..+/.test(value) || 'Некорректный email'
      }
    }
  }
}
</script>

Здесь ключевые моменты:

  • rules.required проверяет, что поле не пустое.
  • rules.validEmail использует регулярное выражение для проверки корректного формата email.

Комбинирование правил

Массив правил позволяет комбинировать несколько проверок для одного поля. Они выполняются последовательно, и при первом неудачном результате выводится соответствующее сообщение.

<v-text-field
  v-model="password"
  label="Пароль"
  :rules="[rules.required, rules.minLength]"
  type="password"
></v-text-field>

<script>
export default {
  data() {
    return {
      password: '',
      rules: {
        required: value => !!value || 'Поле обязательно',
        minLength: value => value.length >= 8 || 'Минимальная длина 8 символов'
      }
    }
  }
}
</script>

Валидация через computed свойства

Для более сложных условий можно использовать вычисляемые свойства (computed) для динамического формирования правил.

computed: {
  dynamicRules() {
    return [
      value => !!value || 'Обязательное поле',
      value => (value && value.length <= this.maxLength) || `Максимум ${this.maxLength} символов`
    ]
  }
}

В этом случае dynamicRules можно подключать к полям через :rules="dynamicRules", и правила будут адаптироваться к состоянию компонента (this.maxLength).

Валидация всей формы

Vuetify предоставляет компонент v-form, который объединяет поля и управляет их общей валидацией. У формы есть метод validate() и свойство valid, позволяющее проверить корректность всех полей одновременно.

<v-form ref="form">
  <v-text-field v-model="name" :rules="[rules.required]" label="Имя"></v-text-field>
  <v-text-field v-model="email" :rules="[rules.required, rules.email]" label="Email"></v-text-field>
  <v-btn @click="submitForm">Отправить</v-btn>
</v-form>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      rules: {
        required: value => !!value || 'Поле обязательно',
        email: value => /.+@.+\..+/.test(value) || 'Неверный формат email'
      }
    }
  },
  methods: {
    submitForm() {
      if (this.$refs.form.validate()) {
        console.log('Форма корректна, можно отправлять данные')
      }
    }
  }
}
</script>

Особенности v-form:

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

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

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

rules: {
  uniqueUsername: async value => {
    if (!value) return 'Поле обязательно'
    const response = await fetch(`/api/check-username?username=${value}`)
    const result = await response.json()
    return result.available || 'Имя пользователя занято'
  }
}

При использовании асинхронных правил необходимо учитывать, что метод validate() формы тоже становится асинхронным, поэтому его следует вызывать с await.

Валидация условных полей

Иногда требуется валидировать поле только при определенных условиях. Для этого можно включать проверку прямо в функцию правила:

rules: {
  conditionalRequired: value => {
    if (this.isActive) {
      return !!value || 'Поле обязательно при активном статусе'
    }
    return true
  }
}

Здесь правило зависит от состояния компонента isActive и позволяет динамически включать или отключать проверку.

Настройка визуальных подсказок

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

  • error – вручную включить состояние ошибки.
  • error-messages – указать массив сообщений об ошибке.
  • success и success-messages – показать состояние успеха.
<v-text-field
  v-model="username"
  :error="usernameError"
  :error-messages="['Неверное имя пользователя']"
></v-text-field>

Практические советы

  • Всегда использовать v-form для объединения полей, чтобы централизованно управлять валидацией.
  • Использовать массив rules для комбинирования стандартных и кастомных проверок.
  • Для асинхронной проверки формы использовать async/await вместе с методами формы.
  • В случаях динамической логики валидации применять computed или функции, зависящие от состояния компонента.

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

Оглавление