Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sprawdzanie zawartości pola input
Forum PHP.pl > Forum > Po stronie przeglądarki
kuba_bardo
1.11.2013, 14:47:58
Witam,

Mam następujący problem. Piszę system w PHP, i nie wiem jak mam sprawdzać zawartość inputa.
Generalnie jest tak: mam sobie formularz, inputa, i 3 div'y.
[HTML] pobierz, plaintext 
  1. <form action="index.php" method="POST">
  2.      <input type="password" class="input"  id="password" />
  3.      <div class="pass-default" id="pass1"></div>
  4.      <div class="pass-default" id="pass2"></div>
  5.      <div class="pass-default" id="pass3"></div>
  6. </form>
[HTML] pobierz, plaintext

Te div'y (pass1-pass3) mają ten sam rozmiar, a default'owo czarne tło i szare obramowanie.
Ja potrzebuję skrypt w javie, który w czasie rzeczywistym zmieni ich style zależnie:
-Jeśli pole input nie jest puste zmienia się wygląd pola "pass1" z default'owego czarnego tła na czerwone, i bordowe obramowanie.
-Jeśli pole input zawiera więcej niż 8 znaków, pole "pass2" z default'owego zmienia się na zielone tło, i ciemno zielone obramowanie.
-I w końcu jeśli pole input zawiera duże i małe litery, cyfry oraz ma więcej niż 8 znaków to styl div'a "pass3" zmienia się na niebieskie tło i ciemno niebieskie obramowanie.

Szukałem już w googlach, ale niczego co znalazłem nie byłem w stanie zastosować sad.gif
Z góry dzięki smile.gif
kamil4u
1.11.2013, 14:55:38
Ale czego oczekujesz? Porad, gotowca, jak zacząć?

Zacznij od analizy:
Kod
<input type="password" id="test"><button onclick="alert( document.getElementById('test').value)">pokaz</button>
kuba_bardo
1.11.2013, 20:00:07
Może faktycznie trochę głupio sformułowałem temat. Nie no, na tyle znam jave, żeby wykonać taki przykład. Nie wiem jak napisać pętle if. W sensie co zdefiniować w warunku tych 3 pętli, żeby działały tak jak bym chciał. I sprawdzały zawartość tego inputa w czasie rzeczywistym. :/
Czego oczekuję? Chciałbym, aby ktoś nakierował mnie, w sensie pomógł sformułować warunki i dał kilka wskazówek.

Teraz, tak patrzę po raz kolejny na ten przykład @kamil4u i podsunąłeś mi pomysł smile.gif. Napisałem taki kod:

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.       function a(){
  5. 	if(test.value.length >= 1){
  6. 	  pass1.style.backgroundColor = "rgb(" +171 + "," +31 + ","+28+ ")";
  7. 	}
  8. 	if(test.value.length >= 8){
  9. 	  pass2.style.backgroundColor = "rgb(" +0 + "," +100 + ","+0+ ")";
  10. 	}
  11. 	if(test.value.length >= 8){
  12. 	  pass3.style.backgroundColor = "rgb(" +0 + "," +18 + ","+69+ ")";
  13. 	}
  14.       }
  15.     </script><style type="text/css">
  16.       div.pass-default{
  17. 	background-color:black;
  18. 	width:100px;
  19. 	height:30px;
  20. 	display:block;
  21. 	float:left;
  22. 	margin-left:10px;
  23. 	border:1px solid gray;
  24. 	border-radius:10px;
  25.       }
  26.     </style>
  27.   </head><body>
  28.     <input type="password" id="test">
  29.     <button onclick="a();">pokaz</button>
  30.     <div class="pass-default" id="pass1"></div>
  31.     <div class="pass-default" id="pass2"></div>
  32.     <div class="pass-default" id="pass3"></div>
  33.   </body>
  34. </html>
[HTML] pobierz, plaintext


Nie wiem tylko jak zdefiniować 3 warunek if(), czyli jak sprawdzić czy zawartość value zahacza się chociaż pojedynczymi znakami jednocześnie w 3 przedziały: (a-z) (A-Z) (0-9).
Drugim problemem jest to, że divy zmieniają styl dopiero po kliknięciu na button, a nie w czasie rzeczywistym.

Ma ktoś jakiś pomysł? Z góry dzięki smile.gif.
kamil4u
1.11.2013, 21:44:48
Cytat
znakami jednocześnie w 3 przedziały: (a-z) (A-Z) (0-9)

Rozwiązanie, które znajdziesz w Google pod hasłem: wyrażenia regularne

Cytat
Drugim problemem jest to, że divy zmieniają styl dopiero po kliknięciu na button, a nie w czasie rzeczywistym.

Zastosuj inne zdarzenie: onchange, onkeydown, onkeypress, onkeyup
Kod
<input type="password" id="test" onkeydown="a();">



Pamiętaj, że ktoś może usunąć hasło( zmniejszyć ilość znaków np. z 9 do 7 ), wtedy musisz zmienić div-a z powrotem( if-else )
kuba_bardo
2.11.2013, 00:55:23
Wielkie dzięki !
Wszystko działa tak jak powinno. Załączam poprawiony kod, może komuś, kto będzie miał podobny problem się przyda smile.gif.

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.       function a(){
  5. 	if(test.value.length >= 1){
  6. 	  pass1.style.backgroundColor = "rgb(" +171 + "," +31 + ","+28+ ")";
  7. 	}else{
  8. 	  pass1.style.backgroundColor = "rgb(" +0 + "," +0 + ","+0+ ")";
  9. 	}
  10. 	if(test.value.length >= 6){
  11. 	  pass2.style.backgroundColor = "rgb(" +0 + "," +100 + ","+0+ ")";
  12. 	}else{
  13. 	  pass2.style.backgroundColor = "rgb(" +0 + "," +0 + ","+0+ ")";
  14. 	}
  15. 	if(test.value.length >= 8 && new RegExp("[0-9A-Z]").exec(document.getElementById('test').value)){
  16. 	  pass3.style.backgroundColor = "rgb(" +0 + "," +18 + ","+69+ ")";
  17. 	}else{
  18. 	  pass3.style.backgroundColor = "rgb(" +0 + "," +0 + ","+0+ ")";
  19. 	}
  20.       }	
  21.     </script><style type="text/css">
  22.       div.pass-default{
  23. 	background-color:black;
  24. 	width:100px;
  25. 	height:30px;
  26. 	display:block;
  27. 	float:left;
  28. 	margin-left:10px;
  29. 	border:1px solid gray;
  30. 	border-radius:10px;
  31.       }
  32.     </style>
  33.   </head><body>
  34.     <input type="password" onkeyup="a()" id="test">
  35.     <div class="pass-default" id="pass1"></div>
  36.     <div class="pass-default" id="pass2"></div>
  37.     <div class="pass-default" id="pass3"></div>
  38.   </body>
  39. </html>
[HTML] pobierz, plaintext


Jeszcze raz wielkie dzięki biggrin.gif
Temat do zamknięcia.
com
2.11.2013, 01:09:29
nie wrzucaj tego bezpośrednio w if wrzuć do zmiennej wyrażenie a potem dopiero z zmienna porównuj wink.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.