Przykładowa weryfikacja formularzy / Weryfikacja formularzy przy użyciu JavaScriptu / Po stronie przeglądarki / Artykuły / Wortal / Home

Przykładowa weryfikacja formularzy

Aby dowiedzieć się, jak najczęściej działa weryfikacja formularzy, rozważ poniższy przykład:

<html>
<head>
<style>
body { font-family: Arial; }
</style>
<script language="JavaScript">
function validateForm()
{
	// sprawdza imie
	if (document.forms[0].elements[0].value == "")
	{
		alert ("Wprowadź imię!");
		return false;
	}

	// sprawdza dlugosc hasła
	if (document.forms[0].elements[1].value.length < 6)
	{
		alert ("Wprowadź hasło składające sie przynajmniej z 6 znaków!");
		return false;
	}

	// sprawdza adres email

	// sprawdza wiek
	if (isNaN(document.forms[0].elements[3].value))
	{
		alert ("Wprowadź prawidłowy wiek!");
		return false;
	}

	// sprawdza akres wieku
	if (parseInt(document.forms[0].elements[3].value) < 1 ||
parseInt(document.forms[0].elements[3].value) > 99)
	{
		alert ("Wprowadź wiek mieszczący się w zakresie 1-99!");
		return false;
	}

	return true;
}
</script>
</head>

<body>

<form action="someform.cgi" method="post" 
     onSubmit="return validateForm();">

Imię: 
<br>
<input type="text" name="imie" id="imie" />
<p>

Hasło:
<br />
<input type="password" name="haslo" id="haslo" />
<p>

Adres email: 
<br />
<input type="text" name="email" id="email" />
<p>

Wiek: 
<br />
<input type="text" name="wiek" id="wiek" />
<p>

<input type="submit" value="Wyślij!" />
</form>

</body>
</html>

Jest to prosty formularz z polami, w których użytkownik winien wpisać swoje imię, hasło, adres email i wiek. Zanim formularz jest wysłany, zdarzenie onSubmit wywołuje funkcję validateForm(), która sprawdza czy:

wpisano imię,
długość hasła jest większa lub równa 6 znaków,
adres email jest składniowo poprawny,
wiek jest wartością liczbową i znajduje się w zakresie 1-99.

Jeśli chociaż jeden z tych warunków nie będzie spełniony, funkcja pokaże wiadomość błędu i zwróci false, co z kolei zapobiegnie wysyłaniu formularza. Dopiero wtedy, gdy wszystkie warunki zostaną spełnione, funkcja zwróci true i pozwoli na dalsze wysyłanie danych. Tym sposobem, podstawowa weryfikacja po stronie klienta może zapobiec wysłaniu do bazy niepoprawnych danych.

Taka weryfikacja po stronie klienta jest dość popularnym rozwiązaniem podczas tworzenia aplikacji internetowych. Dobrze jest zaimplementować więcej pospolitych zadań dotyczących sprawdzania danych i umieścić je w uniwersalnych funkcjach, które mogą być wywoływane kiedy tylko twoje skrypty będą tego wymagały. Takie rozwiązanie pozwoli ci na zredukowanie czasu pisania aplikacji. Najlepszym sposobem na stworzenie czegoś takiego będzie stworzenie prostego obiektu weryfikującego formularze i dodanie do niego metod sprawdzających różne typy danych.

Kategorie

Spis treści

O autorze

Podobne Artykuły

Nowe artykuły

Weryfikacja formularzy przy użyciu JavaScriptu

Przykładowa weryfikacja formularzy