Wprowadzenie do sprawdzania poprawności formularzy Bootstrap
Walidacja służy do akceptacji z pewnymi zasadami i przepisami. Bootstrap ma wiele klas do zbudowania formularza. Ale sprawdzanie poprawności wymaga danych kontrolnych dotyczących formularza. W tym temacie poznamy typy sprawdzania poprawności formularza Bootstrap.
Na przykład formularz ma hasło. Hasło ma wiele zasad zgodnie z wymaganiami. Ktoś potrzebuje liter, wiele potrzebuje cyfr, w przeciwnym razie ktoś będzie potrzebował znaków specjalnych. Użytkownik wie o spełnieniu wymagania, ważna jest walidacja.
Czasami użytkownik nie otrzymuje dokładnego wymogu formy lub wymaganego do wypełnienia, że sprawdzenie poprawności czasu jest pomocne w prawidłowym przesłaniu danych. Jeśli nie spełniasz specyfikacji, automatycznie otrzymujesz informację zwrotną w formularzu.
Jak sprawdzać poprawność formularzy za pomocą Bootstrap?
- Formularz bootstrap sprawia, że walidacja pozwala przezwyciężyć wszystkie komplikacje związane z kodowaniem JavaScript i łatwo współpracuje z klasami.
- Trzy funkcje sprawdzania poprawności formularza bootstrap zawierają glifikony, aby uzyskać komunikat o błędzie, ostrzeżeniu i sukcesie. Klasy walidacji zawsze umieszczane są w klasie nadrzędnej.
- Oprócz klas sprawdzania poprawności wymaga także klasy has-feedback, aby ikona znalazła się w odpowiednim miejscu w polu wprowadzania formularza wraz z etykietą. Ta klasa znajduje się w klasie nadrzędnej.
Przykład:
Klasa sprzężenia zwrotnego kontroli formy była także konieczna z ikoną glifikonu, aby ustawić ikonę w polu formularza wejściowego.
Przykład:
Rodzaje walidacji formularzy Bootstrap
Istnieją 3 rodzaje Formularza Bootstrap, jak wspomniano poniżej:
1. ma sukces
Ta klasa dawała przesłanie sukcesu. Dzięki tej klasie walidacji użytkownicy potrzebują również ikony „glyphicon glyphicon-ok”, aby pokazać ikonę sukcesu. Jeśli użytkownik poprawnie wprowadzi dane do formularza, sprawdzanie poprawności zadziałało.
Klasa sukcesu ma klasę nadrzędną. Aby uzyskać komunikat o powodzeniu, należy użyć tej weryfikacji. Poniższy przykład podaje poziomy format formularza. Dane wyjściowe pochodzą z komunikatem w kolorze zielonym.
Składnia:
.
Przykład:
Paasword
Wynik:
2. ma ostrzeżenie
Ta klasa służy do komunikatów ostrzegawczych o wprowadzaniu formularza. Dzięki tej klasie walidacji użytkownicy potrzebują również ikony „glificon glificon-warning-sign”, aby wyświetlić ikonę ostrzeżenia. Jeśli wprowadzimy nieprawidłowe dane w formularzu, mamy jeszcze jedną szansę na wprowadzenie danych, że sprawdzanie poprawności czasu zadziałało.
Klasa walidacji ostrzeżeń umieszczona w klasie nadrzędnej z klasą sprzężenia zwrotnego. Jeśli użytkownik otrzyma ostrzeżenie o jakimś błędzie, ta klasa zadziałała. Wynik pochodzi z komunikatem w żółtym kolorze.
Składnia:
.
Przykład:
Paasword
Wynik:
3. ma błąd
Ta klasa służy do komunikatów o błędach danych wejściowych formularza. Dzięki tej klasie walidacji użytkownicy potrzebują również ikony „glyphicon glyphicon-remove”, aby wyświetlić ikonę błędu. Jeśli wprowadzimy nieprawidłowe dane do formularza, sprawdzanie poprawności zadziała.
Klasa sprawdzania poprawności błędów umieszczona w klasie nadrzędnej z klasą sprzężenia zwrotnego. Jeśli użytkownik otrzyma komunikat o błędzie błędu, ta klasa zadziałała.
Składnia:
Przykład:
Paasword
Wynik:
Opis: Wszystkie formy są układem poziomym. Etykieta ma 2 kolumny, a dane wejściowe - 10 kolumn. Zestaw klasy walidacji z sprzężeniem zwrotnym w div div. Aby zobaczyć ikonę, użytkownik użył ikon glifikonu ze sprzężeniem zwrotnym sterowania formą w
Użytkownicy pracują nad hasłem. albo hasło jest poprawne, a następnie praca sprawdzania poprawności lub hasło jest nieprawidłowe, a następnie praca sprawdzania poprawności błędów. Jeśli hasło ma jakiś błąd i możemy go naprawić, sprawdzanie poprawności ostrzeżeń działa.
Przykłady sprawdzania poprawności formularzy Bootstrap
Poniżej znajdują się różne przykłady sprawdzania poprawności formularzy bootstrap:
Przykład 1
Poniższy przykład to Walidacja z formą poziomą. Znak glifikonu działa na wewnętrznym polu wprowadzania w formie. Etykieta i dane wejściowe w jednej linii poziomej, ale wszystkie klasy grupy formularzy są umieszczone pionowo.
Success
Warning
Error
Wynik:
Przykład nr 2
Poniższy przykład to Walidacja za pomocą formy pionowej. W formie pionowej wszystkie etykiety i dane wejściowe są umieszczone pionowo. Glifikon może znajdować się w linii etykiety na końcu pola wprowadzania.
W formularzu nie ma klasy. Jest rzadko używany do sprawdzania poprawności formularza w bootstrapie.
Success
Warning
Error
Wynik:
Przykład nr 3
Poniższy przykład to Walidacja za pomocą formularza wbudowanego. Formularz wbudowany zawiera wszystkie etykiety i dane wejściowe w jednym wierszu, w tym wszystkie grupy formularzy. Jest to skomplikowana, ale ikona sprawdzania poprawności umieszczona w polu wprowadzania formularza.
Jeśli użytkownicy potrzebują tylko małego formularza i formularza logowania, a następnie z potwierdzeniami, można zastosować formularz wbudowany.
Success
Warning
Error
Wynik:
Przede wszystkim ma wszystkie typy sprawdzania poprawności ze wszystkimi układami i sposobem ich działania. Zgodnie z wymaganiami i łatwością użytkownika wybierz format sprawdzania poprawności i układu formularza.
Wniosek
Sprawdzanie poprawności formularza odbywa się głównie po stronie serwera w celu kontroli danych formularza w bazie danych. W tym celu otrzymujemy wiele skomplikowanych kodowań i metod sprawdzania poprawności w języku JavaScript.
Bootstrap wykonał wszystkie czynności na jednej stronie formularza, unikając komplikacji i długiego kodowania oraz bez trudu kontrolując dane formularza.
Polecane artykuły
Jest to przewodnik po sprawdzaniu poprawności formularza Bootstrap. Tutaj omawiamy 3 typy sprawdzania poprawności formularzy rozruchowych wraz z odpowiednimi przykładami. Możesz także spojrzeć na następujący artykuł.
- Układ Bootstrap
- Komponenty Bootstrap
- Co to jest Bootstrap?
- Polecenia bootstrap
- Układ formularza Bootstrap z przykładami
- Formularze w JavaScript | Program do sprawdzania poprawności formularza