Пользовательские валидаторы

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

Создание пользовательского валидатора

Пользовательский валидатор определяется как функция, принимающая три параметра:

  1. rule – объект правила валидации, определенный в rules.
  2. value – текущее значение поля формы.
  3. callback – функция, вызываемая для уведомления формы о результате проверки.

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

const onlyLettersValida tor = (rule, value, callback) => {
  const regex = /^[A-Za-z]+$/;
  if (!value) {
    callback(new Error('Поле не может быть пустым'));
  } else if (!regex.test(value)) {
    callback(new Error('Поле должно содержать только буквы'));
  } else {
    callback();
  }
};

В этом примере:

  • Если поле пустое, вызывается ошибка.
  • Если значение не соответствует регулярному выражению, возвращается соответствующая ошибка.
  • В случае успешной проверки вызывается callback() без параметров.

Подключение валидатора к <el-form-item>

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

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

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

export default {
  setup() {
    const form = ref({ name: '' });
    const formRef = ref(null);

    const onlyLettersValida tor = (rule, value, callback) => {
      const regex = /^[A-Za-z]+$/;
      if (!value) {
        callback(new Error('Поле не может быть пустым'));
      } else if (!regex.test(value)) {
        callback(new Error('Поле должно содержать только буквы'));
      } else {
        callback();
      }
    };

    const rules = {
      name: [
        { validator: onlyLettersValidator, trigger: 'blur' }
      ]
    };

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

    return { form, rules, formRef, submitForm };
  }
};
</script>

Ключевые моменты:

  • validator – функция проверки.
  • trigger – событие, на которое срабатывает валидация (blur, change).
  • prop в <el-form-item> должен совпадать с ключом правила в rules.

Асинхронные валидаторы

Пользовательский валидатор может работать асинхронно, возвращая Promise вместо использования callback. Это полезно, когда проверка требует запроса к серверу, например, проверки уникальности логина.

const asyncValidator = (rule, value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!value) {
        reject(new Error('Поле обязательно для заполнения'));
      } else if (value.length < 3) {
        reject(new Error('Минимальная длина – 3 символа'));
      } else {
        resolve();
      }
    }, 500);
  });
};

Использование такого валидатора:

rules: {
  username: [
    { validator: asyncValidator, trigger: 'blur' }
  ]
}

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

Один <el-form-item> может содержать несколько правил, включая комбинацию встроенных и пользовательских:

rules: {
  password: [
    { required: true, message: 'Введите пароль', trigger: 'blur' },
    { min: 6, message: 'Пароль должен содержать минимум 6 символов', trigger: 'blur' },
    { validator: customPasswordValidator, trigger: 'blur' }
  ]
}

Такой подход позволяет:

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

Динамическая валидация

Иногда нужно менять правила валидации на лету в зависимости от состояния формы. Для этого можно обновлять объект rules и вызывать метод clearValidate перед новой проверкой:

formRef.value.clearValidate('password');
rules.password = [
  { validator: dynamicValidatorBasedOnType(selectedType), trigger: 'blur' }
];

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

Важные рекомендации

  • Возвращать ошибки правильно: для callback-валидатора использовать new Error('сообщение'). Для Promise-валидатора использовать reject(new Error('сообщение')).
  • Использовать trigger осознанно: blur лучше для проверки после ввода, change — для динамических обновлений.
  • Избегать тяжелых операций: асинхронные проверки лучше оптимизировать, чтобы не блокировать UI.
  • Комбинировать правила: встроенные правила (required, min, max, pattern) удобно сочетать с пользовательскими для повышения читаемости и поддержки кода.

Пользовательские валидаторы в Element Plus позволяют реализовать гибкую, мощную и точную валидацию, управлять асинхронными процессами и создавать динамические формы без лишнего дублирования кода. Их грамотное применение повышает качество UX и надежность приложений на Vue 3.

Оглавление