Wprowadzenie do walidacji ograniczeń HTML5

Interaktywnych stron internetowych i aplikacji nie można sobie wyobrazić bez formularzy, które umożliwiają nam połączyć się z naszymi użytkownikami, i do uzyskać dane potrzebujemy w celu zapewnienia płynnych transakcji z nimi. Potrzebujemy poprawne dane użytkownika, jednak musimy ją zdobyć w taki sposób, że nie frustruje naszych użytkowników za dużo.

Chociaż możemy poprawić użyteczność naszych formularzy dzięki inteligentnie dobranym wzorcom projektowym UX, HTML5 ma również natywny mechanizm walidacji ograniczeń, który pozwala nam łap błędy wejściowe bezpośrednio w interfejsie.

W tym poście skupimy się na sprawdzanie ograniczeń za pomocą przeglądarki, i przyjrzyj się, w jaki sposób deweloperzy frontendu mogą zabezpieczyć poprawne dane użytkownika za pomocą HTML5.

Dlaczego potrzebujemy walidacji danych wejściowych od frontu?

Sprawdzanie poprawności danych wejściowych ma dwa główne cele. Treść, którą otrzymujemy, musi być:

1. Przydatne

Potrzebujemy użyteczne dane, z którymi możemy pracować. Musimy wprowadzić ludzi realistyczne dane we właściwym formacie. Na przykład nikt, kto żyje dzisiaj, nie urodził się 200 lat temu. Pobieranie takich danych może na początku wydawać się zabawne, ale na dłuższą metę jest denerwujące i wypełnia naszą bazę danych niepotrzebnymi danymi.

2. Zabezpiecz

W odniesieniu do bezpieczeństwa oznacza to, że musimy zapobiec wstrzyknięciu złośliwej zawartości - celowe lub przypadkowe.

Przydatność (uzyskiwanie rozsądnych danych) można osiągnąć tylko po stronie klienta, zespół zaplecza nie może za wiele pomóc. Osiągnąć bezpieczeństwo, deweloperzy frontend i backend muszą ze sobą współpracować.

Jeśli deweloperzy frontendów poprawnie sprawdzają poprawność danych wejściowych po stronie klienta, zespół zaplecza będzie musiał radzić sobie ze znacznie mniej lukami. Hackowanie (strona) często pociąga za sobą przesyłanie dodatkowych danych, lub dane w złym formacie. Programiści mogą walczyć z takimi lukami bezpieczeństwa, z powodzeniem walczyć z frontonu.

Na przykład ten przewodnik bezpieczeństwa PHP zaleca sprawdzenie wszystkiego, co możemy po stronie klienta. Podkreślają znaczenie walidacji frontendowej, podając wiele przykładów, takich jak:

„Sprawdzanie poprawności danych wejściowych działa najlepiej przy skrajnie ograniczonych wartościach, np. Gdy coś musi być liczbą całkowitą lub łańcuchem alfanumerycznym lub adresem URL HTTP”.

W walidacji danych wejściowych naszym zadaniem jest nakładają rozsądne ograniczenia na wejściu użytkownika. Funkcja walidacji ograniczeń HTML5 zapewnia nam odpowiednie środki.

Walidacja ograniczeń HTML5

Przed HTML5 programiści frontendu byli ograniczeni sprawdzanie poprawności danych wejściowych użytkownika za pomocą JavaScript, co było żmudnym i podatnym na błędy procesem. Aby poprawić walidację formularzy po stronie klienta, HTML5 wprowadził walidacja ograniczenia algorytm działający w nowoczesnych przeglądarkach i sprawdza ważność przesłanych danych wejściowych.

