HTML – atrybut pattern

Tworząc formularz HTML możemy chcieć wyznaczyć pewne ramy, dotyczące wprowadzanych przez użytkownika danych. Posłuży nam do tego atrybut znacznika “input” o nazwie “pattern”, oznaczającej w naszym języku wzór.

Zapoznanie z taką podstawową formą walidacji danych zaczniemy od najprostszych przykładów, a następnie przejdziemy do nieco bardziej skomplikowanych.

Nick

Tworząc konta na różnych portalach, lub w grach sieciowych niemal zawsze jesteśmy zmuszeni do wymyślenia naszego nickname’u, nie zawsze jednak pasuje on do wzorca narzuconego przez administratorów witryny. Spróbujmy więc stworzyć nieskomplikowany wzór. Niech nazwy naszych użytkowników zaczynają się od wielkiej litery (tylko jednej, tak jak imiona) i mają nie mniej niż 4 i nie więcej niż 15 znaków długości. Finalny efekt wygląda tak:

Jak można się domyślić w pierwszym nawiasie kwadratowym określiliśmy typ wprowadzanych znaków, w tym przypadku wielkie litery od A do Z i ich liczbę w nawiasie klamerkowym. Następny nawias kwadratowy zawiera informacje na temat następnych znaków, które zostaną wprowadzone, będą to cyfry lub małe litery. Na końcu, poza nawiasem kwadratowym wyznaczyliśmy minimalną i maksymalną liczbę znaków, która może zostać zatwierdzona.

Hasło

Jeśli mamy już nick, pora na hasło do naszego konta. Będzie się ono musiało składać z przynajmniej jednej dużej i jednej małej litery oraz jednej cyfry, nie ważne w jakiej kolejności, a jego długość będzie wynosiła od 6 do 15 znaków.

Konstrukcja “(?=.*[zakres])” oznacza, że znak z podanego zakresu musi wystąpić przynajmniej raz, aby hasło zostało przyjęte. Na końcu ponownie podaliśmy minimalną i maksymalną długość hasła.

Kod pocztowy

W tym przypadku sprawa również jest prosta. W Polsce kod pocztowy ma następujący format: dwie cyfry, pauza, trzy cyfry, czyli np. 12-345.

Konstrukcja jest już znajoma, najpierw dwie cyfry, następnie wymuszamy znakiem ‘\’ użycie ‘-‘, a potem znowu trzy cyfry.

Data

Nieco bardziej skomplikowaną sprawą może być np. podanie daty. Niektórzy mogą przytomnie zauważyć, że nie ma to sensu, ponieważ możemy nadać wartość “date” atrybutowi “type” i mielibyśmy problem z głowy, jednak nie zaszkodzi nam wysilić się “dla sportu”. Datę będziemy chcieli otrzymać w formacie dd.mm.rrrr.

W przypadku dnia musimy rozważyć cztery opcje, mianowicie numery dni zaczynające się od 0,1,2 i 3. Owe opcje rozdzielone są znakiem ‘|’, który oznacza alternatywę. Po wprowadzeniu pierwszej cyfry (0,1,2 lub 3) będziemy musieli podać kolejną cyfrę z zakresu, czyli od 0-9 dla wszystkich oprócz trójki, ponieważ nie ma dnia np. 35. Następnie wymuszamy wpisanie kropki i analogicznie postępujemy z miesiącem. Przy wpisywaniu roku jedyną restrykcją są cyfry i ich liczba, czyli cztery.

Adres IPv4

W tym przypadku zastosujemy coś w rodzaju pętli.

Zaczynając od początku: jeśli jest to początek wprowadzanych danych, idziemy dalej, jeśli nie, wymuszamy wpisanie kropki. Następnie mamy cztery opcje, ponieważ podzieliliśmy adres IP na cztery części. Ćwiartki mogą mieć następujące postacie:

  1. od 250 do 255
  2. od 200 do 249 (‘\d’ to oznaczenie liczby decymalnej, jest odpowiednikiem zakresu 0-9)
  3. od 100 do 199
  4. od 0 do 99

Pętla powtórzy się cztery razy, dzięki czemu otrzymamy pełen adres.

Zachęcam do samodzielnego testowania i poniżej zamieszczam link do kodu.

https://pastebin.com/dDFh2pAB

Dodaj komentarz