Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Sprawdzanie zawartości pola input
kuba_bardo
post 1.11.2013, 14:47:58
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 1.11.2013

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
kamil4u
post 1.11.2013, 14:55:38
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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>


Ten post edytował kamil4u 1.11.2013, 14:55:51


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
kuba_bardo
post 1.11.2013, 20:00:07
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 1.11.2013

Ostrzeżenie: (0%)
-----

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.

Ten post edytował kuba_bardo 1.11.2013, 15:18:50
Go to the top of the page
+Quote Post
kamil4u
post 1.11.2013, 21:44:48
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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 )


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
kuba_bardo
post 2.11.2013, 00:55:23
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 1.11.2013

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
com
post 2.11.2013, 01:09:29
Post #6





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

nie wrzucaj tego bezpośrednio w if wrzuć do zmiennej wyrażenie a potem dopiero z zmienna porównuj wink.gif
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 29.06.2025 - 22:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn