Многие из приложений, которые я создал за свою карьеру, были CRUD-приложениями. Возьмите что-то, что традиционно хранится на бумаге или в электронной таблице, поместите это в базу данных, которую легко запрашивать с помощью API, и создайте интерфейс для элегантного взаимодействия с данными.

Чтобы построить интерфейс для одного из этих приложений, вам нужна возможность создать твердую форму. Что-то визуально привлекательное, читабельное, понятное и ведущее. Все фреймворки производят эти результаты по-разному (в лучшую или худшую сторону). В этой статье мы рассмотрим, как это сделать с помощью Quasar Framework и Vue.js.

Путь квазара

В то время как существуют другие популярные библиотеки (например, Vuelidate) для проверки форм, Quasar предлагает множество готовых проверок, что делает многие из этих библиотек излишними. Мы рассмотрим эти функции, создав форму создать учетную запись, чтобы проиллюстрировать, как все это работает.

Я не буду тратить время на то, чтобы показать, как создать приложение Quasar. Это легко сделать всего за несколько минут с помощью Руководства по началу работы с Quasar CLI. Настройки проекта, которые мы будем использовать:

  • Приложение с Quasar CLI
  • Папка проекта: «quasar-validation»
  • Квазар V2
  • Машинопись
  • Вебпак
  • «Пример проверки Quasar» для имен и описаний
  • API композиции
  • СКСС
  • ESLint
  • красивее

Создайте наш компонент формы

В папке \src\components создайте новый файл с именем CreateAccountForm.vue. Это файл, в котором мы будем выполнять всю нашу работу.

Настройте наш маршрут

Последнее, что нам нужно сделать, это каким-то образом проложить маршрут к этому компоненту. В папке \router откройте routes.ts и измените дочерний путь импорта для '', чтобы он указывал на наш новый компонент CreateAccoutForm.vue.

Создание шаблона

Первое, что нам нужно сделать, это заполнить наш компонент CreateAccountForm.vue некоторым шаблоном HTML/CSS.

Классы CSS, такие как column и q-pa-sm, представляют собой классы стилей Quasar, используемые для быстрой и простой компоновки. Это помогает свести к минимуму количество стилей, которые нам нужно написать. Остальные теги <q-name> — это компоненты пользовательского интерфейса Quasar.

Теперь у вас должно получиться что-то похожее на это.

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

Следующее, что нам нужно сделать, это привязать все компоненты пользовательского интерфейса к некоторой модели данных, чтобы мы могли захватывать и отслеживать, что вводит пользователь. Мы будем использовать Vue.js Composition API. Это новшество в Vue 3, оно помогает удалить большую часть шаблонного кода Options API, а также сделать его более читабельным.

Добавьте следующий код в конец файла компонента CreateAccountForm.vue.

Здесь мы определяем typescript как язык кода, используя атрибут lang. Добавление setup к <script> сообщает Vue, что весь этот код помещается в функцию настройки компонента и доступен для шаблона.

Затем мы определили тип состояния нашей формы и использовали API Reactivity Vue для создания объекта состояния для отслеживания данных формы.

Привязать модель

Теперь мы можем привязать все наши свойства formState к различным компонентам пользовательского интерфейса, используя тег v-model для каждого ввода. Например:

<q-input label="Name *" v-model="formState.name"></q-input>

Наконец, мы хотим, чтобы наша форма запускала функцию submitForm при нажатии кнопки «Создать учетную запись». Добавьте это к тегу q-form.

<q-form @submit="submitForm">

Теперь мы должны иметь возможность заполнить одно или несколько полей формы, нажать кнопку «Создать учетную запись» и увидеть состояние нашей формы, зарегистрированной в консоли браузера!

Написание валидаторов

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

Для ввода name мы просто хотим убедиться, что пользователь ввел что-то для имени. Атрибут rules входного компонента Quasar принимает массив валидаторов. Это простые логические функции результата, которые что-то делают со значением и возвращают текст ошибки, если оно ложно.

<q-input
  label="Name *"
  v-model="formState.name"
  :rules="[
    (val) => (val && val.length > 0) || 'Name must be filled in.',
  ]"
></q-input>

Если мы сфокусируем поле, а затем отойдем от него, мы увидим ошибку. Вы также заметите, что форма больше не будет отправляться и автоматически сфокусируется на поле имени с ошибкой (Спасибо, Квазар!).

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

function validateEmail(email: string): boolean {
  return /[a-z0-9]+@[a-z]+\.[a-z]{2,3}/.test(email);
}

Мы используем регулярное выражение и тестовую функцию для сравнения строки.

В нашем компоненте электронной почты вызовите функцию с тем же атрибутом :rules="", чтобы проверить значение.

<q-input
  label="Email *"
  v-model="formState.email"
  :rules="[
    (val) => validateEmail(val) || 'Must be a valid email.'
  ]"
></q-input>

Пароль — наша самая интенсивная вещь для проверки. Здесь у нас есть список критериев, которым должен следовать пользователь. Мы хотим помочь им, когда они вводят свой пароль, сообщая им, какие критерии они успешно выполнили.

Где-нибудь в нашем теге <script> добавьте следующий код.

В этом коде у нас есть еще один объект реактивного состояния для наблюдения за тем, какие критерии успешно выполнил пользователь. Функция validatePassword() будет вызываться нашим компонентом пароля и обновлять объект состояния.

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

<div>
  <q-icon
    :name="validPassword.length ? 'check_circle' : 'cancel'"
    :color="validPassword.length ? 'positive' : 'negative'"
  ></q-icon>
  Must be at least 12 characters long.
</div>

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

<q-input
  label="Confirm Password *"
  v-model="formState.password.confirm"
  :disable="!validatePassword(formState.password.value)"
  :rules="[
    (val) =>
      (val && val === formState.password.value) ||
      'Must match password.',
  ]"
></q-input>

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

Код нашего компонента должен выглядеть примерно так.

Заключение

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

Typescript вместе с новым Composition API удаляет большую часть классического шаблонного кода и уменьшает количество ошибок за счет строгого набора текста.