Napisane przez Wooya dnia 15 października 2009 17:58 · 0 komentarzy · 7510 czytań ·  ·  · 

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 ;)

Tylko zarejestrowani użytkownicy mogą oceniać zawartość strony
Zaloguj się lub zarejestruj, żeby móc zagłosować.

Brak ocen. Może czas dodać swoją?