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

Weryfikacja formularzy przy użyciu JavaScriptu

Podsumowanie

Wprowadziliśmy podstawowe algorytmy weryfikacji. Jeśli to ci nie wystarcza, nietrudno jest dodać nowe algorytmy weryfikacji do klasy - po prostu pisz według wzoru wprowadzonego przeze mnie. Zostało tylko dopisać odpowiednie metody, które obsłużą błędy w przypadku, gdy weryfikacja zakończy się niepowodzeniem.

Pierwszą z nich będzie mała, prosta metoda - raiseError(), która pozwoli na łatwe dodanie czytelnej dla śmiertelnika wiadomości błędu. Jeśli uważnie śledziłeś definiowanie naszego obiektu, zauważyłeś na pewno, że metoda ta jest zwykle wywoływana gdy weryfikacja zwróci false. Argumentem metody jest wiadomość, która następnie dodawana jest do naszej tablicy błędów. Wróć do rozdziału z konstruktorem, jeśli chcesz się przyjrzeć inicjalizacji tejże tablicy.

// dodaje błąd do listy
function raiseError(msg)
{
	this.errorList[this.errorList.length] = msg;
}

Metoda numErrors() zwraca liczbę błędów dotychczas dodanych do listy(czyli po prostu wielkość tablicy errorList). Jeśłi wielkość listy jest równa lub przekracza 1, oznacza to, że podczas weryfikacji danych wystąpiły błędy:

// zwraca ilość błędów w tablicy
function numErrors()
{
	return this.errorList.length;
}

Funkcja numErrors() zwróci ilość błędów, ale nie wyświetli wiadomości związanych z błędami. Do tej operacji stworzymy specjalną metodę displayErrors(), która zwróci zawartość tablicy errorList w postaci szeregu okien dialogowych.

// wyświetla wszystkie błędy
// pętla przez wszystkie elementy tablicy wywołująca poszczególne okna dialogowe
function displayErrors()
{
	for (x=0; x<this.errorList.length; x++)
	{
		alert("Error: " + this.errorList[x]);
	}
}

Zdefiniowaliśmy już wszystkie funkcje weryfikacji. Na koniec należy "wspomnieć" o nich w konstruktorze, ażeby były one dostępne jako metody obiektu formValidator. Oto przepisany konstruktor:

// tworzy obiekt
function formValidator()
{
	// tablica do przechowywania wiadomości o błędach
	this.errorList = new Array;

	// metody obiektu
	this.isEmpty = isEmpty;	
	this.isNumber = isNumber;	
	this.isAlphabetic = isAlphabetic;	
	this.isAlphaNumeric = isAlphaNumeric;	
	this.isWithinRange = isWithinRange;	
	this.isEmailAddress = isEmailAddress;	
	this.isChecked = isChecked;	

	this.raiseError = raiseError;	
	this.numErrors = numErrors;	
	this.displayErrors = displayErrors;	
}

Tak wygląda ostateczna definicja obiektu:

// tworzy obiekt
function formValidator()
{
	// tablica do przechowywania wiadomości o błędach
	this.errorList = new Array;

	// metody obiektu
	this.isEmpty = isEmpty;	
	this.isNumber = isNumber;	
	this.isAlphabetic = isAlphabetic;	
	this.isAlphaNumeric = isAlphaNumeric;	
	this.isWithinRange = isWithinRange;	
	this.isEmailAddress = isEmailAddress;	
	this.isChecked = isChecked;	

	this.raiseError = raiseError;	
	this.numErrors = numErrors;	
	this.displayErrors = displayErrors;	
}

// sprawdza, czy podana wartość jest pusta, lub zawiera tylko białe znaki
function isEmpty(val)
{
	if (val.match(/^s+$/) || val == "")
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// sprawdza, czy podana wartosc jest liczbą
function isNumber(val)
{
	if (isNaN(val))
	{
		return false;
	}
	else
	{
		return true;
	}	
}

// sprawdza, czy wszystkie znaki są literami
function isAlphabetic(val)
{
	if (val.match(/^[a-zA-Z]+$/))
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// sprawdza, czy przesłane dane zawierają tylko litery i cyfry
function isAlphaNumeric(val)
{
	if (val.match(/^[a-zA-Z0-9]+$/))
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// sprawdza, czy podana wartość mieści się w zakresie określonym przez zmienne min i max
function isWithinRange(val, min, max)
{
	if (val >= min && val <= max)
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// sprawdza, czy użytkownik wprowadził poprawny adres email
function isEmailAddress(val)
{
	if (val.match(/^([a-zA-Z0-9])+
		([.a-zA-Z0-9_-])*@
		([a-zA-Z0-9_-])+
		(.[a-zA-Z0-9_-]+)+/))
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// sprawdza, czy pole jest zaznaczone
function isChecked(obj)
{
	if (obj.checked)
	{
		return true;
	}
	else
	{
		return false;
	}	
}

// wyświetla wszystkie błędy
// pętla przez wszystkie elementy tablicy wywołująca poszczególne okna dialogowe
function displayErrors()
{
	for (x=0; x<this.errorList.length; x++)
	{
		alert("Error: " + this.errorList[x]);
	}
}

// dodaje błąd do listy
function raiseError(msg)
{
	this.errorList[this.errorList.length] = msg;
}

// zwraca ilość błędów w tablicy
function numErrors()
{
	return this.errorList.length;
}
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