Nawigacja
jQuery i PF v7 w jednym stali domu... cz.2
Napisane przez Wooya dnia 15 października 2009 17:58 · 0 komentarzy · 7161 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ą?