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

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

Использование правила required

Правило required применяется для проверки обязательного заполнения поля. Оно поддерживается практически всеми типами ввода: текстовые поля, селекты, чекбоксы.

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="Имя" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: 'Поле обязательно для заполнения', trigger: 'blur' }
        ]
      }
    };
  }
};
</script>

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

  • required: true — указывает на обязательность заполнения.
  • message — текст ошибки, отображаемый при несоблюдении правила.
  • trigger — событие, при котором выполняется проверка (blur, change).

Валидаторы формата

Element Plus поддерживает встроенные проверки формата данных через свойство type. Основные типы:

  • email — проверка e-mail.
  • number — проверка числового значения.
  • url — проверка URL.
  • date — проверка формата даты.

Пример проверки e-mail:

rules: {
  email: [
    { type: 'email', required: true, message: 'Введите корректный e-mail', trigger: 'blur' }
  ]
}

Ограничение длины строк

Для текстовых полей можно использовать свойства min, max и len:

  • min — минимальная длина строки.
  • max — максимальная длина строки.
  • len — точная длина строки.

Пример:

rules: {
  username: [
    { required: true, min: 3, max: 12, message: 'Имя пользователя должно быть от 3 до 12 символов', trigger: 'blur' }
  ]
}

Числовые ограничения

Для числовых значений доступны свойства min, max, len и type: 'number'.

rules: {
  age: [
    { type: 'number', min: 18, max: 65, message: 'Возраст должен быть от 18 до 65', trigger: 'blur' }
  ]
}

Особенность: если значение приходит как строка, необходимо сначала преобразовать его в число, иначе встроенный валидатор не сработает корректно.

Регулярные выражения через pattern

Для более гибкой проверки используется свойство pattern, принимающее регулярное выражение.

rules: {
  phone: [
    { pattern: /^\+7\d{10}$/, message: 'Телефон должен быть в формате +7XXXXXXXXXX', trigger: 'blur' }
  ]
}

Особенности использования:

  • Подходит для формата телефона, паспортных данных, почтовых индексов.
  • Совмещается с другими встроенными правилами, например required.

Комбинирование нескольких правил

Для одного поля можно задать массив правил, которые будут выполняться последовательно.

rules: {
  password: [
    { required: true, message: 'Введите пароль', trigger: 'blur' },
    { min: 6, message: 'Пароль не менее 6 символов', trigger: 'blur' },
    { pattern: /^(?=.*[A-Z])(?=.*\d)/, message: 'Пароль должен содержать заглавную букву и цифру', trigger: 'blur' }
  ]
}

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

События проверки

Основные события валидации:

  • blur — проверка при потере фокуса.
  • change — проверка при изменении значения.
  • submit — проверка при попытке отправки формы через $refs.formRef.validate().

Пример:

this.$refs.formRef.validate((valid) => {
  if (valid) {
    console.log('Форма прошла проверку');
  } else {
    console.log('Ошибка валидации');
    return false;
  }
});

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

  1. Асинхронная проверка: встроенные валидаторы поддерживают Promise, что позволяет использовать их с серверной проверкой.
  2. Наследование правил: при использовании вложенных форм <el-form-item> правила могут наследоваться из родительской формы.
  3. Совместимость с компонентами Element Plus: все стандартные компоненты (<el-input>, <el-select>, <el-checkbox>) корректно интегрируются с валидаторами без дополнительных настроек.

Практические советы

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

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

Оглавление