Локализация валидации

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

Настройка локали для компонентов

Для изменения языка всего приложения используется функция ElLocale из пакета element-plus. Локаль можно установить глобально при инициализации приложения:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import ru from 'element-plus/es/locale/lang/ru';

const app = createApp(App);
app.use(ElementPlus, { locale: ru });
app.mount('#app');

В этом примере подключена русская локаль. Все компоненты, включая сообщения валидации по умолчанию, будут использовать русский язык.

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

  • locale принимает объект локали, предоставленный Element Plus.
  • Для других языков доступны соответствующие пакеты, например en, zhCn, fr и т.д.
  • Локаль можно менять динамически, если требуется поддержка переключения языка в приложении.

Валидация форм с локализованными сообщениями

Element Plus использует объект rules для определения правил валидации в компонентах <el-form>. Примеры правил с локализованными сообщениями:

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

При подключении русской локали по умолчанию можно использовать переводы встроенных сообщений валидации для правил типа required, email и т.д. При необходимости можно переопределять их вручную в объекте rules.

Особенности:

  • Свойство trigger определяет событие, на которое срабатывает проверка.
  • Можно комбинировать несколько правил для одного поля.
  • Сообщения могут включать динамические значения, например min и max.

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

В приложениях с поддержкой нескольких языков может потребоваться динамически менять язык сообщений. Для этого используется ElForm в сочетании с реактивной локалью:

import { reactive, watch } from 'vue';
import { ElLocale } from 'element-plus';
import ru from 'element-plus/es/locale/lang/ru';
import en from 'element-plus/es/locale/lang/en';

const state = reactive({
  currentLocale: 'ru'
});

watch(() => state.currentLocale, (newLocale) => {
  ElLocale.use(newLocale === 'ru' ? ru : en);
});

После изменения currentLocale все компоненты Element Plus автоматически обновят локализованные сообщения валидации.

Локализация кастомных сообщений

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

const rules = {
  password: [
    {
      validator: (rule, value) => {
        if (!/[A-Z]/.test(value)) {
          return new Error(state.currentLocale === 'ru'
            ? 'Пароль должен содержать хотя бы одну заглавную букву'
            : 'Password must contain at least one uppercase letter');
        }
        return true;
      },
      trigger: 'blur'
    }
  ]
};

Это позволяет поддерживать единый язык интерфейса и сообщений при любых сложных правилах валидации.

Локализация глобальных сообщений ошибок

Element Plus позволяет также локализовать глобальные сообщения ошибок для всех форм через ElMessage:

import { ElMessage } from 'element-plus';

ElMessage({
  message: state.currentLocale === 'ru'
    ? 'Произошла ошибка при отправке формы'
    : 'An error occurred while submitting the form',
  type: 'error'
});

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

Практические рекомендации

  1. Использовать встроенные локали Element Plus для стандартных правил (required, email, number), чтобы минимизировать ручную работу.
  2. Для кастомных правил всегда предоставлять локализованные сообщения через реактивное состояние или функцию.
  3. При динамической смене языка применять ElLocale.use() и реактивные watch для синхронизации компонентов.
  4. В глобальных формах и уведомлениях поддерживать единый источник локали, чтобы избежать рассинхронизации текста.

Локализация валидации в Element Plus позволяет создавать формы, полностью адаптированные под язык пользователя, включая стандартные и кастомные правила, а также динамическое переключение языков в реальном времени.

Оглавление