[JS] Weryfikacja formularza

0

Witam

Na samym poczatku chce napisac ze jestem poczatkujacy w JavaScripcie i prosilbym o dokładniejsze wytlumaczenie albo o linka do materialow w ktorych moge znalezc odpowiedz na moje pytanie.

Mam przykladowy formularz dodajacy uzytkownikow do bazy danych ( link i kod pozniej ) Chcialbym aby formularz byl sprawdzany pod wzgledem poprawnosci kodu. Zrobilem poki co weryfikacje na puste pola tekstowe. Chcialbym aby skrypt sprawdzal poprawnosc mejla, loginu, imienia, hasla, nazwiska oraz odpowiednia dlugosc. chcialbym zeby wiadomosc o wpisaniu zlych danych wyskakiwala w jednym alercie a mianowicie w tym co jest. Jezeli macie jakies dobre materialy (linki ) z ajax'u chetnie pocztyam. Prosze o pomoc.

http://progrwiki.ovh.org/Logowanie/user_add.php

wpiszcie sam login a zobaczycie 'alert' o zle wypelnionym formularzu

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Rejestracja użytkowników - Załóż swoje konto</title>
		<script type="text/javascript">
			function przetwarzaj_dane ()
				{
					var brakuje_danych=false;
					var formularz=document.forms[0];
					var napis="";
					if (formularz.login.value == "")
					{
						napis += "Login\n"
						brakuje_danych=true;
					}
					if (formularz.haslo.value == ""){
						napis += "Hasło\n"
						brakuje_danych=true;
					}
					if (formularz.haslo2.value == ""){
						napis += "Powtorz hasło\n"
						brakuje_danych=true;
					}
					if (formularz.mail.value == ""){
						napis += "E-mail\n"
						brakuje_danych=true;
					}
					if (formularz.imie.value == ""){
						napis += "Imię\n"
						brakuje_danych=true;
					}
					if (formularz.nazwisko.value == ""){
						napis += "Nazwisko\n"
						brakuje_danych=true;
					}
					if (formularz.regulamin.checked == ""){
						napis += "\nNie zaakceptowałeś regulaminu!\n"
						brakuje_danych=true;
					}
					if (!brakuje_danych)
						formularz.submit();
					else
						alert ("Nie wypełniłeś następujących pól:\n\n" + napis);
				}
		</script>
	</head>
	<body>
	<?php	
		include ("PHP/connect.php");
		if ( $_POST['regulamin'] == '1' ) 
			{
				if ( $_POST['login'] && $_POST['haslo'] && $_POST['haslo2'] && $_POST['mail'] && $_POST['imie'] && $_POST['nazwisko'] && $_POST['regulamin'] )
					{
						if ( $_POST['haslo'] == $_POST['haslo2']) 
							{
								$zakodowane_haslo = md5($_POST['haslo']);   // KODOWANIE HASLA ALGORYTMEM MD5
								$dodawanie_rekordu = mysql_query ( " INSERT INTO TU_uzytkownicy  VALUES ( NULL , '".$_POST['login']."', '$zakodowane_haslo', '".$_POST['mail']."', '".$_POST['imie']."', '".$_POST['nazwisko']."', NULL , NULL , NULL , NULL , NULL , NULL , NULL , 'user');");    	
								echo "Użytkownik został dodany, możesz się zalogować na swoje konto.";
							} 
						else 
							{
								echo "Potwierdzenie hasła nie jest takie samo jak haslo, wróć i popraw dane <br /><br />";
								echo "<a href=\"user_add.php\">Powrot do rejestracji</a>";
							}
					} 
				else
					echo "<span style=\" color: red \"> nie wypelniles wszystkich pol!</span>";
			} 
		else 
			{
		?>
		REJESTRACJA<br /><br />
		Proszę o dokładne wypełnienie poniższego formularza ( pola oznaczone "*" muszą być wypełnione! )<br /><br />
		<form name="formularz1" action="user_add.php" method="post" >
			<input type="hidden" name="ranga" value="user" />
			<table>
				<tr>
					<td>* Login:</td>
					<td><input type="text" name="login" /></td>
				</tr>
				<tr>
					<td>* Hasło:</td>
					<td><input type="password" name="haslo" /></td>
				</tr>
				<tr>
					<td>* Powtórz hasło:</td>
					<td><input type="password" name="haslo2" /></td>
				</tr>
				<tr>
					<td>* Adres e-mail:</td>
					<td><input type="text" name="mail" /></td>
				</tr>
				<tr>
					<td>* Imię:</td>
					<td><input type="text" name="imie" /></td>
				</tr>
				<tr>
					<td>* Nazwisko:<br /><br /></td>
					<td><input type="text" name="nazwisko" /><br /><br /></td>
				</tr>
				<tr>
					<td>Miasto:</td>
					<td><input type="text" name="miasto" /></td>
				</tr>
				<tr>
					<td>Płeć:</td>
					<td>
						<select name="plec" >
							<option>---</option>
							<option>Kobieta</option>
							<option>Mężczyzna</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Data urodzenia:<br /><br /></td>
					<td>
						<select name="data_ur_dzien">
							<option>---</option>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
							<option>13</option>
							<option>14</option>
							<option>15</option>
							<option>16</option>
							<option>17</option>
							<option>18</option>
							<option>19</option>
							<option>20</option>
							<option>21</option>
							<option>22</option>
							<option>23</option>
							<option>24</option>
							<option>25</option>
							<option>26</option>
							<option>27</option>
							<option>28</option>
							<option>29</option>
							<option>30</option>
							<option>31</option>	
						</select>
						<select name="data_ur_miesiac">
							<option>---</option>
							<option>Styczeń</option>
							<option>Luty</option>
							<option>Marzec</option>
							<option>Kwiecień</option>
							<option>Maj</option>
							<option>Czerwiec</option>
							<option>Lipiec</option>
							<option>Sierpień</option>
							<option>Wrzesień</option>
							<option>Październik</option>
							<option>Listopad</option>
							<option>Grudzień</option>
						</select>
						<select name="nazwa">
							<option>---</option>
							<option>2008</option>
							<option>2007</option>
							<option>2006</option>
							<option>2005</option>
							<option>2004</option>
							<option>2003</option>
							<option>2002</option>
							<option>2001</option>
							<option>2000</option>
							<option>1999</option>
							<option>1998</option>
							<option>1997</option>
							<option>1996</option>
							<option>1995</option>
							<option>1994</option>
							<option>1993</option>
							<option>1992</option>
							<option>1991</option>
							<option>1990</option>
							<option>1989</option>
							<option>1988</option>
							<option>1987</option>
							<option>1986</option>
							<option>1985</option>
							<option>1984</option>
							<option>1983</option>
							<option>1982</option>
							<option>1981</option>
							<option>1980</option>
							<option>1979</option>
							<option>1978</option>
							<option>1977</option>
							<option>1976</option>
							<option>1975</option>
							<option>1974</option>
							<option>1973</option>
							<option>1972</option>
							<option>1971</option>
							<option>1970</option>
						</select><br /><br />
					</td>
				</tr>
				<tr>
					<td>Gadu-Gadu:</td>
					<td><input type="text" name="gadu" />
				</tr>
				<tr>
					<td>Tlen:</td>
					<td><input type="text" name="tlen" />
				</tr>
				<tr>
					<td>Skype:</td>
					<td><input type="text" name="skype" />
				</tr>
				<tr>
					<br /><br /><td colspan="2"><input type="checkbox" name="regulamin" value="1" />Oświadczam, że akceptuję <a href="regulamin.php">Regulamin Serwisu</a>.</td>
				</tr>
				<tr>
					<td><input type="submit" value="Zarejestruj" onClick="przetwarzaj_dane()" /></td>
					<td><input type="reset" value="Wyczyść" /></td>
				</tr>			
			</table>
		</form>
		<?php
		}
		?>
	</body>
</html>
0

Możesz spojrzeć na przykład na moją pracę zaliczeniową z przedmiotu "Narzędzia internetowe". Nie jest to wzór poprawności, ale pewnie jest tam trochę wskazówek jak możesz wykonać coś w tym stylu. Aczkolwiek nie opiera się o alerty, ale o wpisywanie tekstu w pola tabeli niewidocznej, bo jest to zdecydowanie mniej uciążliwe dla użytkownika.
Jeżeli będziesz używał - radzę skorzystać ze sprawdzanie e-maila w wersji opartej o wyrażenia regularne, jest znacznie lepsza. Licencja GNU LGPL 2.1.

http://marcin.badurowicz.net/projekty/Kirke/

1 użytkowników online, w tym zalogowanych: 0, gości: 1