Kategória: Webdesign

Dnes som mal za úlohu vyriešiť zobrazenie sily hesla. Po tom, ako užívateľ zadá svoje heslo do formulárového pola, malo by sa mu pomocou JavaScriptu zobraziť nakoľko je silné.

Silu hesla môžeme posudzovať podla rôznych parametrov. Volil som nasledovné:

• minimálna dĺžka hesla by mala byť aspoň 8 znakov
• heslo by malo obsahovať veľké aj malé písmená
• heslo obsahuje číselný znak
• heslo obsahuje špeciálne znaky ! / | < > @ = # “ $ § % ^ ° ‚ ` ‚ & * ? _ ~ – ( )
• heslo má viac ako 12 znakov

Každá jedna podmienka pridáva heslu jeden bod. Najnižšie hodnotenie je teda 0, najvyššie 5. Z toho vyplývajú stavy hesla ako krátke, veľmi slabé, slabé, dobré, veľmi dobré, vynikajúce.

Každý zo stavov sa dá pekne graficky znázorniť, aby to bolo užívateľsky príjemné.

JavaScript vyzerá nasledovne:

var desc = new Array();
desc[0] = "krátke";
desc[1] = "veľmi slabé";
desc[2] = "slabé";
desc[3] = "dobré";
desc[4] = "veľmi dobré";
desc[5] = "vynikajúce";

function passwordStrength(password, desc) {
var score = 0;
//ak je heslo väčšie ako 7 znakov, dostane 1 bod
if (password.length > 7) score++;
//ak heslo obsahuje malé aj veľké znaky, dostane 1 bod
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//ak heslo obsahuje číslicu, dostane 1 bod
if (password.match(/d+/)) score++;
//ak heslo obsahuje špeciálny znak z množiny, dostane 1 bod
if ( password.match(/.[!,/,\,|,< ,>,@,=,#,",$,,§,%,^,°,',`,',&,*,?,_,~,-,(,)]/) ) score++;
//ak je heslo väčšie ako 12 znakov, dostane 1 bod
if (password.length > 12) score++;
//hodnota pre menej ako 6 znakov
if (password.length < 6) score = 0;
//6 alebo 7 malých alebo veľkých písmen v jednom hesle, aby sa zabránilo falošnému hodnoteniu
if ( ( password.length > 5 ) && ( score == 0 ) ) score++;

document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}


Časť v HTML:


<input type="password" name="password" onkeyup="passwordStrength(this.value, desc)" /><br />
<span id="passwordDescription"></span><br/><span id="passwordStrength" class="strength0">&nbsp;</span>



CSS môže vyzerať aj takto:


.strength0,.strength1,.strength2,.strength3,.strength4,.strength5{display:block; height:10px; width:150px;}
.strength0{background-color:#cccccc;}
.strength1{background-color:#ff0000;}
.strength2{background-color:#ffCC00;}
.strength3{background-color:#00dd00;}
.strength4{background-color:#009900;}
.strength5{background-color:#006600;}


Na záver demo:

Keďže Javascript a ja sa poznáme, no netykáme si, tento článok neberte ako článok odborníka. Určite to ide spraviť mnohými inými spôsobmi, no ja som prišiel asi po hodinke štúdia k tomuto riešeniu.