Nawigacja
jQuery i PF v7 w jednym stali domu... cz.2
Napisane przez Wooya
dnia 15 pa¼dziernika 2009 17:58 ·
0 komentarzy ·
6658 czytañ ·
·
·
Streszczenie:
Czyli jak wymusiæ u¿ywanie przez u¿ytkowników "trudnych" hase³ oraz sprawdzenie poprawno¶ci adresu e-mail...W poprzednim odcinku sprawdzili¶my, czy d³ugo¶æ has³a jest prawid³owa. uzupe³nijmy poprzedni skrypt o sprawdzanie si³y has³a. W tym celu dodajemy funkcjê getPasswordStrength() (znalezion± gdzie¶ w necie ;), która zwraca warto¶æ int w zakresie 0-100. Dla silnego has³a zak³adamy, ¿e warto¶æ musi byæ >=70:
?> <script type='text/javascript'> function getPasswordStrength(H){ var D=(H.length); if (D<4) { D=0 } if(D>5){D=5} var F=H.replace(/[0-9]/g,""); var G=(H.length-F.length); if(G>3){G=3} var A=H.replace(/\W/g,""); var C=(H.length-A.length); if(C>3){C=3} var B=H.replace(/[A-Z]/g,""); var I=(H.length-B.length); if(I>3){I=3} var E=((D*10)-20)+(G*10)+(C*15)+(I*10); if(E<0){E=0} if(E>100){E=100} return E } var profile_errors = 0; $(function(){ $("input[@type=password]").blur(function(){ profile_errors = 0; $("#"+$(this).attr("name")+"_validate").remove(); if ($(this).val().length>0) { if ($(this).val().length<6 || $(this).val().length>20) { $(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has³o musi posiadaæ minimum 6 i maksimum 20 znaków...</div>"); profile_errors++; } else if (getPasswordStrength($(this).val())<70) { $(this).after("<div style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has³o musi byæ silne, czyli zawieraæ ma³e i du¿e litery, znaki specjalne oraz cyfry...</div>"); profile_errors++; } } }); $("input[@name=update_profile]").bind("click", function(){ if (profile_errors>0) { alert("Niektóre pola zosta³y wype³nione nieprawid³owo!\nNie mo¿na zaktualizowaæ profilu!"); return false; } }); }); </script> <?php
W powy¿szym przyk³adzie dla ka¿dego pola INPUT typu PASSWORD sprawdzimy d³ugo¶æ oraz si³ê has³a i nie pozwolimy na zapisanie profilu, je¿eli którykolwiek warunek nie zostanie spe³niony.
Ok. Sprawê hase³ mamy z g³owy :) Zajmijmy siê walidacj± adresu email przed wys³aniem formularza profilu. W tym celu wykorzystamy funkcjê isValidEmailAddress() (tak¿e znalezion± w necie ;). Zmieniamy tak¿e filozofiê sprawdzania b³êdów, jako ¿e bêdziemy tak¿e sprawdzaæ inne pola poza has³em. W tym celu znów z pomoc± przyjd± nam selektory jQuery. Ka¿dy DIV z komunikatem b³êdu bêdzie posiada³ klasê profile_errors. Przed wys³aniem formularza sprawdzimy liczbê selektorów z t± klas± i je¶li liczba bêdzie <> 0 wtedy wy¶wietlimy komunikat o b³êdzie:
?> <script type='text/javascript'> function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); return pattern.test(emailAddress); } function getPasswordStrength(H){ var D=(H.length); if (D<4) { D=0 } if(D>5){D=5} var F=H.replace(/[0-9]/g,""); var G=(H.length-F.length); if(G>3){G=3} var A=H.replace(/\W/g,""); var C=(H.length-A.length); if(C>3){C=3} var B=H.replace(/[A-Z]/g,""); var I=(H.length-B.length); if(I>3){I=3} var E=((D*10)-20)+(G*10)+(C*15)+(I*10); if(E<0){E=0} if(E>100){E=100} return E } $(function(){ $("input[@type=password]").blur(function(){ $("#"+$(this).attr("name")+"_validate").remove(); if ($(this).val().length>0) { if ($(this).val().length<6 || $(this).val().length>20) { $(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has³o musi posiadaæ minimum 6 i maksimum 20 znaków...</div>"); } else if (getPasswordStrength($(this).val())<70) { $(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Has³o musi byæ silne, czyli zawieraæ ma³e i du¿e litery, znaki specjalne oraz cyfry...</div>"); } } }); $("input[@name=user_email]").blur(function(){ $("#"+$(this).attr("name")+"_validate").remove(); if (!isValidEmailAddress($(this).val())) { $(this).after("<div class='profile_errors' style='background:yellow;border:1px solid red;color:red;padding:2px' id='"+$(this).attr("name")+"_validate'>Podany adres email wygl±da na nieprawid³owy...</div>"); } }); $("input[@name=update_profile]").bind("click", function(){ if ($(".profile_errors").size()>0) { alert("Niektóre pola zosta³y wype³nione nieprawid³owo!\nNie mo¿na zaktualizowaæ profilu!"); return false; } }); }); </script> <?php
W³a¶nie uzyskali¶my walidator profilu u¿ytkownika, który sprawdza najwa¿niejsze pola profilu PF v7. Oczywi¶cie walidowaæ mo¿na wszystkie pola, ale to zostawiam inwencji twórczej czytaj±cych ten artyku³ ;)
W nastêpnym odcinku... Nie wiem co, ale na pewno o jQuery i PF v7 ;)
Komentarze
Brak komentarzy. Mo¿e czas dodaæ swój?
Dodaj komentarz
Zaloguj siê, aby móc dodaæ komentarz.
Oceny
Tylko zarejestrowani u¿ytkownicy mog± oceniaæ zawarto¶æ strony
Zaloguj siê lub zarejestruj, ¿eby móc zag³osowaæ.
Zaloguj siê lub zarejestruj, ¿eby móc zag³osowaæ.
Brak ocen. Mo¿e czas dodaæ swoj±?