Prüfen Sie die Qualität eines eingegebenen Passworts!

Was soll das Programm leisten?

Sie erstellen ein passendes Formular mit Eingabefeld für das Passwort und einen Checkbutton!
Sobald der Checkbutton angeklickt wird, prüft eine Funktion das eingegebene Passwort.
Natürlich können Sie auch zwei Eingabefelder zur Verfügung stellen und die Passwörter verdeckt in das Formular eingeben mit Sternchen (wenn Sie das entsprechende Formularfeld kennen)!
usw.

Überlegen Sie sich bitte zuerst ein Konzept!
  • Welche Eingabefelder gibt es?
  • Was muss man tun, damit die Prüfung startet? Button?
  • Wie wird die Qualität des Passworts angezeigt? Punktzahl? Prozent? Farbe?
  • ...

Welche Bedingungen muss das Passwort erfüllen?

Folgende Bedingungen sollten geprüft werden:
  • Länge > 10 Zeichen
  • Verwendung von Groß- und Kleinschreibung
  • Verwendung von Sonderzeichen
  • Verwendung von Zahlen

Gehen Sie schrittweise vor! Prüfen Sie im ersten Schritt einfach nur die Länge des eingegebenen Passworts. Anschließend können Sie Ihr Programm schrittweise um weitere Prüfungen erweitern.



Tipps

Sie benötigen für diese Aufgabe diverse Zeichenketten-Verarbeitungfunktionen, siehe ...

Wie ermittelt man die Länge des Passworts? ... .length

var zeichenkette = "lalala";
alert("Länge der Zeichenkette: " + zeichenkette.length );

Wie kann man ein einzelnes Zeichen aus einer Zeichenkette lesen? ... .charAt(i)

Wozu sollte man überhaupt einzelne Zeichen aus einer Zeichenkette auslesen?

Wenn Sie großgeschriebene Zeichen finden möchten, dann müssen Sie ein Zeichen nach dem anderen aus der Zeichenkette ansehen und entscheiden, ob es sich um ein großgeschriebenes Zeichen handelt. Das gleiche Verfahren gilt für kleingeschriebene Zeichen, Zahlen und Sonderzeichen!

Wie kann man jetzt ein Zeichen nach dem anderen aus der Zeichenkette herauslesen?

Sie verwenden eine Zählschleife mit Zähler i, die von 0 bis zur Länge-1 zählt. Sie können mit dem Zähler i auf jedes einzelne Zeichen der Zeichenkette zugreifen! Dafür müssen Sie es einfach nur wie folgt auslesen:
var einzelnesZeichen;
einzelnesZeichen = zeichenkette.charAt(i);
 
Wenn Sie anstelle von der Funktion charAt() die Funktion charCodeAt() verwenden erhalten Sie den so genannten ANSI-Code des Zeichens, welchen Sie benötigen für Ihre Prüfungen.
Zeichentabelle: http://www.code-knacker.de/ansi.htm
var ansiCode;
ansiCode = zeichenkette.charCodeAt(i);
Weitere Hinweise zur Verarbeitung von Zeichenketten:

Wie prüft man ein Zeichen auf Gross- bzw. Kleinschreibung?

Zur Prüfung auf Gross- und Kleinschreibung benötigen Sie eine ANSI-Tabelle (s.u.) und eine eigene Funktion, welche überprüft, ob der Code eines Zeichens im entsprechenden Bereich liegt, z.B. ...
var i; // Zaehler
 
// Großschreibung pruefen
var passwort = "9uzvg";
var ansiCode = passwort.charCodeAt(i);
 
if( ansiCode > 64 && ansiCode < 91 )
{
  alert("A-Z");
}
else
{
  alert("Irgend etwas anderes");
}
 

Wie kann man herausfinden, ob ein Zeichen ein Sonderzeichen ist?

