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

Element Plus предоставляет мощный механизм валидации форм с использованием el-form и el-form-item. Валидация строится на основе набора правил (rules), которые задаются в форме и применяются к конкретным полям.

Структура правил валидации

Правило валидации — это объект с ключевыми свойствами:

  • required — обязательное ли поле.
  • message — сообщение, которое будет отображено при нарушении правила.
  • trigger — событие, при котором выполняется проверка (blur, change и др.).
  • type — тип данных, поддерживаются: string, number, array, boolean, email, url, date, object.
  • validator — кастомная функция валидации.

Пример базового правила:

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' }
  ]
};

Применение правил к форме

Форма создается через компонент el-form, а каждое поле — через el-form-item, к которому привязываются правила через атрибут prop.

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="Имя" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="Email" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submitForm">Отправить</el-button>
</el-form>

В Jav * aScript:

const form = reactive({
  username: '',
  email: ''
});

const formRef = ref(null);

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

Кастомные валидаторы

Иногда встроенные правила не покрывают все сценарии. Для этого используется функция validator. Она принимает три аргумента: rule, value, callback.

Пример проверки пароля на сложность:

const rules = {
  password: [
    {
      required: true,
      message: 'Введите пароль',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        const strongPassword = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;
        if (!strongPassword.test(value)) {
          callback(new Error('Пароль должен содержать минимум 8 символов, включая заглавные буквы и цифры'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

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

Element Plus поддерживает асинхронные проверки. В validator можно возвращать промис, что позволяет, например, проверять уникальность имени пользователя через API.

{
  validator: (rule, value) => {
    return new Promise((resolve, reject) => {
      axios.get(`/api/check-username?username=${value}`)
        .then(res => {
          if (res.data.available) resolve();
          else reject('Имя уже занято');
        })
        .catch(() => reject('Ошибка проверки'));
    });
  },
  trigger: 'blur'
}

Валидация по событиям

  • blur — проверка при потере фокуса.
  • change — проверка при изменении значения поля.
  • submit — можно инициировать через validate для всей формы.

Валидация вложенных форм и массивов

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

const rules = {
  'addresses[0].city': [
    { required: true, message: 'Город обязателен', trigger: 'blur' }
  ],
  'profile.age': [
    { type: 'number', min: 18, message: 'Возраст должен быть не менее 18', trigger: 'blur' }
  ]
};

Методы управления валидацией

  • validate(callback) — проверяет всю форму.
  • validateField(prop, callback) — проверяет конкретное поле.
  • resetFields() — сбрасывает форму и ошибки валидации.
  • clearValidate(props?) — очищает ошибки одного или нескольких полей.

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

formRef.value.clearValidate('username'); // только поле username
formRef.value.clearValidate(); // все поля

Полезные рекомендации

  • Использовать trigger для оптимизации UX: blur для текстовых полей, change для селектов и чекбоксов.
  • В кастомных валидаторах всегда вызывать callback() или возвращать промис, иначе валидация будет бесконечно «висеть».
  • Для динамических форм с массивами важно корректно задавать prop, чтобы ошибки привязывались к конкретному элементу массива.
  • Разделять правила по типам данных для более читаемого и поддерживаемого кода.

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

Оглавление