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

Testowanie

W tym rozdziale zaprzestaniemy definiowania obiektu - przejdźmy do faktycznego użycia klasy w celu przeprowadzenia weryfikacji. Napiszmy prosty formularz i trochę kodu JS, aby sprawdzić dane. Zauważ, że klasa stworzona w poprzednich rozdziałach przechowywana jest w pliku formValidator.js, który jest wczytywany na samym początku poniższego kodu.

<html>
<head>
<basefont face="Arial">
<script language="JavaScript" src="formValidator.js">
</script>
<script language="JavaScript">

// sprawdza dane z formularza
function checkForm()
{

	// instancja klasy
	fv = new formValidator();
	
	// weryfikacja
	// sprawdza, czy pole "imie" jest puste
	if (fv.isEmpty(document.forms[0].elements[0].value))
	{
		fv.raiseError("Wprowadź imię");
	}

	// sprawdza, czy pole "wiek" jest puste
	if (fv.isEmpty(document.forms[0].elements[1].value))
	{
		fv.raiseError("Wprowadź wiek");
	}

	// sprawdza, czy podany wiek miesci sie w zakresie poprawnosci
	if (!fv.isWithinRange(document.forms[0].elements[1].value, 
		1, 99))
	{
		fv.raiseError("Wiek musi mieć wartośc od 1 do 99");
	}

	// sprawdza, czy pole "email" jest puste
	if (fv.isEmpty(document.forms[0].elements[5].value))
	{
		fv.raiseError("Wprowadź adres email");
	}

	// sprawdza, czy adres email ma poprawny format
	if (!fv.isEmpty(document.forms[0].elements[5].value) &&
	!fv.isEmailAddress(document.forms[0].elements[5].value))
	{
		fv.raiseError("Wprowadź poprawny adres email");
	}

	// sprawdza pole "agree"
	if (!fv.isChecked(document.forms[0].elements[6]))
	{
	fv.raiseError("Potwierdź swoją zgodność z regulaminem strony");
	}

	// skończone

	// jeśli wystąpiły błędy - wyświetli, jeśli nie idzie dalej
	if (fv.numErrors() > 0)
	{
		fv.displayErrors();
		return false;
	}
	else
	{
		return true;
	}
	
}

</script>
</head>

<body>

<form action="action.cgi" method="POST" 
		onSubmit="return checkForm()">

<b>Imię:</b>
<br>
<input type="text" name="imie" size="15">

<p>

<b>Wiek:</b>
<br>
<input type="text" name="wiek" size="2" maxlength="2">

<p>

<b>Płeć:</b>
<br>
<input type="Radio" name="plec" value="m" checked>Mężczyzna
<input type="Radio" name="plec" value="f">Kobieta

<p>

<b>Ulubiony rodzaj kanapki:
<br>
<select name="stype">
<option value="1">Z cienką skórką
<option value="2">Z grubą skórką
<option value="3">Opiekana
</select>

<p>

<b>Adres email:
<br>
<input type="text" name="email" size="25">

<p>

<input type="Checkbox" name="agree">
Zgadzam się z regulaminem strony

<p>

<input type="Submit" name="submit" value="Zapisz">
</form>

</body>
</html>

W tym przypadku, podczas wysyłania formularza, obsługa zdarzenia onSubmit wywołuje funkcję checkForm(), która tworzy nowy obiekt formValidator. Po stworzeniu instancji klasy, wszystkie zdefiniowane wcześniej metody są dostępne z wnętrza obiektu i mogą być użyte do sprawdzenia wprowadzonych w formularzu danych.

Sprawdźmy, czy nasz przykład działa. Poniżej przedstawiłem rezultat niewypełnienia formularza:

* Błąd: Wprowadź imię 
* Błąd: Wprowadź wiek
* Błąd: Wiek musi mieć wartość od 1 do 99
* Błąd: Wprowadź adres email 
* Błąd: Potwierdź swoją zgodność z regulaminem strony

Tylko w przypadku, gdy wszystkie błędy zostały poprawione, i wszystkie testy poprawności udają się, funkcja checkForm() zwróci true i pozwoli na przesłanie danych do skryptu obsługującego formularz. W ten sposób, weryfikacja zapobiega zaśmiecaniu twojej bazy danych niepoprawnymi danymi.

Możesz oczywiście przeprowadzić weryfikacje bez tworzenia obiektu(jak pokazano w pierwszym rozdziale tego artykułu). Jednakże, projektanci zwykle przeprowadzają podobne testy podczas weryfikacji danych; zamiast pisania(i przepisywania) tego samego kodu dla każdej twojej aplikacji, dobrze jest napisać prostą, a zarazem uniwersalną bibliotekę funkcji(w postaci obiektu) i dołączać ten obiekt do twoich formularzy, jeśli zajdzie taka potrzeba.

Trzeba przyznać, że obiekt zdefiniowany przez na nadal jest prymitywny. Jeśli chcesz użyć tego kodu w poważnej aplikacji, powinieneś go zmodyfikować i/lub dodać nowe funkcje, surowiej weryfikujące dane. (W tym artykule ominięto je, aby uczynić kod bardziej czytelnym i łatwiejszym do wyjaśnienia.) Możesz także chcieć dodać nowe formy sprawdzania danych w zależności od twoich potrzeb i wymagań.

To już chyba wszystko na tą chwilę. W artykule tym poszerzyłeś(chyba :P) swoją znajomość obiektowości w JavaScripcie, tworząc coś bardzo przydatnego - obiekt weryfikujący formularz, który zapewnia sposób na obsługę sytuacji, kiedy to użytkownik wprowadzi jakieś niezadowalające cię dane.

Kategorie

Spis treści

O autorze

Podobne Artykuły

Nowe artykuły

Weryfikacja formularzy przy użyciu JavaScriptu

Testowanie