Обработка ошибок валидации

Element Plus предоставляет мощный механизм для валидации форм, позволяющий гибко управлять проверкой данных, отображением ошибок и интеграцией с пользовательским интерфейсом. Центральным элементом является компонент <el-form>, который работает совместно с <el-form-item> для каждого поля формы.

Настройка правил валидации

Каждое поле формы может иметь собственный набор правил, определяемых через свойство rules. Правила представляют собой массив объектов с ключами:

  • required – обязательность поля.
  • message – сообщение, отображаемое при нарушении правила.
  • trigger – событие, при котором выполняется проверка (blur, change).
  • validator – кастомная функция для сложной валидации.

Пример конфигурации правил:

const rules = {
  username: [
    { required: true, message: 'Введите имя пользователя', trigger: 'blur' },
    { min: 3, max: 15, message: 'Длина имени от 3 до 15 символов', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Введите email', trigger: 'blur' },
    { type: 'email', message: 'Некорректный формат email', trigger: 'blur' }
  ],
  password: [
    { validator: validatePassword, trigger: 'blur' }
  ]
};

function validatePassword(rule, value, callback) {
  if (!value) {
    callback(new Error('Введите пароль'));
  } else if (value.length < 6) {
    callback(new Error('Пароль должен быть не менее 6 символов'));
  } else {
    callback();
  }
}

Связывание формы и правил

Компонент <el-form> принимает свойства model и rules. model содержит объект с данными формы, а rules – соответствующий объект правил. Пример:

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="Имя пользователя" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="Email" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
  <el-form-item label="Пароль" prop="password">
    <el-input v-model="formData.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
  </el-form-item>
</el-form>
const formData = reactive({
  username: '',
  email: '',
  password: ''
});

const formRef = ref(null);

function submitForm() {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('Форма корректна', formData);
    } else {
      console.log('Ошибка валидации', fields);
    }
  });
}

Кастомизация отображения ошибок

Ошибки можно отображать не только стандартным текстом под полем. Свойство show-message позволяет управлять видимостью сообщения, а слот error предоставляет возможность полностью кастомизировать вывод:

<el-form-item label="Email" prop="email">
  <el-input v-model="formData.email"></el-input>
  <template #error>
    <div class="custom-error">{{ formRef.value.fields.email?.validateMessage }}</div>
  </template>
</el-form-item>

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

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

Для проверки данных на сервере или с использованием асинхронных функций элемент validator может возвращать Promise:

function checkUsernameAvailability(rule, value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value === 'admin') {
        reject(new Error('Имя пользователя занято'));
      } else {
        resolve();
      }
    }, 500);
  });
}

const rules = {
  username: [
    { required: true, message: 'Введите имя пользователя', trigger: 'blur' },
    { validator: checkUsernameAvailability, trigger: 'blur' }
  ]
};

В этом случае форма ожидает завершения Promise перед подтверждением валидности поля.

Работа с группами и динамическими формами

Element Plus поддерживает динамические формы, где количество полей может меняться. Для управления валидацией в таких случаях важно:

  • Использовать prop с уникальными ключами.
  • Перезапускать проверку для новых полей через validateField(prop).

Пример динамического списка email:

const emails = reactive([{ value: '' }]);

function addEmail() {
  emails.push({ value: '' });
}

function validateEmails() {
  emails.forEach((item, index) => {
    formRef.value.validateField(`emails.${index}.value`);
  });
}

Сбор и обработка ошибок

Методы validate, validateField и clearValidate позволяют:

  • Проверять всю форму (validate)
  • Проверять отдельное поле (validateField)
  • Снимать ошибки с поля или формы (clearValidate)

Пример очистки ошибок:

formRef.value.clearValidate(); // очищает всю форму
formRef.value.clearValidate('username'); // очищает только username

Локализация и мультиязычность

Для работы с сообщениями ошибок на разных языках можно использовать глобальную настройку locale и конфигурировать сообщения через ElMessage или собственные функции генерации текста.

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

Оглавление