Publikované od frkosk

JavaScript – Overenie sily hesla

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.

8 komentárov k “JavaScript – Overenie sily hesla”

  1. demo ukazuje 404. inac dalsi bod by som navrhol pridavat, ak heslo nezacina na pismeno, ale bud cislicou alebo specialnym zankom. taketo hesla su totiz velmi zriedkave a nie take odhadhnutelne.

    1. demo opravené, dík

      ten tvoj bod nie je zlý nápad, keď budem mať čas tak to tam pridám. i keď mojej žene sa zdá, že som bol v posudzovaní hesla až moc prísny :-)

  2. Spätné upozornenie: Aké silné máte heslo? Ako rýchlo sa dá prelomiť?

  3. Díky za nápad využiji v CMS a na webech, aspoň nemusím už uživatele nutit zadávat určitý počet znaků, ale sami uvidí jak si stojí :-)

  4. Ahoj,
    vdaka za skript, pomohol mi v smestralnej praci. ale mam tu taky problem, snazim sa porovnat dve hesla, heslo1 a heslo2, zistit ci sa zhoduju. skript je okej, ale mam pocit ze html je problem.
    nechce ma pustit do hodnoty hesla1, ako by som to spravil ked nemozem pouzit this?? Lebo tam potrebujem vytiahnut hodnoty oboch hesiel. Vedel by si mi poradit co dat namiesto XXXXX?
    vdaka

     

    1. kruci, nedava mi tu skript. toto je ten kusok
      input type=“password“ name=“heslo2″ onkeyup=“passwordCheck(XXXXX, this.value, desc1)“

      1. a uz netreba, nemal som zadefinovane id a potom pouzival getElementById. tak vdaka za napad :)

Komentáre sú zakázané.