Viele Websites, die Anmeldeinformationen erfordern, erzwingen eine Sicherheitseinstellung, die häufig als Anforderungen an die Kennwortkomplexität bezeichnet wird. Diese Anforderungen stellen sicher, dass Benutzerkennwörter ausreichend sicher sind und nicht leicht geknackt werden können. Was macht ein sicheres Passwort aus? Nun, das hängt davon ab, wen Sie fragen. Zu den traditionellen Faktoren, die zur Stärke eines Passworts beitragen, gehören jedoch seine Länge, Komplexität und Unvorhersehbarkeit. Um die Passwortsicherheit zu gewährleisten, verlangen viele Websites, dass Benutzerpasswörter zusätzlich zu einer bestimmten Länge auch alphanumerisch sind. In diesem Tutorial erstellen wir ein Formular, das dem Benutzer Live-Feedback darüber gibt, ob sein Passwort die von uns festgelegten Komplexitätsanforderungen ausreichend erfüllt. Bevor wir beginnen, werfen wir einen ersten Blick darauf, wie unser Endprodukt aussehen wird (klicken Sie für eine Demo):

Bitte beachten Sie: Der Zweck dieses Tutorials besteht darin, zu zeigen, wie ein einfaches Skript mit Javascript und jQuery geschrieben werden kann, um Anforderungen an die Passwortkomplexität durchzusetzen. Bei Bedarf können Sie dem Skript zusätzliche Anforderungen hinzufügen. Beachten Sie jedoch, dass die Formularvalidierung (server- und clientseitig), die Formularübermittlung und andere Themen in diesem Beispiel nicht behandelt werden.

Schritt 1: Starter-HTML

Zuerst möchten wir unseren grundlegenden HTML-Startercode erhalten. Wir verwenden Folgendes:

Schritt 2: HTML erstellen

Fügen wir nun das Markup hinzu, das für unser Formular verwendet wird. Wir werden unsere Formularelemente zur besseren Struktur und Organisation in Listenelemente einschließen.

Passwortüberprüfung

Hier ist eine Erklärung des Codes, den wir verwendet haben:

• span-Elemente – diese werden für die visuelle Gestaltung unserer Eingabeelemente verwendet (wie Sie später im CSS sehen werden)
• type=”password” – Dies ist ein HTML5-Attribut für Formularelemente. In unterstützten Browsern werden die Zeichen in diesem Feld durch schwarze Punkte ersetzt, wodurch das eigentliche Passwort auf dem Bildschirm ausgeblendet wird.

Folgendes haben wir bisher:

Schritt 3: HTML-Feld mit Passwortinformationen

Fügen wir nun den HTML-Code hinzu, der den Benutzer darüber informiert, welche Komplexitätsanforderungen erfüllt werden. Dieses Feld ist standardmäßig ausgeblendet und erscheint nur, wenn das Feld „Passwort“ im Fokus ist.

Jedes Listenelement erhält ein bestimmtes ID-Attribut. Diese IDs werden verwendet, um auf jede Komplexitätsanforderung abzuzielen und dem Benutzer anzuzeigen, ob die Anforderung erfüllt wurde oder nicht. Außerdem wird jedes Element als „gültig“ gestaltet, wenn das Passwort des Benutzers die Anforderung erfüllt, oder als ungültig, wenn er sie nicht erfüllt (wenn das Eingabefeld leer ist, wurde keine der Anforderungen erfüllt; daher die Standardklasse „ ungültig”). Folgendes haben wir bisher:

Schritt 4: Hintergrundstil erstellen

Wir werden unseren Seitenelementen ein grundlegendes Styling geben. Hier ist eine Übersicht darüber, was wir in unserem CSS tun werden:

• Fügen Sie eine Hintergrundfarbe hinzu – ich habe #EDF1F4 verwendet
• Fügen Sie ein Hintergrundbild mit Textur hinzu (erstellt in Photoshop)
• Richten Sie unseren Schriftartenstapel ein – Wir verwenden einen schönen serifenlosen Schriftartenstapel
• Einige Browser-Standardeinstellungen entfernen/ändern

