Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Sprawdzanie poprawności danych

Na wstępie należy zaznaczyć, że nic nie może zwolnić programisty od sprawdzenia poprawności danych odbieranych przez PHP na serwerze, jednak im mniej błędów na etapie wypełniania formularza, tym lepiej.
Standard HTML5 wprowadza wiele narzędzi służących do sprawdzenia poprawności wprodadzanych danych, Dobrym przykładem są pola poznane na poprzednich zajęciach. Zastosowanie znajdą również atrybuty maxlength, max, min. Bardzo przydatnym narzędziem w "walce" o dobrze wypełniony formularz jest z pewnością atrybut required.
Dzisiaj zajmiemy się innym przydatnym atrybutem - pattern, który pozwala na określenie wzorca, wg którego użytkownik będzie musiał wypełnić dane pole. Wzorzec definiujemy za pomocą wyrażeń regularnych, więc niezbędne będzie poznanie jak stosuje się je w języku JavaScript.

Atrybut pattern, określanie wyrażeń regularnych

Atrybut pattern służy do określania wyrażenia regularnego według którego ma być sprawdzana poprawność danych wprowadzonych w polu input formularza. Atrybut pattern ma zastosowanie do elementów typu text, search, tel, url oraz email.

Wyrażenia regularne stanowią doskonały sposób na badanie i modyfikowanie tekstu. Dzięki swej olbrzymiej elastyczności pozwalają w łatwy sposób pobierać pasujące fragmenty tekstu. A czym są wzorce w praktyce? Powiedzmy, że mamy kod pocztowy. Kod taki można opisać w następujący sposób: na początku są 2 dowolne cyfry, potem znak myślnika, po czym występują trzy dowolne cyfry (np. 02-380). Powyższy opis kodu pocztowego to właśnie wzorzec.

Każdy wzorzec składa się z metaznaków, czyli specjalnych znaków, które opisują jak mają wyglądać wyszukiwane fragmenty tekstu. Przykładowo wzorzec składający się z meta znaków p.p. będzie pasował do słowa "popo", ale równie dobrze będzie pasował do słowa "papi". Poniższa tabela opisuje metaznaki.

Metaznak Znaczenie Przykład wyrażenia Ciągi znaków zgodne z wyrażeniem Ciągi niezgodne
^początek wzorca^zazapałka, zadra, zapłon, zarazekkazanie, poza, bazar
$koniec wzorca^.arka$barka, warkaparkan
.dowolny pojedynczy znak.an.apanda, Wanda, panna, kaniarana, konia
[...]dowolny z wymienionych znaków; możemy podawać kolejne znaki lub wpisywać zakres - na przykład [a-z] oznacza wszystkie małe litery. Wymieniając specjale znaki z końca tej tabeli nie musimy poprzedzać znakiem \ [a-z]an[nd]apana, panda Wanda
[^...]dowolny z niewymienionych znakówkre[^st]krew, kremkres, kret
|dowolny z rozdzielonych znakiem ciągów[nz]a|pod|przedna, za, pod, przedprzedtem
(...)jak w matematyce - do ogólnego ciągu bierzemy wynik tego co w nawiasach g(ż|rz)eg(ż|rz)(u|ó)łkagżegżółka, gżegrzółka, gżegrzułka, grzegrzułkagżegżołka
?żaden lub jeden poprzedzający znak lub element; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...)ro?uterrouter, ruterrutery
+jeden lub więcej poprzedzających znaków lub elementów; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...)[0-9]+[abc]10a, 1b, 003c, 42334ba, b, c, z, 14, 03, 12d, 1231z
*żaden lub kilka poprzedzających znaków lub elementów; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...)[0-9]*[abc]10a, 1b, 003c, 42334b, a, bk, 2335
{4}dokładnie 4 poprzedzające znaki lub elementy[0-9]{4}8765, 8273, 263512345, 234, 2123456
{4,}4 lub więcej poprzedzających znaków lub elementów[ah]{4,}haha, haaaaahaha, ahaaahaa, ha, hehe, aha
{2,4}od 2 do 4 poprzedzających znaków lub elementówp.{2,4}apiana, pola, polanapsa, poranna
\.znak kropki[0-9]{,3}\.[0-9]{,3}\.[0-9]{,3}128.0.0.2128-0-0-2
\*znak *\*.+*nicnic*, nic
\/znak /^\/\/$// 
\?znak ?^.+\?$Czy to jest kot?Czy to jest kot
\:znak :^.+\:$Oto one::nic
\.znak .\.+...... 
\^znak ^.*\^To jest ^To jest &
\+znak +[0-9]+\+[0-9]+928374+2983223873-32787 238738278
\\znak \c\:\\c:\ 
\=znak =[0-9]+\+[0-9]+\=[0-9]+11+12=2311+12+23
\|znak |x \|\| yx || y 
Tabela 2_6_6_1. Metaznaki służące do tworzenia wyrażeń regularnych
Sekwencja Znaczenie
\d dowolna cyfra: [0-9]
\D dowolny znak nie będący cyfrą: [^0-9]
\w dowolna cyfra, litera (mała lub duża) lub znak podkreślenia: [0-9a-zA-Z_]
\W dowolna znak nie będący cyfrą, literą (małą lub dużą) lub znakiem podkreślenia: [^0-9a-zA-Z_]
\s dowolny biały znak: [ \t\r\n\v\f]
\S dowolny nie-biały znak: [^ \t\r\n\v\f]
Białe znaki: \t - znak tabulacji poziomej (kod 0x09); \r - znak powrotu karetki (kod 0x0D); \n - znak nowej linii (kod 0x0A); \v - znak tabulacji pionowej (kod 0x0B); \f - znak wysunięcia strony (kod 0x0C).
Tabela 2_6_6_2. Sekwencje backslash_litera zastępujące niektóre z pokazanych w poprzedniej tabeli metaznaków

Ćwiczenie 2_6_6_1

Wykonaj stronę na której znajdzie się formularz wysyłajacy kod pocztowy. Zastosuj pole typu text, wprowadź zabezpieczenia przed wprowadzeniem niepoprawnych danych. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <input type="text" name="kod_pocztowy_1" value="" required="required" 
  pattern="^[0-9]{2}-[0-9]{3}$" /> Kod pocztowy 1<br /><br />
  <input type="text" name="kod_pocztowy_2" value="" required="required" 
  pattern="^\d{2}-\d{3}$" /> Kod pocztowy 2<br /><br />
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

  • Mamy dwa pola typu text ponieważ w różny sposób sformułowano wyrażenie regularne.
  • Wzorzec [0-9]{2}-[0-9]{3} utworzono tylko w oparciu o tabelę 2_6_6_1, natomiast do tworzenia wzorca \d{2}-\d{3} zastosowano dodatkowo sekwencje zdefiniowane w tabeli 2_6_6_2.
  • Zwróć uwagę, że nie można wysłać formularza z pustym polem, zapobiega temu required="required".

Praca domowa

Wykonaj stronę z formularzem, w którym wprowadzisz kontrolę poprawności wprowadzanych danych, poprzez zastosowanie atrybutów maxlength, max, min oraz required.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.