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

Weryfikacja formularzy przy użyciu JavaScriptu

Struktura formValidator

Znamy już teorię. Zatrzymajmy się na chwilę i spędźmy kilka chwila na zastanowienie się nad obiektem formValidator, który chcemy stworzyć.

Nasz obiekt weryfikujący formularze będzie się składał z dwóch komponentów:

  1. Grupa metod, pobierających jako argumenty wartości, które maja być sprawdzone, następnie sprawdzających ich poprawność(algorytmy zostaną umieszczone w ciele metody) i w końcu zwracających odpowiedni sygnał.
  2. Tablica, która przechowuje wszystkie błędy, które wystąpiły podczas weryfikacji i kilka metod operujących na tejże tablicy.

Jak się niedługo przekonasz, te elementy pozwolą na stworzenie prostego, aczkolwiek bardzo użytecznego obiektu, który skrywa w sobie dużo różnorodnych metod.

Zanim przejdziemy dalej, muszę zdecydować, jak nowa klasa będzie działać. Mam pewien plan:

// tworzymy egzemplarz klasy
fv = new formValidator();

// 'sprawdzacze';
// sprawdza czy pole jest puste
if (fv.isEmpty(document.forms[0].elements[0].value))
{
	fv.raiseError("Wpisz coś!");
}

// sprawdza zakres
if (!fv.isWithinRange(document.forms[0].elements[1].value, 1, 99)) 
{
	fv.raiseError("Wprowadź wartość liczbową w zakresie 1-99");
}

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

Jak zapewne zauważyłeś, po tym jak stworzona jest instancja klasy, wywoływane są metody sprawdzające(z odpowiednimi argumentami w postaci wartości pól z formularza), aby sprawdzić czy dane wejściowe są prawidłowe. Jeśli nie są poprawne, do tablicy błędów dodawany jest błąd. W późniejszym czasie, kiedy już przeprowadzone są wszystkie weryfikacje, można wyświetlić błędy.

Kiedy już zaplanowaliśmy działanie obiektu, dobrze byłoby poświęcić chwilę na zestawienie potrzebnych metod razem z ich celami:

  • isEmpty() - sprawdza, czy dana wartość z formularza jest pusta,
  • isNumber() - sprawdza, czy dana wartość jest liczbą,
  • isAlphabetic() - sprawdza, czy dana wartość zawiera dane literowe,
  • isAlphaNumeric() - sprawdza, czy dana wartość zawiera dane alfanumeryczne,
  • isWithinRange() - sprawdza, czy dana wartość numeryczna mieści się w zakresie,
  • isEmailAddress() - sprawdza, czy podana wartość jest poprawnym adresem email,
  • raiseError() - dodaje błąd do tablicy błędów,
  • displayErrors() - wyświetla błędy w postaci okien dialogowych,
  • numErrors() - zwraca ilość dotychczasowych błędów.

Przedstawiłem podstawowe metody - może ich być więcej, nowe będę dodawał w miarę postępu pracy.

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