Jednym z najważniejszych punktów w tworzeniu stron internetowych, który czasami jest zaniedbywany lub nie zwraca się niezbędnej uwagi, jest walidacja formularza a spośród pól, które je tworzą, walidacje te wahają się od tego, jakie wartości mogą zaakceptować, przez ich długość, do tego, czy są konieczne, czy nie.
Te walidacje Strona klienta w przeszłości były prowadzone przez JavaScript budowanie niewygodnych funkcji do walidacji kilku pól i uzyskiwania wyników, które nie zawsze były najbardziej optymalne, wybrano również do walidacji po stronie serwera ale to nie dało użytkownikowi przyjaznego doświadczenia, ponieważ najpierw musieliśmy przetworzyć dane i czekać na odpowiedź z serwera, aby sprawdzić, czy wszystkie nasze dane są poprawne.
Po pewnym czasie zgrabnie pracowałem JavaScript Aby wykonywać wszelkiego rodzaju operacje po stronie klienta, wydaje się, że frameworki ułatwiają pracę, a wśród nich jeden z najbardziej znanych: jQuery; Dzięki predefiniowanej strukturze oraz czystszemu i bardziej optymalnemu sposobowi wykonywania zadań, możliwe było porzucenie wszystkich złych praktyk i zapewnienie programiście znacznie bardziej kompletnego narzędzia do realizacji tych operacji, w tym walidacji.
Ale pomimo tego, że jQuery ułatwił wiele operacji po stronie klienta, nie powstało jeszcze coś, co bezpośrednio atakowałoby kwestię walidacji, dlatego wtyczka Walidator Bootstrap który wykorzystuje wszystkie zalety jQuery i ramy HTML5 Tak CSS3, Bootstrap.
1. Walidator Bootstrap
Walidator Bootstrap to wtyczka oparta na jQuery Tak Bootstrap, pozwala na walidację formularzy, a także zawartych w nich elementów za pomocą prostego włączenia bibliotek wtyczek i użycia jego potężnego, ale prostego API, to nie zapominając o wszystkich jego cechach, zobaczmy niektóre z nich:
- Integracja z czcionkami i stylami Bootstrap.
- Predefiniowane walidacje pól, które obejmują między innymi: długość treści, daty, karty kredytowe, telefony, e-mail.
- Niestandardowe walidacje pól.
- Możliwość dodania wielu walidacji na pole.
- Możliwość wyświetlenia ikony zwrotnej zgodnie z wynikiem walidacji.
- Możliwość korzystania z wiadomości w HTML zgodnie z wynikiem walidacji.
Jak widzieliśmy, te cechy sprawiają, że jest to opcja numer jeden do rozważenia przy wdrażaniu walidacji w naszych projektach.
Czego potrzebujemy, aby z niego korzystać?Aby móc korzystać Walidator Bootstrap musimy uwzględnić jQuery najlepiej w najnowszej wersji, Bootstrap z twojej wersji 3.x i pliki .css Tak .js z księgarni. Dodatkowo będziemy potrzebować instalacji serwera WWW, takiej jak Wamp jeśli pracujemy nad Okna lub Lampa w Linux.
2. Walidatory
Zanim przejdziesz do praktycznej części tego samouczka, ważne jest, aby poznać niektóre z najważniejszych walidatorów, z których korzysta. Walidator Bootstrap do obsługi walidacji w ramach formularzy zobaczmy:
podstawa64Sprawdza ciąg znaków zakodowany algorytmem base-64.
pomiędzySprawdź, czy wartość pola jest ściśle pomiędzy dwiema podanymi liczbami, czy nie.
karta kredytowaZweryfikuj numer karty kredytowej.
DataSprawdź poprawność daty zgodnie z określonymi opcjami, spośród których wyróżnia się format, data maksymalna, minimalna, a nawet separatorem.
cyfryZwraca prawdę lub prawdę, jeśli wartość zawiera tylko liczby.
adres mailowyJak sama nazwa wskazuje, weryfikuje adres e-mail.
wyrażenie regularneSprawdza, czy podana wartość pasuje lub odpowiada wyrażeniu regularnemu JavaScript.
To tylko niewielka próbka pełnego repertuaru walidatorów, które mamy w Walidator BootstrapPo pełną listę walidatorów możemy wejść tutaj i sprawdzić ten, który najlepiej odpowiada naszym potrzebom:
3. Forma loginu
Jednym z najważniejszych aspektów każdej obecnej witryny internetowej jest Forma loginu, gdzie nasi użytkownicy mogą wejść za pomocą swojej nazwy użytkownika i hasła do naszej strony i cieszyć się dodatkowymi korzyściami podczas logowania.
Walidator Bootstrap pozwala nam dodatkowo walidować te dwa pola kilkoma prostymi linijkami kodu Bootstrap pozwala nam nadać mu dodatkowy akcent, pozwalając w prosty sposób zaimplementować okno modalne, budując w ten sposób formularz logowania, który będzie wyglądał profesjonalnie i przyjemnie dla oka.
Ponieważ nie będziemy dokonywać żadnych modyfikacji kodu źródłowego żadnego z wyżej wymienionych plików, uwzględnimy je z ich odpowiednich CDN, najpierw dołączymy pliki .css tak dużo Boostrap lubić Walidator Bootstrap:
Teraz dołączymy pliki .js i aby mieć znacznie czystszą strukturę, oddzielimy kod naszych walidacji w pliku o nazwie walidator.js:
Wtedy skorzystamy z dobrodziejstw Bootstrap do zbudowania naszego okna modalnego, które po prostu poprzez zastosowanie odpowiednich klas do elementów, które je tworzą, zastosowana zostanie pożądana funkcjonalność:
Forma loginu×Zobaczmy, jak do tej pory wygląda nasz przykład, gdy uruchomimy go w przeglądarce:Zaloguj sie
Nazwa użytkownikaHasłoZaloguj sie
Mamy już działające nasze okno modalne, wraz z naszym formularzem, teraz musimy tylko uwzględnić walidacje z Walidator Bootstrap, w tym celu zainicjujemy a dokument.gotowy w naszym pliku walidator.js i w tym nazwiemy metodę boostrapWalidator ():
$ ('# loginForm').bootstrapValidator ({wiadomość: 'Ta wartość jest nieprawidłowa', feedbackIcons: {valid: 'glyphicon glyphicon-ok', niepoprawne: 'glyphicon glyphicon-remove', sprawdzanie poprawności: 'glyphicon glyphicon-refresh' }, pola: {user: {validators: {notEmpty: {message: 'Nazwa użytkownika jest wymagana'}}}, hasło: {validators: {notEmpty: {message: 'Hasło jest wymagane'}}}}} ); Pierwszą rzeczą jaką powinniśmy zauważyć w tym kodzie jest użycie selektora do inicjalizacji metody, w tym przypadku używamy ID formularza, który jest wywoływany Forma loginu, aby przejść przez drzewo DOM i przejdź do pozycji znajdujących się poniżej w hierarchii. Następnie definiujemy ogólny komunikat i ikony informacji zwrotnej, aby nadać naszemu formularzowi wizualny akcent w przypadku powodzenia lub błędu w walidacjach.
Wreszcie mamy nasze walidacje i jak widzimy na pierwszy rzut oka jest to coś niezwykle czytelnego i niezrównanej prostoty, wskazujemy nazwy pól naszych formularzy i w tym przykładzie użyjemy pojedynczej walidacji, która będzie tą z wymagane pole, ale jak skomentowaliśmy, może być więcej niż jedno pole.
Zobaczmy na poniższym obrazku, jak wygląda nasz formularz, gdy próbujemy wysłać informacje bez wypełnienia pól:
Jak widzimy, jak działają nasze walidacje i dopóki informacje nie zostaną wprowadzone w pola, formularz nie wykona Zatwierdź Ponieważ przycisk jest domyślnie wyłączony, zobaczmy na poniższym obrazku, jak wygląda nasz formularz, gdy wprowadzamy niezbędne dane, a ikony opinii odpowiednio się zmieniają:
W ciągu kilku minut udało nam się zbudować formularz logowania z odpowiednimi walidacjami po stronie klienta, a wszystko to dzięki Walidator Bootstrap.
4. Formularz rejestracyjny
Poprzedni przypadek jest prosty i dość przydatny, ale nie jest jedynym obecnym w opracowaniu, istnieją formularze rejestracyjne, które zawierają znacznie więcej pól, a ograniczenia dotyczące wprowadzania informacji są różne.
W przeszłości stanowiło to problem, ponieważ w zależności od ilości pól licznik musiał być wykonywany i walidowany pole po polu, a gdy ten licznik osiągnął określoną liczbę, oznaczało to, że nie było błędów, nie zapominając o poszczególnych walidacjach każde pole, takie jak formaty dat, które akceptują tylko liczby lub nawet długość pola.
Z Walidator Boostrap a jego predefiniowane walidatory pomagają nam w tym zadaniu w prosty i szybki sposób, zobaczmy:
Najpierw dołączymy pliki .css Tak .js którego użyliśmy w poprzednim przykładzie, dodatkowo dodamy kilka bibliotek, aby móc korzystać z selektor daty i godziny z Boostrap:
Gdy to zrobimy, budujemy nasz formularz i nadajemy każdemu polu odpowiednią nazwę:
Zobaczmy jak wygląda ten formularz w naszej przeglądarce:Formularz rejestracyjny
NazwyNazwiskaE-mailHasłoData urodzenia*****MężczyznaKobiecyTelefonKomórkaZameldować się
Przed przejściem do walidacji ważne jest, abyśmy postawili nasze selektor daty i godziny w tym celu w naszym pliku musimy tylko umieścić następujące wiersze kodu walidator.js i podaj identyfikator, który posiada nasze pole w postaci:
$ (funkcja () {$ ('# datetimepicker').datetimepicker ({pickTime: false});}); Zobaczmy, jak wygląda ta wtyczka:
Jak widzieliśmy, formularz ma mieszane pola, w tym tekst, pola hasła, datetimepicker, a nawet przyciski radiowe, ale to nie jest problem dla Walidator Bootstrap, użyjemy naszego tego samego pliku walidator.js do walidacji wystarczy wykonać nową instancję metody boostrapWalidator z identyfikatorem nowego formularza i zawierają to samo:
$ („# registrationForm”). {notEmpty: {wiadomość: 'Imię jest wymagane'}}}, nazwisko: {validators: {notEmpty: {message: 'Nazwisko jest wymagane'}}}, email: {validators: {notEmpty: {message: ' Email jest wymagany i nie może być pusty '}, emailAddress: {message:' Email jest nieprawidłowy '}}}, hasło: {validators: {notEmpty: {message:' Hasło jest wymagane i nie może być puste ' }, stringLength: {min: 8, komunikat: 'Hasło musi zawierać co najmniej 8 znaków'}}}, datetimepicker: {validators: {notEmpty: {message: 'Data urodzenia jest wymagana i nie może być pusta'} , data: {format: 'RRRR-MM-DD', komunikat: 'Data urodzenia jest nieprawidłowa'}}}, *****: {validators: {notEmpty: {komunikat: '**** * jest wymagane '}}}, telefon: {wiadomość:' Telefon or is not valid ', validators: {notEmpty: {message:' Telefon jest wymagany i nie może być pusty '}, regexp: {regexp: / [0-9] + $ /, message:' Telefon może być tylko zawiera cyfry'}}}, telefono_cel: {wiadomość: 'Telefon jest nieprawidłowy', walidatory: {regexp: {regexp: / [0-9] + $ /, wiadomość: 'Telefon może zawierać tylko cyfry'} }},}}); Widzimy, że dla pierwszych dwóch walidacji są one podobne do poprzedniego przykładu, ale gdy znajdziemy pole email, widzimy, że ma ono walidację pola wymaganego i dodatkowo z walidatorem adres mailowy Weryfikujemy, czy jest to poprawny adres e-mail, zobaczmy, jak zachowuje się ta walidacja:
Z selektor dat Nie mamy problemów z wprowadzaniem dat, jednak jeśli chcemy otrzymać to w możliwie najczystszy sposób, możemy sprawdzić poprawność formatu, jak widać w poniższej walidacji, w której wskazujemy, że format powinien być RRRR-MM-DD co jest ważne dla:
Możemy nawet sprawdzić, ile znaków może zawierać hasło Długość łańcucha i opcja min:
Aby zakończyć i zademonstrować moc tej wtyczki, zamierzamy sprawdzić poprawność telefonu, moglibyśmy użyć walidatora cyfr, ale w tym przypadku użyjemy czegoś bardziej złożonego, takiego jak wyrażenie regularne, a najlepsze jest to, że mamy już walidator dla że wyrażenie regularne, Zobaczmy, jak to działa w naszym formularzu:
Po sprawdzeniu, że wszystkie nasze walidacje działają poprawnie, poprawimy wszystkie informacje w naszym formularzu i zobaczymy, jak to wygląda z odpowiednimi informacjami:
Na tym kończymy ten samouczek, w którym nauczyliśmy się korzystać z walidacji Walidator Boostrap, potężna wtyczka, która nie wymaga instalacji ani konfiguracji i która pozwala nam szybko i łatwo sprawdzać nasze formularze za pomocą kilku prostych linijek kodu.
