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

Weryfikacja formularzy przy użyciu JavaScriptu

Przykładowa weryfikacja formularzy

Aby dowiedzieć się, jak najczęściej działa weryfikacja formularzy, rozważ poniższy przykład:

<html>
<head>
<style>
body { font-family: Arial; }
</style>
<script language="JavaScript">
function validateForm()
{
	// sprawdza imie
	if (document.forms[0].elements[0].value == "")
	{
		alert ("Wprowadź imię!");
		return false;
	}

	// sprawdza dlugosc hasła
	if (document.forms[0].elements[1].value.length < 6)
	{
		alert ("Wprowadź hasło składające sie przynajmniej z 6 znaków!");
		return false;
	}

	// sprawdza adres email

	// sprawdza wiek
	if (isNaN(document.forms[0].elements[3].value))
	{
		alert ("Wprowadź prawidłowy wiek!");
		return false;
	}

	// sprawdza akres wieku
	if (parseInt(document.forms[0].elements[3].value) < 1 ||
parseInt(document.forms[0].elements[3].value) > 99)
	{
		alert ("Wprowadź wiek mieszczący się w zakresie 1-99!");
		return false;
	}

	return true;
}
</script>
</head>

<body>

<form action="someform.cgi" method="post" 
     onSubmit="return validateForm();">

Imię: 
<br>
<input type="text" name="imie" id="imie" />
<p>

Hasło:
<br />
<input type="password" name="haslo" id="haslo" />
<p>

Adres email: 
<br />
<input type="text" name="email" id="email" />
<p>

Wiek: 
<br />
<input type="text" name="wiek" id="wiek" />
<p>

<input type="submit" value="Wyślij!" />
</form>

</body>
</html>

Jest to prosty formularz z polami, w których użytkownik winien wpisać swoje imię, hasło, adres email i wiek. Zanim formularz jest wysłany, zdarzenie onSubmit wywołuje funkcję validateForm(), która sprawdza czy:

  • wpisano imię,
  • długość hasła jest większa lub równa 6 znaków,
  • adres email jest składniowo poprawny,
  • wiek jest wartością liczbową i znajduje się w zakresie 1-99.

Jeśli chociaż jeden z tych warunków nie będzie spełniony, funkcja pokaże wiadomość błędu i zwróci false, co z kolei zapobiegnie wysyłaniu formularza. Dopiero wtedy, gdy wszystkie warunki zostaną spełnione, funkcja zwróci true i pozwoli na dalsze wysyłanie danych. Tym sposobem, podstawowa weryfikacja po stronie klienta może zapobiec wysłaniu do bazy niepoprawnych danych.

Taka weryfikacja po stronie klienta jest dość popularnym rozwiązaniem podczas tworzenia aplikacji internetowych. Dobrze jest zaimplementować więcej pospolitych zadań dotyczących sprawdzania danych i umieścić je w uniwersalnych funkcjach, które mogą być wywoływane kiedy tylko twoje skrypty będą tego wymagały. Takie rozwiązanie pozwoli ci na zredukowanie czasu pisania aplikacji. Najlepszym sposobem na stworzenie czegoś takiego będzie stworzenie prostego obiektu weryfikującego formularze i dodanie do niego metod sprawdzających różne typy danych.

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