ForumCała strona

Nawigacja

Aktualnie online

Gości online: 11

Użytkowników online: 0

Łącznie użytkowników: 25,283
Najnowszy użytkownik: ziomciu76

Logowanie

Nazwa użytkownika

Hasło



Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

khaman
10.01.2019 13:21:35
Zdarza się Smile

Apis
10.01.2019 10:18:02
Niejaki KellyTurner śmieci nam w serwisie Smile

Apis
03.01.2019 17:02:45
Lepszego Grin

khaman
02.01.2019 08:09:14
Szczęśliwego Smile

krystian1988
01.01.2019 02:39:59
Szczęśliwego Nowego Roku wszystkim Smile

Pobierz nową wersję
Pobierz podręcznik
Zobacz inne oficjalne Supporty
Sponsoring WWW
Sponsorowane WWW
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Polecamy hosting Hekko.pl

Nawigacja

jQuery i PF v7 w jednym stali domu... cz.2

Napisane przez Wooya dnia 15 październik 2009 17:58 · 0 komentarzy · 4861 czytań · Drukuj · Facebook · Wykop

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ć.

Brak ocen. Może czas dodać swoją?
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl