Валидация отдельных полей

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

import { ref } from 'vue';

const formRef = ref(null);
const formData = ref({
  username: '',
  email: ''
});

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

В этом примере правила для полей задаются через массив объектов. Каждый объект описывает:

  • required — обязательно ли поле для заполнения.
  • min / max — ограничения на длину строки.
  • type — тип данных, например email, number.
  • message — текст сообщения при ошибке.
  • trigger — событие, которое запускает проверку (blur, change).

Валидация одного поля

Для проверки только одного поля используется метод validateField объекта формы:

formRef.value.validateField('username', (errorMessage) => {
  if (!errorMessage) {
    console.log('Поле username прошло валидацию');
  } else {
    console.log('Ошибка валидации:', errorMessage);
  }
});
  • validateField(name, callback) принимает имя поля или массив имён.
  • callback(errorMessage) возвращает сообщение об ошибке, если проверка не пройдена, иначе undefined.

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

Правила можно сделать асинхронными, используя функцию вместо объекта:

const asyncRules = {
  username: [
    { 
      validator: async (rule, value) => {
        if (value.length < 3) throw new Error('Слишком короткое имя');
      }, 
      trigger: 'blur' 
    }
  ]
};

В этом случае проверка может включать запрос к серверу или дополнительные вычисления. Ошибка выбрасывается через throw new Error('Сообщение'), и она отобразится в компоненте формы.

Валидация нескольких полей одновременно

Метод validateField поддерживает массив имён:

formRef.value.validateField(['username', 'email'], (errors) => {
  if (!errors) {
    console.log('Поля прошли проверку');
  } else {
    console.log('Ошибки:', errors);
  }
});
  • errors — объект вида { username: 'Ошибка', email: 'Ошибка' }.
  • Позволяет проверять конкретные поля без затрагивания всей формы.

Динамическая смена правил

Правила можно менять на лету, что удобно при условной валидации:

rules.username.push({ pattern: /^[a-zA-Z0-9]+$/, message: 'Только латинские буквы и цифры', trigger: 'blur' });
  • Новое правило добавляется через push.
  • Существующие правила можно удалять или изменять, что позволяет адаптировать форму под разные сценарии.

Отображение ошибок

Каждое поле <el-form-item> автоматически показывает сообщение об ошибке при невыполнении правила:

<el-form ref="formRef" :model="formData" :rules="rules">
  <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>
  • prop связывает поле формы с конкретным свойством объекта model.
  • Ошибки появляются автоматически, без дополнительного кода.

Настройка поведения ошибок

Можно управлять тем, когда и как показываются ошибки:

<el-form ref="formRef" :model="formData" :rules="rules" :status-icon="true" label-width="120px">
  • status-icon — добавляет иконку состояния ошибки.
  • label-width — задаёт ширину метки.
  • Для отдельных <el-form-item> можно переопределять error и show-message.

Итоговая схема работы

  1. Определение модели через ref.
  2. Назначение правил через объект rules.
  3. Привязка полей с prop внутри <el-form-item>.
  4. Проверка поля методом validateField.
  5. Асинхронная или условная логика через функции-валидаторы.
  6. Динамическая модификация правил при изменении условий формы.

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

Оглавление