Potrzebujesz formularzy do następnego projektu? Oto jak tworzyć formularze za pomocą FormKit.

Formularze to brama umożliwiająca użytkownikom interakcję z aplikacją i dostarczanie niezbędnych danych do zadań, takich jak tworzenie konta, przetwarzanie płatności i zbieranie informacji. Ale tworzenie formularzy może być zniechęcającym zadaniem, wymagającym rozbudowanego kodu szablonowego, który jest czasochłonny i podatny na błędy

FormKit oferuje rozwiązanie, dostarczając gotowe komponenty, które eliminują potrzebę stosowania kodu standardowego. Oto jak go używać.

Co to jest FormKit?

FormKit to framework do tworzenia formularzy o otwartym kodzie źródłowym, opracowany specjalnie dla Vue 3, zaprojektowany w celu uproszczenia procesu tworzenia wysokiej jakości, gotowych do produkcji formularzy. Jest to ulepszona wersja popularnego Formuła Vue biblioteka i zapewnia ponad 25 konfigurowalnych i dostępnych opcji wprowadzania, wraz z predefiniowanym zestawem reguł sprawdzania poprawności.

FormKit oferuje również możliwość generowania formularzy za pomocą schematów dynamicznych zgodnych z formatem JSON, co ułatwia szybkie tworzenie złożonych formularzy. Dodatkowo FormKit ma aktywną społeczność na Discordzie, zapewniając wsparcie i wspierając współpracę między użytkownikami. Dzięki wszechstronnym funkcjom i systemowi wsparcia FormKit jest niezawodnym i wydajnym narzędziem dla programistów, którzy chcą tworzyć formularze dla swoich projektów Vue 3.

instagram viewer

Cechy frameworka FormKit

W FormKit znajdziesz szeroki wybór funkcji tworzenia formularzy.

1. Interfejs API pojedynczego komponentu

Jedną z interesujących funkcji FormKit jest jednoskładnikowe API: część. Daje dostęp do wszystkich typów wejść. Daje to bezpośredni i łatwy dostęp do tworzenia elementów formularza zamiast konieczności korzystania z natywnych elementów HTML.

2. Wstępnie zdefiniowane zasady walidacji

Formkit upraszcza obsługę sprawdzania poprawności formularzy umożliwiając bezpośrednie zastosowanie zestawu reguł do danych wejściowych za pomocą walidacji. Ma ponad 30 różnych predefiniowanych reguł, które możesz wybrać w zależności od preferencji. Alternatywnie możesz tworzyć niestandardowe reguły zarejestrowane globalnie lub specjalnie dla danych wejściowych dla złożonych ograniczeń.

3. Konfigurowalne opcje stylizacji

FormKit nie ma domyślnych opcji stylizacji, ale ma opcjonalny motyw podstawowy — Genesis. Musisz to zainstalować osobno.

Najpierw instalując @formkit/motywy pakiet.

instalacja npm @formkit/themes

Następnie zaimportuj go do swojego projektu

import„@formularz/motywy/geneza”

Inne opcje stylów obejmują użycie niestandardowych klas, które umożliwiają stosowanie własnych stylów i klas do dostarczonych znaczników FormKit.

4. Generowanie schematu

Generowanie schematów w FormKit to doskonała funkcja, która upraszcza proces tworzenia pól formularzy. Schemat to tablica obiektów, z których każdy reprezentuje element HTML i możesz reprezentować tylko w formacie JSON.

Tablica schematu składa się z obiektów węzłów FormKit, które odpowiadają różnym elementom, takim jak elementy HTML, komponenty lub węzły tekstowe. Obiekty te mogą odwoływać się do wcześniej istniejących zmiennych Vue i renderować dowolne znaczniki lub komponenty z edytowalnymi atrybutami i rekwizytami, dzięki czemu jest to wydajna metoda budowania i dostosowywania formularzy. Domyślnie nie jest zarejestrowany globalnie, więc musisz go zaimportować.

import { FormKitSchema } z„@formularz/vue”

Integracja FormKit z Vue3

Aby rozpocząć korzystanie z FormKit w aplikacji Vue 3, najpierw zainstaluj go w swoim projekcie. Ta sekcja będzie obejmować demonstrację przy użyciu nowej aplikacji vue od podstaw.

Wymagania wstępne dotyczące korzystania z FormKit

Przed rozpoczęciem upewnij się, że masz:

  • Podstawowa znajomość Vue i JavaScript
  • Node.js i npm skonfigurowane na twoim komputerze

Gdy wszystko będzie gotowe, możesz utworzyć swoją pierwszą aplikację.

Tworzenie nowej aplikacji Vue

Najpierw uruchom poniższe polecenie w swoim terminalu, aby zainicjować nową aplikację Vue:

npm init vue@najnowszy

Następnie wykonaj kroki określone w monicie zgodnie z własnymi preferencjami. Po całkowitym zainstalowaniu projektu przejdź do instalacji FormKit w aplikacji.

instalacja npm @formkit/vue

Dalej, w main.js plik.

