Ellenőrizze a jelszó erősségét a JavaScript és a reguláris kifejezések segítségével

Ellenőrizze a jelszó erősségét a JavaScript és a reguláris kifejezések segítségével

Néhány kutatást folytattam annak érdekében, hogy jó példát találjak egy Jelszóerősség-ellenőrzőre, amely használja JavaScript és Reguláris kifejezések (Regex). A munkámban lévő alkalmazásban visszaküldjük a jelszó erősségének ellenőrzését, és ez elég kényelmetlen a felhasználóink ​​számára.

Mi a Regex?

A reguláris kifejezés egy olyan karaktersorozat, amely meghatározza a keresési mintát. Az ilyen mintákat általában karakterlánc-kereső algoritmusok használják talál or megtalálni és pótolni karakterláncokon végzett műveletek vagy bemeneti ellenőrzés. 

Ez a cikk biztosan nem arra szolgál, hogy rendszeres kifejezéseket tanítson. Csak tudd, hogy a reguláris kifejezések használatának képessége abszolút leegyszerűsíti a fejlődést, amikor mintákat keres a szövegben. Fontos megjegyezni azt is, hogy a legtöbb fejlesztési nyelv optimalizálta a rendszeres kifejezés használatát ... tehát a karakterláncok lépésenkénti elemzése és keresése helyett a Regex általában sokkal gyorsabb mind a kiszolgáló, mind az ügyfél oldalon.

Elég sokat kerestem az interneten, mire megtaláltam egy példa néhány nagyszerű reguláris kifejezés közül, amelyek hosszúság, karakterek és szimbólumok kombinációját keresik. A kód azonban kissé túlzott volt az ízlésemnek és a .NET-re szabott. Tehát egyszerűsítettem a kódot, és JavaScript-be tettem. Ez lehetővé teszi a jelszó erősségének valós idejű ellenőrzését az ügyfél böngészőjében, mielőtt visszaküldené ... és visszajelzést ad a felhasználónak a jelszó erősségéről.

Írja be a jelszót

A billentyűzet minden egyes löketével tesztelik a jelszót a reguláris kifejezéssel szemben, majd visszajelzést adnak a felhasználónak az alatta lévő tartományban.




Írja be a jelszót

Itt a kódex

A Reguláris kifejezések fantasztikus munkát végez a kód hosszának minimalizálása érdekében:

  • További karakterek - Ha a hossz kevesebb, mint 8 karakter.
  • Gyenge - Ha a hossz kevesebb, mint 10 karakter, és nem tartalmaz szimbólumok, nagybetűk, szöveg kombinációját.
  • közepes - Ha a hossza legalább 10 karakter, és szimbólumok, nagybetűk, szöveg kombinációja van.
  • Erős - Ha a hossza legalább 14 karakter, és szimbólumok, nagybetűk, szöveg kombinációja van.

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

A jelszó igénylés keményítése

Alapvető fontosságú, hogy ne csak a Javascripten belül érvényesítse a jelszó felépítését. Ez lehetővé tenné, hogy bárki, aki rendelkezik böngészőfejlesztő eszközökkel, megkerülje a szkriptet, és bármilyen jelszót használjon, amelyet szeretne. A jelszó erősségének ellenőrzéséhez MINDIG egy szerveroldali ellenőrzést kell használnia, mielőtt azt a platformján tárolná.

34 Comments

  1. 1
  2. 2

    KÖSZÖNÖM! KÖSZÖNÖM! KÖSZÖNÖM! 2 hete hülyéskedtem más webhelyek átkozott jelszóerősségi kódjával és kihúztam a hajam. A tiéd rövid, pontosan úgy működik, ahogy szeretném, és ami a legjobb, a javascript kezdő számára könnyen módosítható! Szerettem volna megragadni az erősségre vonatkozó ítéletet, és nem hagyni, hogy az űrlap feltöltse a felhasználó jelszavának tényleges frissítését, hacsak nem felel meg az erőpróbának. Mások kódja túl bonyolult volt, nem működött megfelelően, vagy valami más. Szeretlek! XXXXX

  3. 4

    hála istennek azokért az emberekért, akik valóban tudnak megfelelően írni egy darab kódot.
    Ugyanolyan tapasztalata volt, mint Janisnak.

    Ez rögtön a dobozból működik, ami tökéletes olyan emberek számára, mint én, akik nem tudják javascript kódolni!

  4. 5
  5. 6

    Szia, először is sok köszönet az erőfeszítésekért, megpróbáltam ezt használni az Asp.net-lel, de nem sikerült, én használom

    címke helyett, és nem működött, van valami javaslat ?!

  6. 7

    Nisreen-re: a kiemelt mezőben lévő kód nem működik kivágással. Az egyetlen idézet elrontott. A demonstrációs link kódja azonban rendben van.

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

    A „P @ s $ w0rD” erősen jelenik meg, bár egy szótári támadással meglehetősen gyorsan feltörne ...
    Ahhoz, hogy egy ilyen funkciót alkalmazzunk egy szakmai megoldásra, fontosnak tartom ezt az algoritmust ötvözni egy szótárellenőrzéssel.

  11. 12
  12. 13

    Köszönöm ezt a kis kódot, most már használhatom a jelszó erősségének tesztelésére, amikor a látogatóim. Megadják a jelszavukat,

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

    valaki meg tudja mondani, miért nem működött az enyém ..

    átmásoltam az összes kódot, és beillesztettem a notepad ++ fájlba, de egyáltalán nem működik?
    kérlek segíts..

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

    Ez a fajta „erőellenőrző” nagyon veszélyes útra tereli az embereket. Értékeli a karakterek sokféleségét a jelszó hosszánál, ami azt eredményezi, hogy a rövidebb, változatosabb jelszavakat erősebbnek, mint a hosszabb, kevésbé változatos jelszavakat értékeli. Ez egy tévedés, amely problémákat okoz a felhasználóknak, ha valaha komoly hackelési fenyegetéssel szembesülnek.

    • 25

      Nem értek egyet, Jordan! A példát egyszerűen a szkript példaként állítottuk elő. Ajánlom az embereknek, hogy egy jelszókezelő eszköz segítségével hozzanak létre független jelszavakat minden olyan webhelyhez, amely egyedülálló. Köszönöm!

  24. 26
  25. 27
  26. 28

    Nagyon köszönöm, hogy sokszor keresték ezt, de végül megkaptam a hozzászólását, és nagyon el vagyok ragadtatva. KÖSZÖNÖM

  27. 29
  28. 31

    Nagyra értékelem, hogy megosztod! Arra törekedtek, hogy növeljék a jelszó erősségét weboldalunkon, és ez úgy működött, ahogy szerettem volna. Nagyon szépen köszönöm!

  29. 33

    Élő megtakarító vagy! A karakterláncokat balra jobbra és középre elemeztem, és azt hittem, hogy van egy jobb módszer, és a Regex segítségével megtaláltam a kóddarabot. Tudtam bütykölni vele az oldalamon ... Fogalmad sincs, mennyit segített ez. Nagyon köszönöm Douglas !!

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.