Kontrollera lösenordsstyrka med JavaScript och reguljära uttryck

Kontrollera lösenordsstyrka med JavaScript och reguljära uttryck

Jag undersökte hur jag hittade ett bra exempel på en lösenordskontroll som använder JavaScript och Vanliga uttryck (Regex). I applikationen på mitt arbete gör vi ett inlägg tillbaka för att verifiera lösenordsstyrkan och det är ganska obekvämt för våra användare.

Vad är Regex?

Ett reguljärt uttryck är en sekvens av tecken som definierar ett sökmönster. Vanligtvis används sådana mönster av strängsökningsalgoritmer för finna or hitta och ersätta operationer på strängar eller för inmatningsvalidering. 

Den här artikeln är definitivt inte för att lära dig vanliga uttryck. Vet bara att förmågan att använda Regular Expressions absolut kommer att förenkla din utveckling när du söker efter mönster i text. Det är också viktigt att notera att de flesta utvecklingsspråk har optimerat användningen av reguljära uttryck ... så snarare än att analysera och söka i strängar steg för steg är Regex vanligtvis mycket snabbare både på server och klientsida.

Jag sökte på webben en hel del innan jag hittade ett exempel av några fantastiska reguljära uttryck som letar efter en kombination av längd, tecken och symboler. Koden var dock lite överdriven för min smak och skräddarsydd för .NET. Så jag förenklade koden och lade den i JavaScript. Detta gör att den validerar lösenordsstyrkan i realtid i klientens webbläsare innan den skickas tillbaka ... och ger feedback till användaren om lösenordets styrka.

Skriv ett lösenord

För varje tangentbordsslag testas lösenordet mot det reguljära uttrycket och sedan ges feedback till användaren i ett intervall under det.




Skriv lösenord

Här är koden

Du har nu möjlighet Vanliga uttryck gör ett fantastiskt jobb med att minimera kodens längd:

  • Fler karaktärer - Om längden är under 8 tecken.
  • Svag - Om längden är mindre än 10 tecken och inte innehåller en kombination av symboler, versaler, text.
  • Medium - Om längden är 10 tecken eller mer och har en kombination av symboler, versaler, text.
  • Stark - Om längden är 14 tecken eller mer och har en kombination av symboler, versaler, text.

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Härdar din lösenordsförfrågan

Det är viktigt att du inte bara validerar lösenordskonstruktionen i ditt Javascript. Detta skulle göra det möjligt för alla med webbläsarutvecklingsverktyg att kringgå skriptet och använda vilket lösenord som helst. Du bör ALLTID använda en serverkontroll för att validera lösenordsstyrkan innan du lagrar den på din plattform.

34 Kommentarer

  1. 1
  2. 2

    TACK! TACK! TACK! Jag har lurat i två veckor med jävla lösenordskod från andra webbplatser och dragit ut mitt hår. Din är kort, fungerar precis som jag vill och bäst av allt, lätt för en javascript-nybörjare att ändra! Jag ville fånga styrkan-domen och inte låta formuläret posta för att faktiskt uppdatera användarens lösenord såvida det inte klarade styrketestet. Andras kod var för komplicerad eller fungerade inte rätt eller något annat. Jag älskar dig! XXXXX

  3. 4

    tack och lov för människor som faktiskt kan skriva en kod korrekt.
    Hade samma erfarenhet som Janis.

    Detta fungerar direkt ur lådan, vilket är perfekt för människor som jag som inte kan koda javascript!

  4. 5
  5. 6

    Hej, först och främst tack så mycket för din ansträngning, jag försökte använda detta med Asp.net men fungerade inte, jag använder

    istället för tagg, och det fungerade inte, några förslag ?!

  6. 7

    Till Nisreen: koden i den markerade rutan fungerar inte med en cut'n'paste. Det enda citatet är trassligt. Demonstrationslänkens kod är dock bra.

  7. 8
  8. 9
  9. 10
  10. 11

    “P @ s $ w0rD” visar starkt, även om det skulle knäcka sig ganska snabbt med en dictionnaire attack ...
    För att distribuera en sådan funktion på en professionell lösning tror jag att det är viktigt att kombinera denna algoritm med en ordbokscheck.

  11. 12
  12. 13

    Tack för den här lilla koden. Jag kan nu använda den för att testa min lösenordsstyrka när mina besökare anger sina lösenord,

  13. 14
  14. 15
  15. 16
  16. 17
  17. 18
  18. 19

    kan någon berätta, varför det inte fungerade mitt ...

    Jag kopierade all koden och klistrade in den i anteckningar ++, men den fungerar inte alls?
    snälla hjälp mig..

  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    Denna typ av "styrka kontroller" leder människor ner en mycket farlig väg. Det värdesätter karaktärsdiversitet över lösenfraslängd, vilket leder till att kortare, mer varierande lösenord klassas som starkare än längre, mindre olika lösenord. Det är ett misstag som kommer att få dina användare i trubbel om de någonsin står inför ett allvarligt hackhot.

    • 25

      Jag håller inte med, Jordanien! Exemplet lades helt enkelt ut som ett exempel på manuset. Min rekommendation till människor är att använda ett lösenordshanteringsverktyg för att skapa oberoende lösenfraser för alla webbplatser som är unika för den. Tack!

  24. 26
  25. 27
  26. 28

    Jag uppskattar verkligen att du har sökt så många gånger men slutligen fick jag ditt inlägg och är verkligen förvånad. TACK

  27. 29
  28. 31
  29. 33

    Du är en livräddare! Jag analyserade strängar åt vänster till höger och mitt och trodde att det finns ett bättre sätt och hittade din kod med Regex. Kunde fisa med det för min webbplats ... Du har ingen aning om hur mycket det hjälpte. Tack så mycket Douglas !!

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.