Die Prüfung auf Sonderzeichen funktioniert im Prinzip ähnlich. Alles, was keine Zahl, kein Groß- und kein Kleinbuchstabe ist, ist ein Sonderzeichen! ;-)

Wie kann ich herausfinden, ob ein Zeichen eine Zahl ist?

Tipp: Sehen Sie nach, welcher Zeichenbereich der Ansi-Tabelle den Zahlen 0-9 entspricht!

Hilfestellung: Schrittweise Vorgehensweise! z.B. wie folgt

  1. Formular erstellen zur Eingabe des Passworts mit Püfbutton.
  2. Einfache Test-Funktion (z.B. alert("Hallo")) mit onclick einbinden. Dabei aufpassen, dass das Attribut "name" von Formular und Textfeld gut gewählt ist und sich ein brauchbarer Pfad zum Eingabewert ergibt, z.B. document.myForm.feld1.value.
  3. Eingabefeld auslesen (z.B. eingabe = document.myForm.textfeld1.value) bei Klicken des Buttons und Wert mittels alert in der Funktion ausgeben.
  4. Alle Zeichen der Zeichenkette in einer for-Schleife einzeln nacheinander ausgeben.
  5. Alle ANSI-Codes der Zeichenkette in der for-Schleife nacheinander ausgeben.
  6. Eine Prüfbedingung formulieren, z.B. if( ansiCode == 65 ) alert("Hallo");
  7. ...

Ein paar Links für Fortgeschrittene

Beispiele für Passwortchecker im Netz:





Und hier sehen Sie natürlich erst nach, wenn Sie selbst eine Lösung erarbeitet haben
oder nicht mehr weiter kommen!




Musterlösung 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Passwort Qualität</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
  <script type="text/javascript">
 
    // Funktion zur Ausgabe beliebiger Texte in ein div-Element
 
    function ausgabe( text )
    {
      document.getElementById("ausgabe").innerHTML = text;
    }
 
 
    // Funktion zur Längenbewertung des Passworts
 
    function laengenbewertung( pw )
    {
      // hier koennte auch eine genauere Punktevergabe statt finden
      // to do!
       alert("lb "  + pw.length);
       return( pw.length );
    }
 
 
    // Funktion zur Bewertung der Gross-/Kleinschreibung des Passworts
    // Für ein enthaltenes gross geschriebenes Zeichen geben wir 10 Punkte
    // Für ein enthaltenes klein geschriebenes Zeichen geben wir auch 10 Punkte
    // maximal also 20
 
    function grosskleinpruef( pw )
    {
        var gross  = false;
        var klein  = false;
        var punkte = 0;
 
        for (var i=0; i<pw.length; i++)
        {
            // ANSI-Code auslesen
            var ansiCode = pw.charCodeAt(i);
             //alert( "AnsiCode " + ansiCode);
 
            // Großschreibung pruefen
            if( ansiCode > 64 && ansiCode < 91 )
            {
                gross=true;
            }
 
            // Kleinschreibung pruefen
            if( ansiCode > 96 && ansiCode < 123)
            {
                klein=true;
            }
        }
 
        // Wurde ein grosses Zeichen gefunden? Dann +10 Punkte!
        if (gross==true)
        {
            punkte+=10;
        }
 
        // Wurde ein kleines Zeichen gefunden? Dann +10 Punkte!
        if (klein==true)
        {
            punkte+=10;
        }
 
        alert("gk " + punkte);
        return punkte;
    }
 
 
    // Funktion zur Bewertung der Zahlenverwendung im Passwort
 
    function zahlenpruef( pw )
    {
        var punkte=0;
        var zahlen=false;
 
        for (var i=0; i<pw.length; i++)
        {
            // ANSI-Code auslesen
            var ansiCode = pw.charCodeAt(i);
             //alert( "AnsiCode " + ansiCode);
 
            // Zahlen pruefen
            if( ansiCode > 47 && ansiCode < 59 )
            {
                zahlen=true;
            }
        }
 
        // Wurde eine Zahl gefunden? Dann +10 Punkte!
        if (zahlen==true)
        {
            punkte+=15;
        }
 
        alert("zp " + punkte);
        return punkte;
    }
 
 
    // Funktion für die Prüfung von Sonderzeichen
 
    function sonderzeichenpruef( pw )
    {
        var punkte=0;
        var sonderzeichen=false;
 
        for (var i=0; i<pw.length; i++)
        {
            // ANSI-Code auslesen
            var ansiCode = pw.charCodeAt(i);
             //alert( "AnsiCode " + ansiCode);
 
            // sonderzeichen pruefen
            if(      (ansiCode > 32 && ansiCode < 48)
                  && (ansiCode > 90 && ansiCode < 256)    )
            {
                sonderzeichen=true;
            }
        }
 
        // Wurde eine Zahl gefunden? Dann +10 Punkte!
        if (sonderzeichen==true)
        {
            punkte+=15;
        }
 
        alert("sz " + punkte);
        return punkte;
    }
 
 
    // Funktion für die Gesamtprüfung des Passworts
 
    function pruefung()
    {
      var punkte=0;
 
      // Prüfung der Eingabe Test-Ausgabe
      // ausgabe( document.pwpruef.eingabe.value );
 
      var passwort = document.pwpruef.eingabe.value;
 
      // Die vier Prüffunktionen geben alle eine Teilpunktzahl zurueck,
      // welche hier adddiert werden zu einer Gesamtpunktzahl.
      punkte =
               laengenbewertung(   passwort )
             + grosskleinpruef(    passwort )
             + sonderzeichenpruef( passwort )
             + zahlenpruef(        passwort );
 
      ausgabe( "Erreichte Punktzahl: " + punkte + " von 100" );
    }
 
 
  </script>
 