import { utwórz aplikację } z„Vue”
import'./style.css'
import Aplikacja z„./Aplikacja.vue”
// Skonfiguruj Formkit
import { wtyczka, konfiguracja domyślna } z"@formkit/vue";
// Zaimportuj motyw Genesis
import"@formkit/tematy/geneza";
utwórz aplikację (aplikację). użyj (podłącz, konfiguracja domyślna).mount(„#aplikacja”)

Paczka @formkit/vue jest dostarczany z wtyczką Vue i domyślnie skonfigurowaną konfiguracją do bezproblemowej instalacji. Po zakończeniu konfiguracji wszystko jest gotowe do włączenia komponent do swojej aplikacji Vue 3. Możesz także dodać konfigurację motywów Genesis, jak wspomniano wcześniej.

Tworzenie formularzy wielokrotnego użytku za pomocą FormKit

W tej sekcji pokazano, jak wykorzystać FormKit do tworzenia funkcjonalnego i dostosowywalnego formularza poprzez utworzenie prostego formularza rejestracyjnego.

Dla lepszej struktury kodu dobrze jest stworzyć osobny plik dla tego komponentu: RegistrationForm.vue

Najpierw zdefiniuj element wejściowy przy użyciu tego formatu

typ="tekst"
 etykieta="Imię"
 symbol zastępczy=„Abiola”
 walidacja="wymagana|długość: 4"
pomoc = "Wpisz minimum 4 znaki"
<FormKit/>

Ten kod pokazuje, jak używać FormKit do generowania danych wejściowych tekstu przy użyciu typu tekstu. Właściwość walidacji oddziela reguły za pomocą symbolu potoku „|”. Pomoc umieszcza mały tekst tuż pod elementem wejściowym.

Możesz także zapoznać się z innymi typami danych wejściowych, takimi jak te poniżej.

typ="tekst"
 etykieta="Nazwisko"
 symbol zastępczy=„Estera”
 walidacja="wymagana|długość: 4"
pomoc = "Wpisz minimum 4 znaki"
 />
typ="e-mail"
 etykieta=„Adres e-mail”
 ikona-prefiksu="e-mail"
 walidacja="wymagany|adres e-mail"
 symbol zastępczy=„[email protected]”
 />
typ="data"
 etykieta="Data urodzenia"
pomoc=„Wprowadź swoją datę urodzenia w formacie DD/MM/RRRR”
 walidacja="wymagany"
 />
 v-model="wartość"
typ="radio"
 etykieta="Płeć"
 :opcje=„['Mężczyzna', 'Kobieta']"
pomoc="Wybierz płeć"
 />
typ="plik"
 etykieta=„Prześlij swoje zdjęcie”
 zaakceptować =".jpg,.png,.jpeg"
pomoc=„Wybierz swój obraz”
 />

Kod pokazuje, jak używać niektórych innych elementów wejściowych i ustawiać reguły sprawdzania poprawności.

FormKit zawiera rekwizyt typu o nazwie „form”, który zawija wszystkie elementy wejściowe. Monitoruje stan walidacji formularza i blokuje użytkownikom możliwość przesłania go, jeśli jakiekolwiek dane wejściowe są nieprawidłowe. Dodatkowo automatycznie generuje przycisk przesyłania.

typ="formularz"
 formularz-klasa=„pojemnik zewnętrzny”
 prześlij etykietę ="Rejestr"
@składać="Rejestr">

Połączenie wszystkiego razem daje pełną formę, jak pokazano na poniższym obrazku.

Generowanie formularzy przy użyciu schematu FormKit

Dzięki schematom JSON możliwe jest generowanie formularzy podobnych do elementów wejściowych, tak jak to zrobiono wcześniej. Aby wygenerować formularz, po prostu podaj tablicę schematu do pliku składnik za pomocą schemat rekwizyt.

Tablica schematów

konst schemat = [
 {
 $formularz: "e-mail",
 nazwa: "e-mail",
 etykieta: „Adres e-mail”,
 symbol zastępczy: "Wprowadź swój email",
 walidacja: "wymagany|adres e-mail",
 },
 {
 $formularz: 'hasło',
 nazwa: 'hasło',
 etykieta: 'Hasło',
 walidacja: 'wymagana|długość: 5,16'
 },
 {
 $formularz: 'hasło',
 nazwa: „hasło_potwierdź”,
 etykieta: „Potwierdź hasło”,
 walidacja: „wymagane|potwierdź”,
 walidacjaEtykieta: 'Potwierdzenie hasła',
 },
 ];

Następnie jest przekazywany do właściwości w komponencie FormKit.

"formularz" formularz-klasa=„pojemnik zewnętrzny”prześlij etykietę ="Zaloguj sie">
<FormKitSchema:schemat="schemat" />
FormKit>

To jest ostateczny wygenerowany wynik:

Szybsze podejście do tworzenia formularzy w Vue3

FormKit zapewnia szybsze i wydajniejsze podejście do budowania formularzy w Vue 3. Dzięki FormKit możesz wyeliminować potrzebę tworzenia szablonów szablonów od zera, co pozwala skupić się na bezpośredniej implementacji logiki. Ten usprawniony proces nie tylko oszczędza czas, ale także zwiększa produktywność.

Ponadto FormKit umożliwia dynamiczne renderowanie formularzy poprzez renderowanie warunkowe. Ta funkcja umożliwia tworzenie interaktywnych i przyjaznych dla użytkownika interfejsów, w których elementy formularza są wyświetlane lub ukrywane w zależności od określonych warunków.