Сброс валидации

В библиотеке Element Plus управление формами и их валидацией реализуется через компонент <el-form> и связанные с ним элементы формы (<el-form-item>). Одной из ключевых возможностей является сброс валидации, позволяющий очистить все ошибки валидации и вернуть форму к исходному состоянию. Это особенно важно при динамическом управлении формами, повторном использовании компонентов и реализации функций «Очистить» или «Сбросить форму».

Методы для сброса формы

Компонент <el-form> предоставляет два основных метода, влияющих на валидацию:

  1. resetFields() Этот метод сбрасывает значения всех полей формы к их исходным значениям (model) и очищает все ошибки валидации. Пример использования:
<template>
  <el-form :model="formData" :rules="rules" ref="myForm">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Возраст" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
    <el-button @click="resetForm">Сбросить</el-button>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formData = ref({
      name: '',
      age: ''
    });

    const rules = {
      name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
      age: [{ required: true, message: 'Введите возраст', trigger: 'blur' }]
    };

    const myForm = ref(null);

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

    const resetForm = () => {
      myForm.value.resetFields();
    };

    return { formData, rules, myForm, submitForm, resetForm };
  }
};
</script>

Особенности resetFields():

  • Поля формы возвращаются к значениям, указанным в model при инициализации.
  • Любые ошибки валидации, отображаемые в <el-form-item>, удаляются.
  • Метод удобен при реализации кнопки «Очистить форму», поскольку позволяет сразу сбросить данные и ошибки одновременно.
  1. clearValidate([props]) Этот метод очищает только ошибки валидации, не меняя значения полей. Можно указать конкретные поля через массив props, либо вызвать без аргументов, чтобы очистить все ошибки.
const clearErrors = () => {
  myForm.value.clearValidate(['name']); // очищает только поле "Имя"
};

// или очистка всех ошибок
myForm.value.clearValidate();

Примечания:

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

Важные детали при работе со сбросом валидации

  • Использование ref для доступа к форме: Методы resetFields и clearValidate доступны только через ссылку на форму (ref="myForm").
  • Сброс значений по умолчанию: Если в model есть начальные значения, resetFields вернёт их. Если нужно очистить форму полностью, начальные значения должны быть пустыми.
  • Динамическая валидация: При изменении правил (rules) после инициализации формы рекомендуется использовать resetFields() для обновления состояния валидации всех элементов.
  • Асинхронные поля: Если поля формы создаются динамически, resetFields() очистит только существующие элементы на момент вызова. Новые элементы могут требовать отдельного обновления.

Практический сценарий

Часто встречается задача: сбросить форму после успешной отправки. Это достигается комбинацией методов validate и resetFields:

const handleSubmit = () => {
  myForm.value.validate((valid) => {
    if (valid) {
      sendDataToServer(formData.value).then(() => {
        myForm.value.resetFields();
      });
    }
  });
};

Такой подход обеспечивает:

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

Рекомендации по организации сброса

  • Всегда держать ссылку на форму через ref, чтобы методы были доступны.

  • Четко различать задачи:

    • resetFields() – сброс значений и ошибок
    • clearValidate() – только очистка ошибок

  • При работе с большими формами с динамическими правилами и асинхронными данными следует комбинировать методы для корректного состояния формы.

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

Оглавление