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

Weryfikacja formularzy przy użyciu JavaScriptu

Zaczynamy

Zacznijmy od definicji klasy:

// tworzymy obiekt
function formValidator()
{
	// cięcie ;)
}

Jak zaplanowaliśmy, błędy będą przechowywane w obiekcie, więc musimy stworzyć do tego celu tablicę:

// tworzymy obiekt
function formValidator()
{
	// tablica przechowująca komunikaty o błędach
	this.errorList = new Array;

	// cięcie ;)
}

Teraz możemy zacząć implementację funkcji sprawdzających.

Pierwsza z nich po prostu sprawdza, czy podana zmienna zawiera jakąś wartość:

// 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;
	}	
}

To proste, ale warte wyjaśnienia, bo wszystkie następne funkcje będą działały podobnie.

Metoda isEmpty() wywoływana jest z pojedynczym argumentem - wartością, mającą podlec testowaniu. Metoda używa funkcji match() obiektu String, aby sprawdzić czy wartość pasuje do wyrażenia regularnego. W tym wypadku wyrażenie regularne dopasowuje ciąg zawierający tylko białe znaki - taki ciąg nie zawiera przecież sensownych danych. Jeśli ciąg pasuje do wyrażenia, lub ciąg jest całkowicie pusty, funkcja zwraca true, jeśli nie(czyli w przypadku, kiedy podana wartość zawiera jakieś dane), funkcja zwraca false.

Przejdźmy do następnej interesującej funkcji:

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

W tym wypadku, wbudowana funkcja isNaN() jest użyta w celu sprawdzenia czy podana wartość jest liczbą, czy nie.

Kolejna użyteczną metodą, szczególnie przy weryfikacji liczb, jest metoda isWithinRange(), która pozwala na proste sprawdzenie czy podana liczba mieści się w danym zakresie.

// 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;
	}	
}

Możesz jeszcze dołączyć prostą metodę, która sprawdzi, czy pole checkbox(lub radio) jest zaznaczone:

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

Zauważ różnicę pomiędzy powyższą metodą, a tymi zdefiniowanymi wcześniej. Poprzednie metody pobierały wartość pola formularza jako argument; ta ostatnia pobiera obiekt reprezentujący polec checkbox.

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