body { Hintergrund:#edf1f4 url(bg.jpg); Schriftfamilie: „Segoe UI“, Candara, „Bitstream Vera Sans“, „DejaVu Sans“, „Bitstream Vera Sans“, „Trebuchet MS“, Verdana, „Verdana Ref“, serifenlos; Schriftgröße:16px; Farbe:#444; } ul, li { margin:0; Polsterung:0; Listenstiltyp:none; }

Schritt 5: Hintergrundstil erstellen

Jetzt gestalten wir unseren Hauptcontainer und zentrieren ihn auf der Seite. Wir werden auch einige Stile auf unser H1-Tag anwenden. #container { width:400px; Polsterung:0px; Hintergrund:#fefefe; Rand:0 automatisch; Grenze:1px fest #c4cddb; border-top-color:#d3dbde; border-bottom-color:#bfc9dc; box-shadow:0 1px 1px #ccc; Randradius:5px; Position:relativ; } h1 { margin:0; Polsterung:10px 0; Schriftgröße:24px; text-align:center; Hintergrund:#eff4f7; border-bottom:1px solid #dde0e7; box-shadow:0 -1px 0 #fff inset; Randradius:5px 5px 0 0; /* sonst bekommen wir einige ungeschnittene Ecken mit Container-Div */ text-shadow:1px 1px 0 #fff; } Es ist wichtig zu beachten, dass wir unserem H1-Tag an seinen beiden oberen Ecken einen Randradius geben müssen. Andernfalls überlappt die Hintergrundfarbe von H1 die abgerundeten Ecken des übergeordneten Elements (#container) und sieht folgendermaßen aus:

Durch Hinzufügen des Randradius zum H1-Element wird sichergestellt, dass unsere oberen Ecken abgerundet bleiben. Folgendes haben wir bisher:

Schritt 6: CSS-Stile für das Formular

Lassen Sie uns nun unsere verschiedenen Formularelemente formatieren, beginnend mit den Listenelementen innerhalb des Formulars: form ul li { margin:10px 20px; } form ul li:last-child { text-align:center; Rand:20px 0 25px 0; Wir haben den :last-child-Selektor verwendet, um das letzte Element in der Liste (Schaltfläche) auszuwählen und ihm etwas mehr Abstand zu geben. (Beachten Sie, dass dieser Selektor in einigen älteren Browsern nicht unterstützt wird). Als nächstes gestalten wir unsere Eingabeelemente: input { padding:10px 10px; border:1px solid #d5d9da; Randradius:5px; box-shadow: 0 0 5px #e8e9eb Einschub; Breite:328px; /* 400 (#container) – 40 (li-Ränder) – 10 (span paddings) – 20 (input paddings) – 2 (input borders) */ font-size:1em; Umriss:0; /* Webkit-Fokusstile entfernen */ } input:focus { border:1px solid #b9d4e9; border-top-color:#b6d5ea; border-bottom-color:#b8d4ea; box-shadow:0 0 5px #b9d4e9; Beachten Sie, dass wir die Breite unseres Eingabeelements berechnet haben, indem wir die Breite des #Containers (400 Pixel) genommen und die auf die übergeordneten Elemente der Eingabe angewendeten Ränder, Abstände und Rahmen subtrahiert haben. Wir haben auch die Eigenschaft „outline“ verwendet, um die standardmäßigen WebKit-Fokusstile zu entfernen. Zuletzt wenden wir einige Stile auf unsere anderen Formularelemente an: label { color:#555; } #container span { Hintergrund:#f6f6f6; Polsterung: 3px 5px; Bildschirmsperre; Randradius:5px; margin-top:5px; } Jetzt haben wir etwas, das so aussieht:

Schritt 7: Schaltflächenstile

Jetzt gestalten wir unser Knopfelement. Wir verwenden einige CSS3-Stile, damit Benutzer mit neueren Browsern ein besseres Erlebnis haben. Wenn Sie nach einer großartigen Ressource zum Erstellen von Hintergrundverläufen in CSS3 suchen, schauen Sie sich diese an Ultimativer CSS-Verlaufsgenerator. Schaltfläche {Hintergrund: #57a9eb; /* Alte Browser */ Hintergrund: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */ Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#57a9eb), Farbstopp(100%,#3a76c4)); /* Chrome,Safari4+ */ Hintergrund: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */ Hintergrund: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */ Hintergrund: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */ Hintergrund: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=”#57a9eb”, endColorstr=”#3a76c4″,GradientType=0 ); /* IE6-9 */ border:1px solid #326fa9; border-top-color:#3e80b1; border-bottom-color:#1e549d; Farbe:#fff; text-shadow:0 1px 0 #1e3c5e; Schriftgröße:.875em; Polsterung: 8px 15px; Breite: 150 Pixel; Randradius:20px; box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset; } button:active { Hintergrund: #3a76c4; /* Alte Browser */ Hintergrund: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */ Hintergrund: -webkit-gradient(linear, links oben, links unten, Farbstopp(0%,#3a76c4), Farbstopp(100%,#57a9eb)); /* Chrome,Safari4+ */ Hintergrund: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */ Hintergrund: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */ Hintergrund: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */ Hintergrund: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=”#3a76c4″, endColorstr=”#57a9eb”,GradientType=0 ); /* IE6-9 */ box-shadow:none; text-shadow:0 -1px 0 #1e3c5e; }

Schritt 8: Passwort-Informationsfeld

Jetzt gestalten wir das Feld, das Benutzer darüber informiert, ob sie die Passwortanforderungen erfüllen. Zuerst formatieren wir das enthaltende Element (#pswd_info). #pswd_info { position:absolute; unten:-75px; unten: -115px\9; /* IE-spezifisch */ right:55px; Breite:250px; Polsterung:15px; Hintergrund:#fefefe; Schriftgröße:.875em; Randradius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; } Jetzt fügen wir dem H4-Element etwas Stil hinzu: #pswd_info h4 { margin:0 0 10px 0; Polsterung:0; Schriftstärke:normal; } Zuletzt verwenden wir den CSS-Selektor ::before, um ein „nach oben zeigendes Dreieck“ hinzuzufügen. Dies ist ein geometrisches Zeichen, das mithilfe der entsprechenden UNICODE-Entität eingefügt werden kann. Normalerweise würden Sie in HTML die HTML-Entität des Zeichens (▲) verwenden. Da wir es jedoch in CSS hinzufügen, müssen wir den UNICODE-Wert (25B2) verwenden, dem ein Backslash vorangestellt ist. #pswd_info::before { content: “\25B2”; Position:absolut; oben:-12px; links:45 %; Schriftgröße:14px; Zeilenhöhe:14px; Farbe:#ddd; text-shadow:none; Bildschirmsperre; } Jetzt haben wir Folgendes:

Schritt 9: Gültige und ungültige Zustände

Fügen wir unseren Anforderungen einige Stile hinzu. Wenn die Anforderung erfüllt ist, vergeben wir die Klasse „gültig“. Wenn es nicht erfüllt ist, erhält es die Klasse „ungültig“ (Standardklasse). Für die Symbole verwende ich zwei 16×16 Pixel große Symbole von Seiden-Icon-Set. .invalid { background:url(../images/invalid.png) no-repeat 0 50 %; padding-left:22px; Zeilenhöhe:24px; Farbe:#ec3f41; } .valid { background:url(../images/valid.png) no-repeat 0 50 %; padding-left:22px; Zeilenhöhe:24px; Farbe:#3a7d34; } Da wir die JavaScript-Funktionalität nicht integriert haben, die die Klassen „gültig“ und „ungültig“ dynamisch ändert, werden alle Anforderungen als ungültig angezeigt (wir werden dies später ändern). Folgendes haben wir bisher:

Verstecke die Box

Nachdem wir nun alles genau so gestaltet haben, wie wir es möchten, werden wir das Feld mit den Passwortinformationen ausblenden. Wir schalten die Sichtbarkeit für den Benutzer mithilfe von JavaScript um. Fügen wir also die folgende Regel hinzu: #pswd_info { display:none; }

Schritt 10: Das Zielfernrohr erfassen

Folgendes wollen wir mit unserem Skript erreichen:

• Wenn das Passwortfeld ausgewählt ist (:focus), zeigen Sie es an
• Überprüfen Sie jedes Mal, wenn der Benutzer ein neues Zeichen in das Passwortfeld eingibt, ob dieses Zeichen eine der folgenden Passwortkomplexitätsregeln erfüllt:
  • Mindestens ein Buchstabe
  • Mindestens ein Großbuchstabe
  • Mindestens eine Nummer
  • Mindestens acht Zeichen lang
• Wenn dies der Fall ist, markieren Sie diese Regel als „gültig“.
• Wenn dies nicht der Fall ist, markieren Sie die Regel als „ungültig“.
• Wenn das Passwortfeld nicht ausgewählt ist („:blur“), blenden Sie es aus

Schritt 11: jQuery-Setup einrichten

Zuerst müssen wir jQuery zu unserer Seite hinzufügen. Wir verwenden die gehostete Version. Wir möchten auch auf unsere Datei „script.js“ verlinken, in die wir den Code schreiben, der für unseren Passwort-Verifizierungstest benötigt wird. Fügen Sie also Folgendes zu Ihrem -Tag hinzu: In unserer Datei „script.js“ beginnen wir mit einem grundlegenden jQuery-Startercode für unser Skript: $(document).ready(function() { //code hier });

Schritt 12: Einrichten der Ereignisauslöser

Im Wesentlichen haben wir drei Ereignisse, auf die wir achten werden:

1. „Keyup“ im Passwort-Eingabefeld
   (wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt)
2. „Konzentrieren“ Sie sich auf das Passwort-Eingabefeld
   (wird immer dann ausgelöst, wenn das Passwortfeld vom Benutzer ausgewählt wird)
3. „Unschärfe“ im Passwort-Eingabefeld
   (wird immer dann ausgelöst, wenn das Passwortfeld nicht ausgewählt ist)

Wie Sie sehen, befinden sich alle Ereignisse, auf die wir warten, im Passwort-Eingabefeld. In diesem Beispiel wählen wir alle Eingabefelder aus, deren Typ dem Passwort entspricht. jQuery ermöglicht es uns auch, diese Ereignisse miteinander zu „verketten“, anstatt jedes einzelne einzugeben. Anstatt beispielsweise Folgendes einzugeben: $(‘input[type=password]’).keyup(function() { // Keyup-Ereigniscode hier }); $(‘Eingabe[type=password]’).focus(function() { // Code hier fokussieren }); $(‘Eingabe[type=password]’).blur(function() { // Code hier verwischen }); Wir können alle Ereignisse miteinander verketten und Folgendes eingeben: $(‘input[type=password]’).keyup(function() { // Keyup-Code hier }).focus(function() { // Fokuscode hier }).blur(function() { // Code hier verwischen }); Mit diesem Wissen erstellen wir also unseren Code, der unser Passwort-Informationsfeld ein- oder ausblendet, je nachdem, ob das Passwort-Eingabefeld vom Benutzer ausgewählt wurde oder nicht: $(‘input[type=password]’).keyup(function() { // Keyup-Code hier }).focus(function() { $(‘#pswd_info’).show(); }).blur(function() { $(‘#pswd_info’ ).verstecken(); }); Sie werden nun feststellen, dass durch Klicken in das Passwort-Eingabefeld das Passwort-Informationsfeld sichtbar wird. Wenn Sie außerhalb des Passwort-Eingabefelds klicken, wird das Passwort-Informationsfeld ebenfalls ausgeblendet.

Schritt 13: Überprüfung der Komplexitätsregeln

Alles, was wir jetzt noch tun müssen, ist, dass das Skript den Wert im Passwortfeld jedes Mal überprüft, wenn ein neues Zeichen eingegeben wird (mithilfe des „keyup“-Ereignisses). Also, innerhalb der $(‘Eingabe[type=password]’).keyup-Funktion fügen wir den folgenden Code hinzu: // Passwortvariable festlegen var pswd = $(this).val(); Dadurch wird eine Variable namens „pswd“ eingerichtet, die bei jedem Keyup-Ereignis den aktuellen Passwortfeldwert speichert. Wir werden diesen Wert bei der Überprüfung jeder unserer Komplexitätsregeln verwenden.

Validierung der Länge

Fügen wir nun innerhalb derselben Keyup-Funktion Folgendes hinzu: // Länge validieren if ( pswd.length < 8 ) { $('#length').removeClass('valid').addClass('invalid'); } else { $('#length').removeClass('invalid').addClass('valid'); } Dadurch wird überprüft, ob die Länge des aktuellen Passwortwerts kleiner als 8 Zeichen ist. Wenn dies der Fall ist, handelt es sich um eine „ungültige“ Klasse. Wenn es länger als 8 Zeichen ist, erhält es eine „gültige“ Klasse.

Validierung mit regulären Ausdrücken

Wie Sie oben gesehen haben, haben wir einfach eine if/else-Anweisung, die prüft, ob die Komplexitätsanforderung erfüllt wurde. Wenn die Komplexitätsanforderung erfüllt ist, geben wir seiner ID im Passwortfeld die Klasse „gültig“. Wenn es nicht erfüllt ist, erhält es die Klasse „ungültig“. Für den Rest unserer Anforderungen müssen wir reguläre Ausdrücke verwenden, um die Komplexitätsregeln zu testen. Fügen wir also Folgendes hinzu: //Validieren Sie den Buchstaben, wenn ( pswd.match(/[A-z]/) ) { $(‘#letter’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#letter’).removeClass(‘valid’).addClass(‘invalid’); } //Großbuchstaben validieren, wenn ( pswd.match(/[A-Z]/) ) { $(‘#capital’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#capital’).removeClass(‘valid’).addClass(‘invalid’); } //Zahl validieren if ( pswd.match(/\d/) ) { $(‘#number’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#number’).removeClass(‘valid’).addClass(‘invalid’); } Hier ist eine Erklärung der drei von uns verwendeten if/else-Anweisungen:

[A-z]
Dieser Ausdruck prüft, ob mindestens ein Buchstabe von A bis Z (Großbuchstaben) oder von a bis z (Kleinbuchstaben) eingegeben wurde
[A-Z]
Dieser Ausdruck prüft, ob mindestens ein Großbuchstabe eingegeben wurde. \d Dadurch wird geprüft, ob alle Ziffern 0 bis 9 vorhanden sind

Schritt 14: Testen Sie es

Das ist alles dazu! Wenn Sie möchten, können Sie weitere hinzufügen. Sie könnten weitere Komplexitätsregeln hinzufügen, Sie könnten eine Übermittlungsmethode hinzufügen oder Sie könnten alles hinzufügen, was Sie sonst noch für notwendig halten.