Aby dokonać oceny, algorytm używa atrybuty walidacyjne elementów wejściowych, Jak na przykład , </code>, i <code><select></code>. Jeśli chcesz wiedzieć, jak sprawdzanie poprawności odbywa się krok po kroku w przeglądarce, sprawdź dokument WhatWG.</p> <p>Dzięki funkcji sprawdzania ograniczeń HTML5 możemy wykonać wszystko <strong>standardowe zadania sprawdzania poprawności danych wejściowych</strong> po stronie klienta <strong>bez JavaScript, wyłącznie z HTML5</strong>.</p> <p>Aby wykonać bardziej złożone zadania związane z walidacją, HTML5 zapewnia nam <strong>Interfejs JavaScript do sprawdzania poprawności ograniczeń</strong> możemy użyć do skonfigurowania naszych niestandardowych skryptów walidacyjnych.</p> <h4>Sprawdź poprawność za pomocą semantycznych typów danych wejściowych</h4> <p>Wprowadzono HTML5 <strong>typy danych semantycznych</strong> do tego - oprócz wskazania znaczenia elementu dla aplikacji użytkownika - można również wykorzystać <strong>Sprawdź poprawność danych wprowadzonych przez użytkownika</strong> ograniczając użytkowników do określonego formatu wejściowego.</p> <p>Poza typami danych wejściowych, które już istniały przed HTML5 (<code>tekst</code>, <code>hasło</code>, <code>Zatwierdź</code>, <code>nastawić</code>, <code>radio</code>, <code>pole wyboru</code>, <code>przycisk</code>, <code>ukryty</code>), możemy również użyć następujących <strong>semantyczne typy wejściowe HTML5</strong>: <code>e-mail</code>,<code>tel</code>,<code>url</code>,<code>numer</code>,<code>czas</code>,<code>data</code>,<code>datetime</code>,<code>datetime-local</code>, <code>miesiąc</code>,<code>tydzień</code>, <code>zasięg</code>, <code>Szukaj</code>,<code>kolor</code>.</p> <p>Możemy bezpiecznie używać typów wejściowych HTML5 ze starszymi przeglądarkami, ponieważ będą się zachowywać jak <code><input type="text"></code> pole w przeglądarkach, które ich nie obsługują.</p> <p>Zobaczmy, co się stanie, gdy użytkownik wprowadzi zły typ wejścia. Załóżmy, że utworzyliśmy pole wprowadzania wiadomości e-mail z następującym kodem:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Twój email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Gdy użytkownik wpisze ciąg, który nie używa formatu e-mail, algorytm sprawdzania ograniczenia <strong>nie przesyła formularza</strong>, i <strong>zwraca komunikat o błędzie</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Ta sama reguła dotyczy również innych typów danych wejściowych, na przykład dla <code>type = "url"</code> użytkownicy mogą przesyłać tylko dane wejściowe zgodne z formatem URL (zaczyna się od protokołu, takiego jak <code>http: //</code> lub <code>ftp: //</code>).</p> <p>Niektóre typy wejść używają tego projektu <strong>nie pozwala nawet użytkownikom na wprowadzenie niewłaściwego formatu wejściowego</strong>, na przykład <code>kolor</code> i <code>zasięg</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Kolor tła:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Jeśli użyjemy <code>kolor</code> typ wejścia użytkownik jest ograniczony do wybrania koloru z próbnika kolorów lub pozostania z domyślną czernią. Pole wprowadzania to <strong>ograniczony przez projekt</strong>, dlatego nie pozostawia wiele szans na błąd użytkownika.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Kiedy jest to właściwe, warto rozważyć użycie <code><select></code> Znacznik HTML, który działa podobnie do tych typów danych wejściowych z ograniczeniami; pozwala użytkownikom wybrać z listy rozwijanej.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Twój ulubiony owoc:</label> <select name="fruit"> <option value="apple">jabłko</option> <option value="pear">Gruszka</option> <option value="orange">Pomarańczowy</option> <option value="raspberry">Malina</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Użyj atrybutów walidacyjnych HTML5</h4> <p>Korzystanie z semantycznych typów danych wejściowych określa pewne ograniczenia dotyczące tego, co użytkownicy mogą przesyłać, ale w wielu przypadkach chcemy pójść trochę dalej. To wtedy <strong>atrybuty związane z walidacją</strong> z <code><input></code> tag może nam pomóc.</p> <p>Atrybuty związane z walidacją należą do pewnych typów danych wejściowych (nie można ich używać na <em>wszystko</em> typy), na które nakładają dalsze ograniczenia.</p> <h5>1. <code>wymagany</code> za uzyskanie prawidłowych danych wejściowych</h5> <p>The <code>wymagany</code> atrybut jest najbardziej znanym atrybutem sprawdzania poprawności HTML. To jest <strong>atrybut boolean</strong> co oznacza to <strong>nie przyjmuje żadnej wartości</strong>, po prostu musimy umieścić go w środku <code><input></code> tag, jeśli chcemy go użyć:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Jeśli użytkownik zapomni wprowadzić wartość do wymaganego pola wejściowego, przeglądarka <strong>zwraca komunikat o błędzie</strong> który ostrzega ich, aby wypełnili pole, a oni <strong>nie mogę przesłać formularza</strong> dopóki nie podadzą poprawnych danych wejściowych. Dlatego zawsze ważne jest <strong>zaznacz wizualnie</strong> wymagane pola dla użytkowników.</p> <p>The <code>wymagany</code> atrybut może być <strong>używane razem z następującymi typami danych wejściowych</strong>: <code>tekst</code>, <code>Szukaj</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>hasło</code>, <code>data</code>, <code>datetime</code>, <code>datetime-local</code>, <code>miesiąc</code>, <code>tydzień</code>,<code>czas</code>, <code>numer</code>, <code>pole wyboru</code>, <code>radio</code>, <code>plik</code>, plus z <code><textarea></code>i <code><select></code> Tagi HTML.</p> <h5>2. <code>min</code>, <code>max</code> i <code>krok</code> do sprawdzania poprawności numeru</h5> <p>The <code>min</code>, <code>max</code> i <code>krok</code> atrybuty umożliwiają nam <strong>umieść ograniczenia w polach wprowadzania liczb</strong>. Mogą być używane razem z <code>zasięg</code>, <code>numer</code>, <code>data</code>, <code>miesiąc</code>, <code>tydzień</code>, <code>datetime</code>, <code>datetime-local</code>, i <code>czas</code> typy wejść.</p> <p>The <code>min</code> i <code>max</code> atrybuty zapewniają świetny sposób na łatwe <strong>wykluczyć nieuzasadnione dane</strong>. Na przykład poniższy przykład zmusza użytkowników do przedstawienia wieku od 18 do 120 lat.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Twój wiek:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Gdy algorytm sprawdzania ograniczenia wpada na dane wejściowe użytkownika mniejsze niż <code>min</code>, lub większy niż <code>max</code> wartość uniemożliwia dotarcie do zaplecza i zwraca komunikat o błędzie.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>krok</code> atrybut <strong>określa interwał liczbowy</strong> między prawnymi wartościami liczbowego pola wprowadzania. Na przykład, jeśli chcemy, aby użytkownicy wybierali tylko z lat przestępnych, możemy dodać <code>step = "4"</code> przypisać pole. W poniższym przykładzie użyłem <code>numer</code> typ wejścia, ponieważ nie ma <code>type = "year"</code> w HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Twój ulubiony rok przestępny:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Dzięki wcześniej ustalonym ograniczeniom użytkownicy mogą wybierać tylko z lat przestępnych między 1972 a 2016 rokiem, jeśli używają małej strzałki w górę, która jest dołączona do <code>numer</code> typ wejścia. Mogą również wpisać wartość ręcznie w polu wejściowym, ale w przypadku, gdy nie spełnia ona ograniczeń, przeglądarka zwróci komunikat o błędzie.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maksymalna długość</code> do sprawdzania długości tekstu</h5> <p>The <code>maksymalna długość</code> atrybut umożliwia <strong>ustaw maksymalną długość znaku</strong> dla pól tekstowych. Może być używany razem z <code>tekst</code>, <code>Szukaj</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> i <code>hasło</code> typy danych wejściowych i <code><textarea></code> Tag HTML.</p> <p>The <code>maksymalna długość</code> atrybut może być doskonałym rozwiązaniem dla pól z numerami telefonów, które nie mogą mieć więcej niż określoną liczbę znaków, lub dla formularzy kontaktowych, w których nie chcemy, aby użytkownicy pisali więcej niż określoną długość.</p> <p>Fragment kodu poniżej pokazuje przykład dla tego ostatniego, ogranicza wiadomości użytkownika do 500 znaków. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Wiadomość (maksymalnie 500 znaków):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The maksymalna długość atrybut nie zwraca komunikatu o błędzie, ale przeglądarka po prostu nie pozwala użytkownikom wpisywać więcej niż podany numer znaku. Dlatego tak ważne jest informować użytkowników o ograniczeniu, w przeciwnym razie nie zrozumieją, dlaczego nie mogą kontynuować pisania.

 
 * Twoje hasło: