Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skrypt sprawdzania rejestracji.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
heder1994
16.10.2012, 08:08:54
Cześć.
Korzystając z okazji chciałbym przywitać się z forumowiczami. Jest to mój pierwszy post na tym forum.
Ale do rzeczy:

Posiadam skrypt który na pierwszy rzut oka powinien działać. Nie mogę (razem z nauczycielem i kolegami) znaleźć w nim błędu.


Plik: rejestracja.htm
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>Zarejestruj się</title>
  6. 	<link href="styleRej.css" rel="stylesheet" type="text/css" />
  7. 	<script src="rejestracja.js" type="text/javascript"></script>
  8. </head>
  9. <body>
  10. 	<div id="rejestr">
  11.         <h1>Zarejestruj się</h1>
  12.         <form name="rejestracja" >
  13. 			<div class="row">
  14. 				<span class="label">Nazwa użytkownika:</span>
  15. 				<span class="formw">
  16. 					<input type="text" name="nazwa" />
  17. 					<span id="zlaNazwa"></span>
  18.  
  19. 				</span>
  20. 			</div>       
  21. 			<div class="row">
  22. 				<span class="label">Podaj hasło:</span>
  23. 				<span class="formw">
  24. 					<input type="password" name="haslo" />
  25. 					<span id="opisHasla"></span>
  26.  
  27. 				</span>
  28.  
  29. 			</div>  
  30. 			<div class="row">
  31. 				<span class="label">Ponownie podaj hasło:</span>
  32. 				<span class="formw">
  33. 					<input type="password" name="haslo2" />
  34. 					<span id="zgodneHasla"></span>
  35.  
  36. 				</span>
  37. 			</div>     
  38. 			<div class="spacer" />
  39. 			<center>
  40. 			    <input type="submit" value="Wyślij" onsubmit="return sprawdz(this)"/>
  41. 			</center>
  42. 		</form> 
  43. 	</div>
  44. </body>
  45. </html>
[PHP] pobierz, plaintext


Plik rejestracja.js

[PHP] pobierz, plaintext 
  1. function sprawdz (form){ 
  2. var user=form.nazwa.value; 
  3. if ((user.length<5) || (user.length>10)) { 
  4. document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika może mieć od 5 do 10 liter"; 
  5. document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; 
  6. form.nazwa.focus; return false; } 
  7. else { document.getElementById("zlaNazwa").innerHTML = "";} 
  8. if (form.haslo.value.length < 7) 
  9. { document.getElementById("opisHasla").innerHTML = "Proszę wprowadzić hasło co najmniej 7 literowe."; 
  10. document.getElementById("opisHasla").className = "wyroznienieCzerwone"; 
  11. form.haslo.focus(); 
  12. return false ; }
  13. if (!((user.match(/[a-z]/)) || (user.match(/[A-Z]/)))) { 
  14. document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika zawiera tylko litery"; 
  15. document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; 
  16. form.nazwa.focus; 
  17. return false; } 
  18. else { document.getElementById("zlaNazwa").innerHTML = ""; }
  19. if (form.haslo.value!=form.haslo2.value) { 
  20. document.getElementById("zgodneHasla").innerHTML = "Hasła nie są zgodne!"; 
  21. document.getElementById("zgodneHasla").className = "wyroznienieCzerwone"; 
  22. return false; }
  23.  
  24. return true;}
  25.  
  26. function silaHasla( haslo ) { 
  27. var punkty=0; if (haslo.length >=7) punkty++; 
  28. if ((haslo.match(/[a-z]/)) && (haslo.match(/[A-Z]/))) punkty++; 
  29. if (haslo.match(/\d+/)) punkty++; if (haslo.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) punkty++; 
  30. if (punkty<1) { document.getElementById("opisHasla").innerHTML = "Bardzo słabe"; 
  31. document.getElementById("opisHasla").className = "opisHaslaBardzoSlabe"} 
  32. else if (punkty<2) { document.getElementById("opisHasla").innerHTML = "Słabe"; 
  33. document.getElementById("opisHasla").className = "opisHaslaSlabe"} 
  34. else if (punkty<3){ document.getElementById("opisHasla").innerHTML = "ŒŚrednie"; 
  35. document.getElementById("opisHasla").className = "opisHaslaSrednie"} 
  36. else { document.getElementById("opisHasla").innerHTML = "Silne"; 
  37. document.getElementById("opisHasla").className = "opisHaslaSilne"} }
  38.  
  39. return true; }
[PHP] pobierz, plaintext


