Witaj, Gościu O nas | Kontakt | Mapa
Wortal Forum PHPEdia.pl Planeta Kubek IRC Przetestuj się!

Weryfikacja formularzy przy użyciu JavaScriptu

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.

Informacje na podobny temat:
Wasze opinie
Wszystkie opinie użytkowników: (3)
Opis obiektów w JS trochę spłycony
Wtorek 11 Styczeń 2011 10:51:43 pm - yarpo <jar.patryk_at_gmail.com>

Cześć, wydaje mi się, że trochę spłycony opis tworzenia obiektów :)

Sam ostatnio zainteresowałem się tą sprawą, jakby ktoś chciał przeczytać to zapraszam:
http://www.yarpo.pl/2011/01/11/tworzenie-obiektow-w-js/

BTW.
// metoda whoRules()
function whoRules()

po co komentarz? Co on dodał do kodu? Komentarze - dobre, bywają przydatne. Komentarze złe, są złe.

obiekty i obiekty
Sobota 13 Maj 2006 3:18:15 pm - ghostrider

Temam walidacji arcyażny, poruszać należy, metoda zaprezętowana w artykule też ujdzie, ale do obiektow i programowania obiektowego w JS autor ma jeszce daleko. Prezętowany sposób kodowania jest chyba najgorszym jaki widziałem. Zpareztętowanie poprawnego rozwiazania to materiał na kolejny artykuł. Wspomne tylko 'prototype'
FormValidator = function (arg1, arg2) {
// konstruktor
}
FormValidator.prototype.IsChecked = functoin (obj ) {
// kod sprawdzajacy checkboxa
}
itd ....
Warto też zwrócić uwagę na JSON-a ( JavaScript Object Notation ) i 'przestrzenie nazw', które pozwalają uniknąć kolizji nazw, a są balnalne w implementacji w JS.
W prę\ezętowanych artykułach sugeruje postawić na jakość, nie ilość. Ktoś powinien sprawdzać je pod kątem merytorycznym. W końcu czytają je różni ludzie, często niedoświadczeni, a "czego Jaś się nie nauczy, tego Jan nie będzie umiał".


Weryfikacja formularzy przy użyciu JavaScriptu
Czwartek 20 Kwiecień 2006 10:28:57 pm - temat <tematu_at_wp.pl>

Można także weryfikować poszczególne pola.

<input type="text" name="'.$nazwa.'" onkeyup="if(!(/^[\d\w]{2,8}$/gi).test(this.value)) { '.$nazwa.'_error.style.display='block'} else { '.$nazwa.'_error.style.display='none'}" />

<span id="'.$nazwa.'Info">Źle Źle Źle !!!</span>


<textarea name="'.$nazwa.'" cols="33" rows="10" onkeyup="'.$nazwa.'Info.innerText=\'znakow \'+this.value.length+\' z '.$maxZnakow.'\';if(this.value.length>'.$maxZnakow.'){ this.value=this.value.substring(0,'.$maxZnakow.'); }"></textarea>
<span id="'.$nazwa.'Info"></span>

Mentax.pl    NQ.pl- serwery z dodatkiem świętego spokoju...   
O nas | Kontakt | Mapa serwisu
Copyright (c) 2003-2022 php.pl    Wszystkie prawa zastrzeżone    Powered by eZ publish Content Management System eZ publish Content Management System