</head>
 
 
<body>
 
  <h1>Passwort Qualität</h1>
 
  <form name="pwpruef">
 
    <input type="text" name="eingabe" size="10" maxlength="20">
    <input
      type    = "button"
      name    = "pruefen"
      value   = "Prüfen"
      onclick = "pruefung()"
    >
 
  </form>
 
  <div id="ausgabe">
  </div>
 
 
</body>
 
</html>
 
 
Musterlösung 2
(Anfang einer Lösung mit nur einem Eingabefeld und Eventhandler onchange - müssen Sie noch selbst zum Ende bringen):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
 
  <title>Passwortprüfung</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
  <script type="text/javascript">
 
    function pruefung( eingabe )
    {
      var zeichenCode;
      var zahlvorhanden = false;
      var punkte=0;
 
      // alert( eingabe );
      for( var i=0; i<eingabe.length; i++ )
      {
        zeichenCode = eingabe.charCodeAt(i);
        // Zahlenprüfung
        if( zeichenCode > 47 && zeichenCode < 58 )
        {
          zahlvorhanden = true;
          alert("Zahl vorhanden");
        }
        // Großpruefung
        if( zeichenCode > 64 && zeichenCode < 91 )
        {
          alert("Grossbuchstabe vorhanden");
        }
        // Kleinpruefung
        if( zeichenCode > 96 && zeichenCode < 123 )
        {
          alert("Kleinbuchstabe vorhanden");
        }
        // Sonderzeichenpruefung
        if(    (zeichenCode > 122 && zeichenCode < 256)
            || (zeichenCode > 57 && zeichenCode < 65) )
        {
          alert("Sonderzeichen vorhanden");
        }
      }
 
      if( zahlvorhanden == true )
      {
        punkte=punkte+10;
      }
 
      alert(punkte);
    }
 
 
  </script>
 
</head>
 
 
 
<body>
 
  <form name="formular">
 
    <input
         type="text"
         name="pwpruef"
         size="20"
         maxlength="20"
         onchange="pruefung(this.value)"
    >
 
  </form>
 
</body>
 
</html>