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

Quasar Framework предоставляет мощный набор инструментов для управления валидацией данных, пользовательскими ограничениями и правилами отображения компонентов. Основной механизм для реализации гибкой логики — это система Rules, которая применяется к компонентам формы, таким как QInput, QSelect, QCheckbox и другим.

Определение правил

Правило в Quasar — это функция, которая возвращает либо true (если проверка прошла успешно), либо строку с сообщением об ошибке (если проверка не пройдена).

Пример простого правила для проверки обязательного заполнения поля:

const requiredRule = val => !!val || 'Поле обязательно для заполнения';

Здесь:

  • val — значение поля, которое необходимо проверить.
  • !!val преобразует значение к логическому типу.
  • Сообщение 'Поле обязательно для заполнения' возвращается, если условие не выполняется.

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

Правила применяются через проп :rules компонента. Quasar поддерживает передачу массива функций:

<q-input
  filled
  label="Имя пользователя"
  v-model="username"
  :rules="[requiredRule, minLengthRule]"
></q-input>

Где minLengthRule может быть определено следующим образом:

const minLengthRule = val => val.length >= 5 || 'Минимальная длина — 5 символов';

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

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

const matchPasswordRule = (val, formModel) => {
  return val === formModel.password || 'Пароли не совпадают';
};

Использование в QInput:

<q-input
  filled
  type="password"
  label="Подтверждение пароля"
  v-model="confirmPassword"
  :rules="[val => matchPasswordRule(val, form)]"
></q-input>

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

Quasar поддерживает асинхронные функции для валидации, например, проверку доступности имени пользователя через API:

const asyncUsernameCheck = async val => {
  if (!val) return 'Поле обязательно для заполнения';
  const response = await fetch(`/api/check-username?username=${val}`);
  const data = await response.json();
  return data.available || 'Имя пользователя уже занято';
};

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

<q-input
  filled
  label="Имя пользователя"
  v-model="username"
  :rules="[asyncUsernameCheck]"
></q-input>

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

Комбинирование и повторное использование правил

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

function minLength(min) {
  return val => val.length >= min || `Минимальная длина — ${min} символов`;
}

const usernameRules = [requiredRule, minLength(5)];
const passwordRules = [requiredRule, minLength(8)];

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

Доступ к контексту компонента

Для более сложной логики правила могут использовать this внутри Vue-компонента или передавать объект модели формы, что расширяет возможности валидации:

const ageRule = function(val) {
  return val >= this.minAge || `Возраст должен быть не менее ${this.minAge}`;
};

Использование в компоненте:

<q-input
  type="number"
  label="Возраст"
  v-model="age"
  :rules="[ageRule]"
></q-input>

Интеграция с QForm

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

<q-form ref="form" @submit="submitForm">
  <q-input
    filled
    label="Email"
    v-model="email"
    :rules="[requiredRule, emailRule]"
  ></q-input>
  <q-btn label="Отправить" type="submit"></q-btn>
</q-form>

Методы validate() и resetValidation() позволяют проверять форму и сбрасывать ошибки:

methods: {
  submitForm() {
    this.$refs.form.validate().then(valid => {
      if (valid) {
        // логика отправки данных
      }
    });
  }
}

Локализация сообщений правил

Сообщения об ошибках можно хранить в объекте локализации и динамически подставлять в правила:

const messages = {
  required: 'Поле обязательно',
  minLength: length => `Минимальная длина — ${length} символов`
};

const minLengthRule = val => val.length >= 5 || messages.minLength(5);

Резюме подходов к созданию пользовательских правил

  • Использование функций, возвращающих true или строку ошибки.
  • Передача массива правил в компонент формы через :rules.
  • Создание асинхронных правил для проверки внешних данных.
  • Комбинирование и повторное использование правил через функции-генераторы.
  • Доступ к контексту Vue и модели формы для расширенной логики.
  • Интеграция с QForm для централизованной валидации.
  • Локализация сообщений для удобного масштабирования приложений.

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

Оглавление