Überprüfen Sie die Kennwortstärke mit JavaScript und regulären Ausdrücken

Überprüfen Sie die Kennwortstärke mit JavaScript und regulären Ausdrücken
Lesezeit: 2 Minuten

Ich habe einige Nachforschungen angestellt, um ein gutes Beispiel für einen Password Strength Checker zu finden, der verwendet wird JavaScript und Reguläre Ausdrücke (Regex). In der Anwendung bei meiner Arbeit machen wir einen Beitrag zurück, um die Passwortstärke zu überprüfen, und dies ist für unsere Benutzer ziemlich unpraktisch.

Was ist Regex?

Ein regulärer Ausdruck ist eine Folge von Zeichen, die ein Suchmuster definieren. Normalerweise werden solche Muster von String-Suchalgorithmen für verwendet finden or suchen und Ersetzen Operationen an Zeichenfolgen oder zur Eingabeüberprüfung. 

Dieser Artikel soll Ihnen definitiv keine regulären Ausdrücke beibringen. Sie müssen nur wissen, dass die Verwendung regulärer Ausdrücke Ihre Entwicklung bei der Suche nach Mustern im Text absolut vereinfacht. Es ist auch wichtig zu beachten, dass die meisten Entwicklungssprachen die Verwendung regulärer Ausdrücke optimiert haben. Anstatt Schritt für Schritt Zeichenfolgen zu analysieren und zu suchen, ist Regex in der Regel sowohl auf Server- als auch auf Clientseite viel schneller.

Ich habe ziemlich viel im Internet gesucht, bevor ich gefunden habe ein Beispiel von einigen großartigen regulären Ausdrücken, die nach einer Kombination aus Länge, Zeichen und Symbolen suchen. Der Code war jedoch für meinen Geschmack etwas übertrieben und auf .NET zugeschnitten. Also habe ich den Code vereinfacht und in JavaScript eingefügt. Auf diese Weise wird die Kennwortstärke in Echtzeit im Browser des Kunden überprüft, bevor sie zurückgesendet wird. Außerdem erhält der Benutzer ein Feedback zur Kennwortstärke.

Gib ein Passwort ein

Bei jedem Tastendruck wird das Kennwort anhand des regulären Ausdrucks getestet, und anschließend wird dem Benutzer in einem Bereich darunter eine Rückmeldung gegeben.




Passwort eingeben

Hier ist der Code

Der Reguläre Ausdrücke Machen Sie einen fantastischen Job, um die Länge des Codes zu minimieren:

  • Weitere Charaktere - Wenn die Länge unter 8 Zeichen liegt.
  • Schwach - Wenn die Länge weniger als 10 Zeichen beträgt und keine Kombination aus Symbolen, Großbuchstaben und Text enthält.
  • M - Wenn die Länge 10 Zeichen oder mehr beträgt und eine Kombination aus Symbolen, Großbuchstaben und Text enthält.
  • Stark - Wenn die Länge 14 Zeichen oder mehr beträgt und eine Kombination aus Symbolen, Großbuchstaben und Text enthält.

<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ärten Sie Ihre Passwortanfrage

Es ist wichtig, dass Sie nicht nur die Kennwortkonstruktion in Ihrem Javascript überprüfen. Dies würde es jedem mit Browser-Entwicklungstools ermöglichen, das Skript zu umgehen und ein beliebiges Passwort zu verwenden. Sie sollten IMMER eine serverseitige Überprüfung verwenden, um die Kennwortstärke zu überprüfen, bevor Sie sie auf Ihrer Plattform speichern.

29 Kommentare

  1. 1
  2. 2

    VIELEN DANK! VIELEN DANK! VIELEN DANK! Ich habe 2 Wochen lang mit verdammtem Passwort-Code von anderen Websites herumgespielt und mir die Haare ausgezogen. Ihre ist kurz, funktioniert genau so, wie ich es möchte, und das Beste ist, dass ein Javascript-Neuling sie leicht ändern kann! Ich wollte das Festigkeitsurteil erfassen und nicht zulassen, dass das Formular das Kennwort des Benutzers tatsächlich aktualisiert, es sei denn, es hat den Festigkeitstest erfüllt. Der Code anderer Leute war zu kompliziert oder funktionierte nicht richtig oder etwas anderes. Ich liebe dich! XXXXX

  3. 4

    Gott sei Dank für Leute, die tatsächlich einen Code richtig schreiben können.
    Hatte die gleiche Erfahrung wie Janis.

    Dies funktioniert sofort, was perfekt für Leute wie mich ist, die kein Javascript codieren können!

  4. 5
  5. 6

    Hallo, zunächst einmal vielen Dank für Ihre Bemühungen, ich habe versucht, dies mit Asp.net zu verwenden, aber es hat nicht funktioniert, ich verwende

    statt tag, und es hat nicht funktioniert, irgendwelche Vorschläge?!

  6. 7

    Zu Nisreen: Der Code im hervorgehobenen Feld funktioniert nicht mit einem Ausschneiden und Einfügen. Das einfache Zitat ist durcheinander. Der Code des Demonstrationslinks ist jedoch in Ordnung.

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

    "P @ s $ w0rD" zeigt sich stark, obwohl es mit einem Wörterbuchangriff ziemlich schnell geknackt würde ...
    Um eine solche Funktion für eine professionelle Lösung bereitzustellen, halte ich es für wichtig, diesen Algorithmus mit einer Wörterbuchprüfung zu kombinieren.

  11. 12
  12. 13

    Vielen Dank für diesen kleinen Code, mit dem ich jetzt meine Passwortstärke testen kann, wenn meine Besucher ihre Passwörter eingeben.

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

    kann jemand sagen, warum es bei mir nicht funktioniert hat ..

    Ich habe den gesamten Code kopiert und in Notepad ++ eingefügt, aber es funktioniert überhaupt nicht?
    Bitte hilf mir..

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

    Diese Art von „Kraftprüfer“ führt Menschen auf einen sehr gefährlichen Weg. Es bewertet die Zeichendiversität über die Passphrasenlänge und führt dazu, dass kürzere, vielfältigere Passwörter als stärker als längere, weniger vielfältige Passwörter eingestuft werden. Dies ist ein Irrtum, der Ihre Benutzer in Schwierigkeiten bringt, wenn sie jemals einer ernsthaften Hacking-Bedrohung ausgesetzt sind.

    • 25

      Ich bin nicht anderer Meinung, Jordan! Das Beispiel wurde einfach als Beispiel für das Skript ausgegeben. Meine Empfehlung für Personen ist die Verwendung eines Kennwortverwaltungstools, um unabhängige Passphrasen für jede Site zu erstellen, die für diese Site eindeutig ist. Vielen Dank!

  24. 26
  25. 27
  26. 28
  27. 29

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.