oraz plik: styleRej.css

[PHP] pobierz, plaintext 
  1. body
  2. {
  3. 	font-family: Verdana;
  4. }
  5. #rejestr
  6. {
  7. 	width: 600px;
  8. 	background-color: #C3DBEA;
  9. 	border: 1px dotted #55BBFF;
  10. 	padding: 5px;
  11. 	margin: 0px auto;
  12. }
  13. div.row
  14. {
  15. 	clear: both;
  16. 	padding-top: 10px;
  17. }
  18.  
  19. div.row span.label
  20. {
  21. 	float: left;
  22. 	width: 200px;
  23. 	text-align: right;
  24. 	padding-right: 5px;
  25. }
  26.  
  27. div.row span.formw
  28. {
  29. 	float: right;
  30. 	width: 400px;
  31. 	text-align: left;
  32. }
  33.  
  34. input
  35. {
  36. 	width: 200px;
  37. }
  38.  
  39. .spacer
  40. {
  41. 	clear: both;
  42. }
  43.  
  44. .wyroznienieCzerwone{ padding-left:10px; color:Red; font-weight:600;
  45. }
[PHP] pobierz, plaintext


nospor
16.10.2012, 08:32:19
To może napisz łaskawco co skrypt powinien robić a czego nie robi, skoro twierdzisz że nie działa.
heder1994
16.10.2012, 08:48:00
powinien:
1. sprawdzać czy nick spełnia wymagania. jak nie to wyświetla komunikat.
2. sprawdzać czy hasło spełnia wymagania oraz pokazuje "siłę" hasła. (też wyświetla komunikat).

niestety z tego co się orientuje to JS się w ogóle nie ładuje. tj nie odczytywało mi pliku JS.
nospor
16.10.2012, 08:52:55
sprawdz(this)
this wskazuje na button a nie na formularz. Nauczyciel powinien to wiedzieć.... Powinien również wiedzieć co to konsola js. No chyba że to nauczyciel języka polskiego a nie informatyki - w takim razie zwracam honor.



<input type="submit" value="Wyślij" onsubmit="return sprawdz(this)"/>
poza tym ONSUBMIT to się przypisuje dla FORM a nie dla buttona
heder1994
16.10.2012, 09:07:24
hmm... sprawdziłem i nie działa nadal.

plik rejestracja.htm po zmianie:
[PHP] pobierz, plaintext 
  1. &#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>Zarejestruj się</title>
  6. 	<link href="styleRej.css" rel="stylesheet" type="text/css" />
  7. 	<script src="rejestracja.js" type="text/javascript"></script>
  8. </head>
  9. <body>
  10. 	<div id="rejestr">
  11.         <h1>Zarejestruj się</h1>
  12.         <form name="rejestracja" onsubmit="return sprawdz(this)">
  13. 			<div class="row">
  14. 				<span class="label">Nazwa użytkownika:</span>
  15. 				<span class="formw">
  16. 					<input type="text" name="nazwa" />
  17. 					<span id="zlaNazwa"></span>
  18.  
  19. 				</span>
  20. 			</div>       
  21. 			<div class="row">
  22. 				<span class="label">Podaj hasło:</span>
  23. 				<span class="formw">
  24. 					<input type="password" name="haslo" />
  25. 					<span id="opisHasla"></span>
  26.  
  27. 				</span>
  28.  
  29. 			</div>  
  30. 			<div class="row">
  31. 				<span class="label">Ponownie podaj hasło:</span>
  32. 				<span class="formw">
  33. 					<input type="password" name="haslo2" />
  34. 					<span id="zgodneHasla"></span>
  35.  
  36. 				</span>
  37. 			</div>     
  38. 			<div class="spacer" />
  39. 			<center>
  40. 			    <input type="submit" value="Wyślij" />
  41. 			</center>
  42. 		</form> 
  43. 	</div>
  44. </body>
  45. </html>
[PHP] pobierz, plaintext
nospor
16.10.2012, 09:09:22
firefox -> firebug - i patrz czy nie masz błędów js.

Jak nie bedzie tam bledow js to w funkcji sprawdz() rób alerty by sprawdzac co się tam dzieje
lukasz1985
16.10.2012, 10:14:54
W pliku rejestracja.js jest o jeden "}" za dużo na końcu.
heder1994
16.10.2012, 17:16:31
Dzięki. Już do tego dotarłem. Tylko trochę mi net się laguje i nie mogłem wam odpisać. problem tkwił właśnie w tym jednym zdublowanym znaku biggrin.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.