JS & jQuery: RegEx - String prüfen (Passwort)

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Donnerstag, 09. Februar 2023 um 15:45 Uhr (6/2023 Kalenderwoche)

geändert: Montag, 13. Februar 2023 um 09:19 Uhr (7/2023 Kalenderwoche)

Keywords: RegEx String prüfen Passwort regeln jquery

Kategorien: JavaScript,

Text:

RegEx: Passwort prüfen (JavaScript mit jQuery-Library)


Diese Regeln muss das Passwort einhalten:
1. Mindestlänge von 8 Zeichen;
2. Mindestens einen Groß- und einen Kleinbuchstaben;
3. Es sind keine Leerzeichen, Umlaute oder ß erlaubt;
4. Mindestens eine Ziffer oder eines der folgenden Sonderzeichen: - _ ( ) § @ ! #
5. Die maximale Länge beträgt 32 Zeichen;


Im Quellcode-Feld finden Sie die komplette Datei!

Quellcode:   

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8"/>
    <title>JS-Passwort-Prüfung</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1>Passwort: Prüfung mit JavaScript und jQuery</h1>
<script>
    /** Folgende JavaScript-Variablen werden später benötigt: */
    var labelBenutzerPasswortFirst = 'Passwort';
    var labelBenutzerPasswortSecond = 'Passwort wiederholen';
    var passwortMinimalLaenge = 8;
    var passwortRegexErlaubteZeichen = new RegExp(/[-_()§@!#]/s);
    var passwortRegularExpression = new RegExp(/^[a-zA-Z0-9-\_\(\)\§\@\!\#]{8,32}$/);
    document.write('<strong id="jsPlatzhalterPasswortHinweise">Bitte füllen ' +
        'Sie die beiden Passwortfelder!</strong><br><br>');
</script>
<div id="benutzer_passwort">
    <label for="benutzer_passwort_first">Passwort</label>
    <br>
    <input type="password" id="benutzer_passwort_first"
           name="person[benutzer][passwort][first]"/>

    <br>
    <br>

    <label for="benutzer_passwort_second">Passwort wiederholen</label>
    <br>
    <input type="password" id="benutzer_passwort_second"
           name="person[benutzer][passwort][second]"/>
</div>
<script>
    /** Feld-Umschalter von INPUT-Type "password" => "text" */
    document.write('<strong onclick="schalterTypePasswordZuText()" ' +
        'id="jsSchalterTypePasswordZuText" style="margin: 22px 0 0 7px; cursor: pointer"' +
        '>Passwortfelder in Klartext anzeigen</strong>')

    function schalterTypePasswordZuText() {
        let inputPasswortFirst = document.getElementById('benutzer_passwort_first');
        let inputPasswortSecond = document.getElementById('benutzer_passwort_second');
        if (inputPasswortFirst.type === 'password') {
            inputPasswortFirst.type = 'text';
            inputPasswortSecond.type = 'text';
            document.getElementById('jsSchalterTypePasswordZuText').innerText = 'Passworteingaben verbergen';
        } else {
            inputPasswortFirst.type = 'password';
            inputPasswortSecond.type = 'password';
            document.getElementById('jsSchalterTypePasswordZuText').innerText = 'Passworteingaben lesbar anzeigen';
        }//ENDE: else ==> if (inputPasswortFirst.type === 'password')
    }
</script>

<hr>
<details class="kasten" id="passwortRegelnImKasten">
    <summary title="Klicken zeigt die Regeln in einer Liste an.">Diese Regeln muss das Passwort einhalten...</summary>
    <ol>
        <li>Mindestlänge von 8 Zeichen;</li>
        <li>Mindestens einen Groß- und einen Kleinbuchstaben;</li>
        <li>Es sind keine Leerzeichen, Umlaute oder ß erlaubt;</li>
        <li>Mindestens eine Ziffer <strong>oder</strong> eines der folgenden Sonderzeichen:
            <strong>- _ ( ) § @ ! #</strong></li>
        <li>Die maximale Länge beträgt 32 Zeichen;</li>
    </ol>
</details>

<script>
    $(function () {
        $('input[name$="person[benutzer][passwort][first]').on('blur', function () {
            //alert('Inhalt: ' + document.getElementById('benutzer_passwort_first').value);
            this.type = 'password';
            checkPasswortfelder();
        }).focus(function () {
            this.type = "text";
            document.getElementById('passwortRegelnImKasten').open = 'open';
        });

        $('input[name$="person[benutzer][passwort][second]').on('blur', function () {
            //alert('Inhalt: ' + document.getElementById('benutzer_passwort_second').value);
            this.type = 'password';
            checkPasswortfelder();
        }).focus(function () {
            this.type = "text";
            document.getElementById('passwortRegelnImKasten').open = 'open';
        });
    });

    function checkPasswortfelder() {
        //alert('sdfasdf');
        let hinweisText = '';//labelBenutzerPasswortFirst + ' / ' + labelBenutzerPasswortSecond;
        let hinweisColor = 'red';
        let feldPasswortFirst = document.getElementById('benutzer_passwort_first');
        let feldPasswortSecond = document.getElementById('benutzer_passwort_second');
        let feldPasswortFirstValue = feldPasswortFirst.value = feldPasswortFirst.value.trim();//sofort trimmen!
        let feldPasswortSecondValue = feldPasswortSecond.value = feldPasswortSecond.value.trim();//sofort trimmen!
        if (feldPasswortFirstValue && feldPasswortSecondValue) {
            //Wenn beide gefüllt, dann folgendes prüfen...
            feldPasswortFirst.style.backgroundColor = '#FFDDDD';
            feldPasswortSecond.style.backgroundColor = '#FFDDDD';
            if (feldPasswortFirstValue.length < passwortMinimalLaenge) {
                hinweisText = 'Hinweis: Das Passwort muss mindestens ' +
                    passwortMinimalLaenge + ' Zeichen haben!';
            } else if (feldPasswortFirstValue !== feldPasswortSecondValue) {
                hinweisText = 'Fehler: Ihre eingegebenen Passwörter unterscheiden sich!';
            } else {
                // "passwortRegexErlaubteZeichen" und "passwortRegularExpression" wird oben gesetzt!
                if (!passwortRegularExpression.test(feldPasswortFirstValue)) {
                    hinweisText = 'Fehler: Sie haben nicht erlaubte Zeichen eingegeben!';
                } else if (!/[A-Z]/.test(feldPasswortFirstValue)) {
                    hinweisText = 'Fehler: Ihr Passwort muss mindestens einen Großbuchsten enthalten!';
                } else if (!/[a-z]/.test(feldPasswortFirstValue)) {
                    hinweisText = 'Fehler: Ihr Passwort muss mindestens einen Kleinbuchstaben enthalten!';
                } else if (!passwortRegexErlaubteZeichen.test(feldPasswortFirstValue)
                    && !/[0-9]/.test(feldPasswortFirstValue)) {
                    hinweisText = 'Fehler: Ihr Passwort muss mindestens eine Zahl ' +
                        'oder eines der Sonderzeichen enthalten!';
                } else {
                    feldPasswortFirst.style.backgroundColor = '#FFFFFF';
                    feldPasswortSecond.style.backgroundColor = '#FFFFFF';
                    hinweisColor = 'black';
                    hinweisText = 'Das Format Ihres Passwortes scheint korrekt zu sein';
                }//ENDE: else ==> if ()
            }//ENDE: else ==> if()
        }
        if (hinweisText !== '') {
            document.getElementById('jsPlatzhalterPasswortHinweise').style.display = 'block';
            document.getElementById('jsPlatzhalterPasswortHinweise').style.color = hinweisColor;
            document.getElementById('jsPlatzhalterPasswortHinweise').style.margin = '22px 0 0 7px';
            document.getElementById('jsPlatzhalterPasswortHinweise').innerHTML = hinweisText;
        } else {
            document.getElementById('jsPlatzhalterPasswortHinweise').style.display = 'none';
            document.getElementById('jsPlatzhalterPasswortHinweise').innerText = 'Die beiden Passwortfelder füllen...';
        }//ENDE: else ==> if (hinweise !== '')
    }//ENDE: function checkPasswortfelder()

</script>