Omówienie walidacji formularzy HTML
Formularze internetowe są często najczęściej używaną i niezbędną częścią aplikacji internetowych. Sprawdzanie poprawności formularza to proces sprawdzania poprawności danych wprowadzonych przez użytkownika zgodnie ze wstępnie zdefiniowanymi regułami. Sprawdzanie poprawności formularza może odbywać się po stronie klienta lub po stronie serwera. Sprawdzanie poprawności formularza HTML to forma sprawdzania poprawności po stronie klienta, w której sprawdzanie poprawności danych zostanie przeprowadzone przed wysłaniem danych na serwer. Sprawdzanie poprawności formularza HTML jest znaczące i przydatne, ponieważ poprawia interfejs użytkownika po stronie klienta i wydajność aplikacji internetowej.
Walidacja formularza HTML
Istnieją głównie dwa sposoby sprawdzania poprawności formularza HTML,
- Korzystanie z wbudowanej funkcjonalności HTML5
- Za pomocą JavaScript
1. Korzystanie z wbudowanej funkcjonalności HTML5
HTML5 zapewnia tę funkcję sprawdzania poprawności formularza bez użycia JavaScript. Elementy formularza będą miały dodane atrybuty sprawdzania poprawności, które umożliwią nam automatyczne sprawdzenie poprawności formularza. Atrybuty sprawdzania poprawności pozwalają nam określać różnego rodzaju reguły w naszych elementach formularza. Pozwalają nam ustawić długość danych, ograniczyć wartości danych itp.
Zobaczmy jeden prosty przykład sprawdzania poprawności formularza HTML za pomocą wbudowanych elementów sprawdzania poprawności formularza, a następnie przejdziemy dalej do sprawdzania poprawności formularza HTML za pomocą JavaScript.
Przykład
Sprawdzanie poprawności formularza za pomocą atrybutu sprawdzania poprawności HTML5 - W tym przykładzie użyjemy wymaganego tagu sprawdzania poprawności formularza, który spowoduje, że dane w tym polu będą obowiązkowe, w przeciwnym razie formularz nie zostanie przesłany. Poniżej znajduje się fragment kodu tego samego wraz ze stylem formularza internetowego.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Mamy więc bardzo prosty formularz internetowy wraz z tylko jednym polem danych wejściowych jako „Nazwa”. Pamiętaj, że użyliśmy wymaganego słowa kluczowego w elemencie tagu wejściowego.
Wyjście :
Spróbujmy przesłać formularz bez wprowadzania wartości w polu nazwy. Po przesłaniu otrzymasz komunikat o błędzie „Wypełnij to pole”, a formularz nie zostanie przesłany.
Dane wyjściowe z pustymi danymi
Widać więc, że komunikat o błędzie nie jest dodawany przez nas i jest dostarczany przez sam HTML.
Podobnie jak wymagany atrybut dostarczony przez HTML, istnieją różne znaczniki formularzy, które są dostępne do użycia. Poniżej znajduje się lista niektórych tagów sprawdzania poprawności formularzy,
- minlength: Używany do ustawienia wymaganej minimalnej długości elementu
- maxlength: Używany do ustawienia wymaganej maksymalnej długości elementu
- wzorzec: służy do definiowania wyrażenia regularnego
2. Za pomocą JavaScript
JavaScript jest szeroko stosowany do sprawdzania poprawności formularzy HTML, ponieważ zapewnia więcej sposobów dostosowywania i ustawiania reguł sprawdzania poprawności, a także niektóre tagi podane w HTML5 nie są obsługiwane w starszych wersjach programu Internet Explorer. JavaScript jest używany przez długi czas do sprawdzania poprawności formularza.
W sprawdzaniu poprawności formularzy JavaScript definiujemy funkcje sprawdzania poprawności danych przed przesłaniem ich na serwer. Możemy zaimplementować dowolną logikę wymaganą do osiągnięcia reguł sprawdzania poprawności. JavaScript jest w ten sposób bardziej elastyczny, ponieważ nie ma ograniczeń w definiowaniu reguł. Konieczna jest jednak znajomość JavaScript, aby to zaimplementować w porównaniu do sprawdzania poprawności formularza za pomocą wbudowanych tagów.
Zobaczmy przykład sprawdzania poprawności formularza za pomocą JavaScript. Zaimplementujemy ten sam przykład formularza z tylko jednym wejściem jako elementem nazwy.
Przykład:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Z poprzedniego przykładu usunęliśmy wymagany znacznik z elementu formularza „name”. Zamiast tego dodaliśmy jeden tag onsubmit w elemencie formularza. Jak wspomniano wcześniej, będziemy pisać funkcję sprawdzania poprawności, dla której dodano tag.
Napisaliśmy funkcję o nazwie validateForm (), która wykona sprawdzenie poprawności. Wdrażamy tę samą zasadę sprawdzania, czy dane wprowadzone w polu nazwy są puste, czy nie. Logika, aby to sprawdzić, następuje po kliknięciu przycisku przesyłania, funkcja zostanie wywołana, a wprowadzona wartość zostanie sprawdzona, czy jest pusta, czy pusta. Funkcja zwróci true, jeśli dane nie są puste lub puste, ale jeśli dane są puste lub puste, komunikat o błędzie jest wyświetlany użytkownikowi.
Wynik
Jeśli spróbujemy przesłać formularz bez wprowadzania danych, powinniśmy wyświetlić komunikat o błędzie na ekranie. Jak widać z przykładu, zaprojektowaliśmy komunikat o błędzie w taki sam sposób, jak to możliwe.
Dane wyjściowe z pustymi danymi
Wniosek - sprawdzanie poprawności formularza HTML
Widzieliśmy więc bardzo prosty przykład sprawdzania poprawności formularza po stronie klienta. Głównie istnieją dwa sposoby sprawdzania poprawności formularza HTML. Pierwszym z nich jest korzystanie z wbudowanej funkcjonalności dostarczonej w HTML5, a drugą z użyciem JavaScript. Korzystając z pierwszej metody, nie musimy pisać dodatkowego kodu.
Polecane artykuły
Jest to przewodnik po sprawdzaniu poprawności formularzy HTML. Tutaj omawiamy przegląd i dwa sposoby sprawdzania poprawności formularzy HTML, za pomocą których można je wykonać. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -
- Wydarzenia HTML
- Wersje HTML
- Elementy HTML5
- Zastosowania HTML