Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Kennwort“ aus.
Zuletzt aktualisiert am
1. Mai 2021
Hinweis:
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
Widget „Überprüfung - Kennwort“
Das Spry-Widget „Überprüfung - Kennwort“ ist ein Kennworttextfeld, mit dem Sie Kennwortregeln (wie Anzahl und Typ der zu verwendenden Zeichen) anwenden können. Das Widget gibt in Abhängigkeit von der Benutzereingabe Warn- oder Fehlermeldungen aus.
Hinweis:
Sie sollten mit Spry-Überprüfungswidgets vertraut sein, bevor Sie das Kennwortwidget verwenden. Wenn dies noch nicht der Fall ist, sollten Sie zunächst die Informationen unter Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“ lesen, oder eine andere Übersicht über das Überprüfungs-Widget. Dieser Überblick enthält nicht alle Grundkonzepte von Überprüfungswidgets.
Im folgenden Beispiel ist ein Widget vom Typ „Überprüfung - Kennwort“ in verschiedenen Zuständen dargestellt:
A. Kennwortwidget, Zustand für Mindestanzahl von Zeichen B. Kennwortwidget, Zustand für Höchstanzahl von Zeichen C. Kennwortwidget, Zustand „Erforderlich“
Das Widget „Überprüfung - Kennwort“ beinhaltet mehrere Zustände (z. B. „Gültig“, „Ungültig“, „Zeichen min.“ usw.). Sie können die Eigenschaften für diese Zustandswerte ändern, indem Sie je nach gewünschtem Überprüfungsergebnis die entsprechende CSS-Datei („SpryValidationPassword.css“) bearbeiten. Mit einem Widget vom Typ „Überprüfung - Kennwort“ können Eingabedaten zu unterschiedlichen Zeitpunkten überprüft werden, z. B. wenn der Besucher der Website auf eine Stelle außerhalb des Textfelds klickt, Text eingibt oder das Formular sendet.
Anfangszustand
Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Zustand „Fokus“
Der Benutzer setzt die Einfügemarke in das Widget.
Zustand „Gültig“
Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden.
Zustand „Ungültige Stärke“
Der Benutzer gibt im Feld Text ein, der nicht den Kriterien für die Kennwortstärke entspricht. (Wenn Sie beispielsweise festgelegt haben, dass ein Kennwort mindestens zwei Großbuchstaben enthalten muss und das eingegebene Kennwort keinen oder nur einen Großbuchstaben enthält.)
Erforderlich-Zustand
Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein.
Zustand „Zeichen min.“
Der Benutzer gibt im Textfeld für das Kennwort weniger Zeichen als die erforderliche Mindestanzahl ein.
Zeichen max.-Zustand
Der Benutzer gibt im Textfeld für das Kennwort mehr Zeichen als die zulässige Höchstanzahl ein.
Eine ausführliche Erläuterung der Funktionsweise von Widgets des Typs „Überprüfung - Kennwort“ sowie zusätzliche Informationen zur Widget-Struktur finden Sie unter www.adobe.com/go/learn_dw_sprypassword_de.
Widget „Überprüfung - Kennwort“ einfügen und bearbeiten
Widget „Überprüfung - Kennwort“ einfügen
-
-
Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Hinweis:
Sie können Widgets vom Typ „Überprüfung - Kennwort“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Zustand „Erforderlich“ eines Widgets vom Typ „Überprüfung - Kennwort“ ändern
Alle Widgets vom Typ „Überprüfung - Kennwort“, die Sie mit Dreamweaver einfügen, erfordern bei der Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können das Ausfüllen von Textfeldern für Kennwörter jedoch auch als optional konfigurieren.
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das Kontrollkästchen „Erforderlich“.
Widgetstatus in der Entwurfsansicht anzeigen
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü „Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen möchten, wählen Sie die Option „Gültig“.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.
-
Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die entsprechende blaue Registerkarte klicken.
-
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur
Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds für das Kennwort klickt.
Ändern
Überprüfung erfolgt, wenn der Benutzer Text im Textfeld für das Kennwort ändert.
OnSubmit
Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist standardmäßig ausgewählt und kann nicht deaktiviert werden.
Kennwortstärke festlegen
Kennwortstärke bezeichnet den Grad, in dem Kombinationen bestimmter Zeichen den Anforderungen an ein im Textfeld eingegebenes Kennwort entsprechen. Wenn Sie beispielsweise ein Formular erstellt haben, in dem Benutzer ein Kennwort festlegen, empfiehlt es sich unter Umständen den Benutzern vorzuschreiben, im Kennwort eine bestimmte Anzahl von Großbuchstaben, Sonderzeichen usw. zu verwenden.
Hinweis:
Standardmäßig sind für das Kennwortwidget keine der verfügbaren Optionen festgelegt.
Zeichen min./Zeichen max.
Gibt die Mindest- und Höchstanzahl von Zeichen an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Buchstaben min./Buchstaben max.
Gibt die Mindest- und Höchstanzahl von Buchstaben (a, b, c usw.) an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Zahlen min./Zahlen max.
Gibt die Mindest- und Höchstanzahl von Ziffern (1, 2, 3 usw.) an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Großbuchstaben min./Großbuchstaben max.
Gibt die Mindest- und Höchstanzahl von Großbuchstaben (A, B, C usw.) an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Sonderzeichen min./Sonderzeichen max.
Gibt die Mindest- und Höchstanzahl von Sonderzeichen (!, @, # usw.) an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Wenn Sie eine der oben aufgeführten Optionen leer lassen, überprüft das Widget nicht auf dieses Kriterium. Wenn Sie z. B. die Optionen für die Höchst- und Mindestanzahl von Ziffern leer lassen, überprüft das Widget nicht auf Ziffern im Kennwort.
Klicken Sie auf die blaue Registerkarte des Widgets „Überprüfung - Kennwort“, um es auszuwählen.
Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschten Optionen fest. Die jeweilige Anzahl, die Sie in den entsprechenden Optionsfeldern eingeben, stellt die für das Widget erforderliche Anzahl von Zeichen dar, damit die Überprüfung erfolgreich ist. Wenn Sie z. B. im Feld „Zeichen min.“ den Wert „8“ eingeben, ist die Überprüfung nur erfolgreich, wenn im Textfeld für das Kennwort mindestens acht Zeichen eingegeben werden.
Widget „Überprüfung - Kennwort“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an dem Widget „Überprüfung - Kennwort“ vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den CSS-Code für das Widget „Überprüfung - Kennwort“ ändern, um den gewünschten Stil zu erhalten. Eine ausführliche Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprypassword_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationPassword.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Kennwort“ erstellen, speichert Dreamweaver die Datei „SpryValidationPassword.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Hinweis:
Sie können die CSS-Regeln für das Widget „Überprüfung - Kennwort“ entweder schnell und einfach in der zugehörigen CSS-Datei oder im Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Stil für Widgets vom Typ „Überprüfung - Kennwort“ zuweisen (allgemeine Anweisungen)
-
Öffnen Sie die Datei „SpryValidationPassword.css“.
-
Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Kennwort“ ändern möchten, bearbeiten Sie die Regel input.passwordRequiredState in der Datei „SpryValidationPassword.css“.
-
Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei „SpryValidationPassword.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
Textstil von Fehlermeldungen für das Widget „Überprüfung - Kennwort“ zuweisen
Fehlermeldungen für das Widget „Überprüfung - Kennwort“ werden standardmäßig mit einem 1 Pixel breiten roten durchgehenden Rahmen um den Text angezeigt.
-
Um den Textstil für Fehlermeldungen des Widgets „Überprüfung - Kennwort“ zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern dann die Standardeigenschaften oder fügen benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu.
Zu ändernder Text
Relevante CSS-Regel
Relevante zu ändernde Eigenschaften
Text der Fehlermeldung
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg color: #CC3333; border: 1px solid #CC3333;
Hintergrundfarben des Widgets „Überprüfung - Kennwort“ ändern
-
Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Kennwort“ zu ändern, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie die Standardfarbwerte.
Zu ändernde Farbe
Relevante CSS-Regel
Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im gültigen Zustand
.passwordValidState input, input.passwordValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im ungültigen Zustand
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es den Fokus hat
.passwordFocusState input, input.passwordFocusState background-color: #FFFFCC;
