Każdy programista WWW zna to uczucie: zbudowałeś formularz i jęczysz, gdy zdajesz sobie sprawę, że teraz musisz sprawdzić poprawność każdego pola.
Na szczęście sprawdzanie poprawności formularza nie musi być bolesne. Wyrażeń regularnych można używać do obsługi wielu typowych potrzeb walidacji.
Co to są wyrażenia regularne?
Wyrażenia regularne opisują wzorce, które dopasowują kombinacje znaków w ciągach. Możesz ich używać do reprezentowania pojęć takich jak „tylko liczby” lub „dokładnie pięć wielkich liter”.
Wyrażenia regularne (zwane również regex) to potężne narzędzia. Mają wiele zastosowań, w tym zaawansowane wyszukiwanie, wyszukiwanie i zamienianie oraz operacje walidacji na ciągach. Jednym ze znanych zastosowań wyrażeń regularnych jest polecenie grep w Linuksie.
Dlaczego warto używać wyrażeń regularnych do walidacji?
Jest wiele sposoby sprawdzania poprawności danych wejściowych, ale wyrażenia regularne są proste, szybkie i wygodne w użyciu, jeśli rozumiesz, jak to zrobić.
JavaScript ma natywną obsługę wyrażeń regularnych. Oznacza to, że używanie ich do walidacji, w przeciwieństwie do zewnętrznej biblioteki, pomaga utrzymać jak najmniejszy rozmiar aplikacji sieci Web.
Wyrażenia regularne umożliwiają również walidację wielu typów danych wejściowych formularza.
Podstawy wyrażeń regularnych
Wyrażenia regularne składają się z symboli opisujących wzorce utworzone przez znaki w ciągu. W JavaScript możesz utworzyć literał wyrażenia regularnego, pisząc go między dwoma ukośnikami. Najprostsza forma wyrażenia regularnego wygląda tak:
/abc/Powyższe wyrażenie regularne dopasuje kolejno każdy ciąg, który zawiera znaki „a”, „b” i „c”. Ciąg „abc” będzie pasował do tego wyrażenia regularnego, a także ciąg taki jak „abcdef”.
Bardziej zaawansowane wzorce można opisywać, używając znaków specjalnych w wyrażeniach regularnych. Znaki specjalne nie reprezentują znaku dosłownego, ale sprawiają, że wyrażenie regularne jest bardziej wyraziste.
Możesz ich użyć, aby określić, że część wzorca powinna powtórzyć się określoną liczbę razy, lub wskazać, że część wzorca jest opcjonalna.
Przykładem znaku specjalnego jest „*”. Znak "*" modyfikuje pojedynczy znak lub grupę znaków, które występują przed nim. Deklaruje, że te znaki mogą być nieobecne lub mogą się powtarzać dowolną liczbę razy z rzędu. Na przykład:
/abc*/
Dopasuje „ab”, po którym następuje dowolna liczba znaków „c”. Ciąg "ab" jest poprawnym przykładem tego wzorca, ponieważ znak "c" jest opcjonalny. Ciągi „abc” i „abccccc” są równie ważne, ponieważ „*” oznacza, że „c” może się powtórzyć dowolną liczbę razy.
Pełna składnia wyrażeń regularnych wykorzystuje kilka dodatkowych znaków wzorca do opisania możliwych dopasowań. Możesz dowiedzieć się więcej od Regex 101 na regexlearn.com interaktywny kurs. Przewodnik JavaScript w MDN jest również bardzo przydatny.
Walidacja formularzy za pomocą wyrażeń regularnych
Możesz użyć wyrażenia regularnego do sprawdzania poprawności danych wejściowych w formularzu na kilka sposobów. Pierwszym sposobem jest użycie JavaScript. Obejmuje kilka kroków:
- Pobierz wartość danych wejściowych formularza.
- Sprawdź, czy wartość danych wejściowych jest zgodna z wyrażeniem regularnym.
- Jeśli tak się nie stanie, pokaż użytkownikowi witryny, że wartość pola wejściowego jest nieprawidłowa.
Oto krótki przykład. Mając takie pole wejściowe:
<wejściowy symbol zastępczy="Pole wejściowe">Możesz napisać funkcję, która będzie ją walidować w ten sposób:
funkcjonowaćuprawomocnić() {
wynajmować wartość = dokument.querySelector("wejście").wartość;
stały wyrażenie regularne = /^.{3,7}$/;
zwrócić regEx.test (wartość);
}Innym sposobem jest skorzystanie z możliwości sprawdzania poprawności formularzy HTML przeglądarki. Jak? Określając wyrażenie regularne jako wartość atrybutu wzorca znacznika wejściowego HTML.
Atrybut wzorca jest prawidłowy tylko dla następujących typów danych wejściowych: tekst, tel, e-mail, adres URL, hasło i wyszukiwanie.
Oto przykład z użyciem atrybutu wzorca:
<Formularz>
<wejściowy symbol zastępczy="Pole wejściowe" wymagany wzór="/^.{3,7}$/">
<przycisk>Składać</button>
</form>Jeśli prześlesz formularz, a wartość wejściowa nie pasuje do całego wyrażenia regularnego, formularz wyświetli domyślny błąd, który wygląda tak:
Jeśli wyrażenie regularne podane w atrybucie wzorca jest nieprawidłowe, przeglądarka zignoruje ten atrybut.
Wspólne wzorce wyrażeń regularnych do walidacji formularzy
Konieczność konstruowania i debugowania wyrażenia regularnego od zera może zająć trochę czasu. Oto kilka wyrażeń wyrażeń regularnych, których możesz użyć do sprawdzenia niektórych z najpopularniejszych typów danych formularzy.
Wyrażenie regularne do sprawdzania długości ciągu
Jednym z najczęstszych wymagań walidacji jest ograniczenie długości ciągu. Wyrażenie regularne, które dopasuje siedmioznakowy ciąg, to:
/^.{7}$/„.” to symbol zastępczy, który pasuje do dowolnego znaku, a „7” w nawiasach klamrowych określa limit długości ciągu. Gdyby ciąg musiał mieścić się w pewnym zakresie długości, na przykład od trzech do siedmiu, wyrażenie regularne wyglądałoby tak:
/^.{3,7}$/A jeśli ciąg musiałby mieć co najmniej trzy znaki bez górnego limitu, wyglądałby tak:
/^.{3,}$/Jest mało prawdopodobne, że długość będzie jedynym wymogiem sprawdzania poprawności danych wejściowych formularza. Ale często będziesz go używać jako części bardziej skomplikowanego wyrażenia regularnego zawierającego inne warunki.
Wyrażenie regularne do sprawdzania poprawności pól zawierających tylko litery
Niektóre dane wejściowe formularza muszą zawierać tylko litery, aby były prawidłowe. Następujące wyrażenie regularne będzie pasować tylko do takich ciągów:
/^[a-zA-Z]+$/To wyrażenie regularne określa zestaw znaków składający się z całego alfabetu. Znak specjalny „+” oznacza, że poprzedzający znak musi wystąpić co najmniej raz, bez górnego limitu.
Wyrażenie regularne do sprawdzania poprawności pól zawierających tylko liczby
Następujące wyrażenie regularne dopasuje tylko ciągi składające się wyłącznie z cyfr:
/^\d+$/Powyższe wyrażenie regularne jest zasadniczo takie samo jak poprzednie. Jedyna różnica polega na tym, że używa znaku specjalnego "\d" do reprezentowania zakresu cyfr, zamiast ich zapisywania.
Wyrażenie regularne do sprawdzania poprawności pól alfanumerycznych
Wyrażenia regularne ułatwiają również walidację pól alfanumerycznych. Oto wyrażenie regularne, które dopasuje tylko ciągi złożone z liter i cyfr:
/^[a-zA-Z\d]+$/Niektóre pola są alfanumeryczne, ale dopuszczają kilka innych znaków, takich jak łączniki i podkreślenia. Jednym z przykładów takich pól jest nazwa użytkownika. Poniżej znajduje się wyrażenie regularne, które dopasowuje ciąg składający się z liter, cyfr, podkreśleń i łączników:
/^(\w|-)+$/Znak specjalny "\w" pasuje do całej klasy znaków, tak jak robi to "\d". Reprezentuje zakres alfabetu, cyfr i znaku podkreślenia ("_").
Wyrażenie regularne do weryfikacji numerów telefonów
Numer telefonu może być skomplikowanym polem do weryfikacji, ponieważ różne kraje używają różnych formatów. Bardzo ogólnym podejściem jest upewnienie się, że ciąg zawiera tylko cyfry i że jego długość mieści się w określonym zakresie:
/^\d{9,15}$/Bardziej wyrafinowane podejście może wyglądać jak to zaczerpnięte z MDN, który weryfikuje numery telefonów w formacie ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Wyrażenie regularne do sprawdzania dat
Podobnie jak numery telefonów, daty mogą mieć wiele formatów. Daty są zwykle mniej skomplikowane do zweryfikowania niż numery telefonów. Czemu? Daty nie zawierają znaków innych niż cyfry i myślniki.
Oto przykład, który sprawdzi poprawność dat w formacie „DD-MM-RRRR”.
/^\d{2}-\d{2}-\d{4}$/Weryfikacja za pomocą Regex jest łatwa
Wyrażenia regularne opisują wzorce, które dopasowują kombinacje znaków w ciągach. Mają różne aplikacje, takie jak sprawdzanie poprawności danych wejściowych użytkownika z formularzy HTML.
Możesz użyć wyrażenia regularnego do walidacji za pomocą JavaScript lub za pomocą atrybutu wzorca HTML. Tworzenie wyrażeń regularnych w celu walidacji typowych typów danych wejściowych formularzy, takich jak daty i nazwy użytkowników, jest łatwe.
