Walidacja danych
Walidacja danych wejściowych w formularzach jest niezbędna do zapewnienia poprawności i bezpieczeństwa przesyłanych informacji. Walidacja może być wykonana po stronie klienta w przeglądarce za pomocą HTML5 i JavaScript, lub po stronie serwera bezpośrednio w kodzie aplikacji.
Walidacja HTML5
HTML5 oferuje wbudowane atrybuty do walidacji danych wejściowych. Za pomocą HTML możemy przeprowadzić dość prostą walidację formularzy typu maksymalna długość wprowadzanych znaków czy obowiązkowe pole.
Przykłady atrybutów walidacji HTML:
required— Oznacza, że pole musi być wypełnione przed przesłaniem formularza.pattern— Definiuje wyrażenie regularne, które musi być spełnione przez wartość pola.minimax— Określa minimalną i maksymalną wartość pola numerycznego.maxlength— Określa maksymalną długość tekstu w polu tekstowym.
Przykład walidacji danych wejściowych za pomocą HTML5:
<form action="/submit" method="post">
<label for="username">Nazwa użytkownika (min. 5 znaków):</label>
<input type="text" id="username" name="username" minlength="5" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Hasło (min. 8 znaków, co najmniej jedna cyfra):</label>
<input type="password" id="password" name="password" pattern="^(?=.*\d)(?=.*[a-zA-Z]).{8,}$" required>
<button type="submit">Wyślij</button>
</form>Walidacja za pomocą JavaScript
JavaScript umożliwia wykonywanie bardziej zaawansowanej walidacji oraz wyświetlanie niestandardowych komunikatów błędów. Obecnie używanie JavaScript jest standardem projektowania walidacji w przypadku formularzy. Więcej na ten temat możesz dowiedzieć się w obsługa formularzy i walidacja danych.
Przykład walidacji formularza za pomocą JavaScript:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<script>
function validateForm() {
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if (username.length < 5) {
alert("Nazwa użytkownika musi mieć co najmniej 5 znaków.");
return false;
}
if (!email.includes("@")) {
alert("Wprowadź poprawny adres e-mail.");
return false;
}
var passwordRegex = /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/;
if (!passwordRegex.test(password)) {
alert("Hasło musi zawierać co najmniej 8 znaków, w tym co najmniej jedną cyfrę.");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="/submit" method="post" onsubmit="return validateForm()">
<label for="username">Nazwa użytkownika (min. 5 znaków):</label>
<input type="<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Hasło (min. 8 znaków, co najmniej jedna cyfra):</label>
<input type="password" id="password" name="password">
<button type="submit">Wyślij</button>
</form>
</body>
</html>W powyższym przykładzie, walidacja danych wejściowych jest realizowana za pomocą funkcji validateForm(), która jest wywoływana podczas próby przesłania formularza (onsubmit). Funkcja sprawdza poprawność wartości pól username, email i password, a jeśli dane są niepoprawne, wyświetla odpowiedni komunikat błędu i zwraca wartość false, co blokuje przesłanie formularza.
Warto zapamiętać
Należy zauważyć, że obecnie walidacja po stronie klienta nie jest wystarczająca do zapewnienia bezpieczeństwa danych. Z tego powodu warto również przeprowadzać walidację po stronie serwera, aby upewnić się, że otrzymane dane są poprawne i bezpieczne przed przetwarzaniem.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
