Passwortvalidierung in JavaScript [Schritt für Schritt erklärt]

Jede Website, die Authentifizierung und Autorisierung unterstützt, fragt bei der Anmeldung immer nach einem Benutzernamen und einem Passwort. Ist dies nicht der Fall, muss sich der Benutzer registrieren und ein Passwort erstellen, um sich bei der nächsten Sitzung anzumelden, und daher neigen Websites dazu, bestimmte Protokolle oder Parameter bereitzustellen. Die folgenden Parameter werden üblicherweise für die Kennwortvalidierung in irgendeiner Form verwendet.

• Im Passwortfeld werden nur alphanumerische Eingaben akzeptiert.
• Es sollte mit dem Großbuchstaben beginnen.
• Mindestens ein Passwort in Großbuchstaben.
• Das Passwort sollte eine bestimmte Länge haben.
• Im Kennwort muss ein numerischer Wert verwendet werden.
• Das Passwort muss eine minimale und maximale Länge haben.

Die Kennwortvalidierung in JavaScript stellt sicher, dass diese Parameter befolgt werden, wenn der Benutzer ein Kennwort erstellt. Für die Bildung eines einigermaßen starken Passwortes müssen die angegebenen Bedingungen erfüllt sein. Die Struktur des Passworts kann durch einen regulären Ausdruck mit JavaScript-Code validiert werden.

Für die Verarbeitung der Passwortvalidierung unter Verwendung von JavaScript im Passwortfeld würden die folgenden Schritte befolgt werden.

Passwortvalidierung in Javascript

1. Erstellen Sie ein HTML-Formular

Das Formular sollte grundlegende Felder wie E-Mail, Telefonnummer und Passwort enthalten. Sehen wir uns ein Beispiel für HTML-Code an, um die Struktur des Formulars zu definieren.

<! DOCTYPE html >

< html lang = „de“ >

< Kopf >

< Metazeichensatz = „UTF-8 “ >

< meta name = „viewport“ content = „width=device-width, initial-scale=1.0“ >

< title > Formular </ title >

</ Kopf >

< Körper >

< div -Klasse = „Container“ >

< Formularaktion = „/action_page.php “ >

< label for = „usrname“ > E- Mail-Adresse </ label >

< input type = „text“ id = „usrname“ name = „usrname“ erforderlich >

< label for = „psw“ > Passwort </ label >

< Eingabetyp = „Passwort“ ID = „ psw “ Name = „psw“ Muster = „(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }“ title = „Muss mindestens eine Zahl und einen Groß- und Kleinbuchstaben sowie mindestens 8 oder mehr Zeichen enthalten“ erforderlich >

< Eingabetyp = „ Senden “ Wert = „Senden“ >

</ form >

</ div >

< div id = „Nachricht“ >

< h3 > Das Passwort muss Folgendes enthalten: </ h3 >

< p id = „letter“ class = „ungültig“ > A < b > Kleinbuchstaben </ b > Buchstabe </ p >

< p id = „capital“ class = „invalid“ > A < b > Großbuchstaben (Großbuchstaben) </ b > Buchstabe </ p >

< p id = „number“ class = „ungültig“ > A < b > number </ b ></ p >

< p id = „length“ class = „invalid“ > Minimum < b > 16 Zeichen </ b ></ p >

</ div >

</ body >

</ html >

2. CSS hinzufügen

Eingabe {

Breite : 100 % ;

Polsterung : 12px ;

Rand : 1px fest #ccc ;

Randradius : 4px ;

Box-Größe : Border-Box ;

Rand oben : 6px ;

Rand unten : 16px ;

}

/* Sende-Button formatieren */

Eingabe [ Typ = Absenden ] {

Hintergrundfarbe : #4CAF50 ;

Farbe : weiß ;

}

/* Container für Eingaben stylen */

.container {

Hintergrundfarbe : #f1f1f1 ;

Polsterung : 20px ;

}

#nachricht {

Anzeige : keine ;

Hintergrund : #f1f1f1 ;

Farbe : #000 ;

Position : relativ ;

Polsterung : 20px ;

Rand oben : 10px ;

}

#nachricht p {

Polsterung : 10px 35px ;

Schriftgröße : 18px ;

}

.gültig {

Farbe : rgb ( 3 , 184 , 190 );

}

.gültig:vor {

Position : relativ ;

links : -35px ;

Inhalt : "&#10004;" ;

}

.ungültig {

Farbe : rot ;

}

.ungültig:vor {

Position : relativ ;

links : -35px ;

Inhalt : "&#10006;" ;

}

Checkout: Die besten Javascript-Frameworks im Jahr 2021

3. JavaScript hinzufügen

var myInput = Dokument . getElementById ( "psw" );

var letter = Dokument . getElementById ( "Buchstabe" );

var capital = document . getElementById ( "Kapital" );

var Nummer = Dokument . getElementById ( "Zahl" );

var Länge = Dokument . getElementById ( "Länge" )

meineEingabe . onfocus = Funktion () {

Dokument . getElementById ( "Nachricht" ). Stil . Anzeige = „blockieren“ ;

}

meineEingabe . onblur = Funktion () {

Dokument . getElementById ( "Nachricht" ). Stil . Anzeige = „keine“ ;

}

meineEingabe . onkeyup = Funktion () {

var Kleinbuchstaben = / [ az ] / g ;

if ( myInput . value . match ( Kleinbuchstaben )) {

Brief . Klassenliste . entfernen ( "ungültig" );

Brief . Klassenliste . hinzufügen ( "gültig" );

} sonst {

Brief . Klassenliste . entfernen ( "gültig" );

Brief . Klassenliste . hinzufügen ( "ungültig" );

}

var Großbuchstaben = / [ AZ ] / g ;

if ( myInput . value . match ( Großbuchstaben )) {

Kapital . Klassenliste . entfernen ( "ungültig" );

Kapital . Klassenliste . hinzufügen ( "gültig" );

} sonst {

Kapital . Klassenliste . entfernen ( "gültig" );

Kapital . Klassenliste . hinzufügen ( "ungültig" );

}

var zahlen = / [ 0-9 ] / g ;

if ( myInput . value . match ( zahlen )) {

Nummer . Klassenliste . entfernen ( "ungültig" );

Nummer . Klassenliste . hinzufügen ( "gültig" );

} sonst {

Nummer . Klassenliste . entfernen ( "gültig" );

Nummer . Klassenliste . hinzufügen ( "ungültig" );

}

if ( meineEingabe . Wert . Länge >= 8 ) {

Länge . Klassenliste . entfernen ( "ungültig" );

Länge . Klassenliste . hinzufügen ( "gültig" );

} sonst {

Länge . Klassenliste . entfernen ( "gültig" );

Länge . Klassenliste . hinzufügen ( "ungültig" );

}

}

Der JavaScript-Code erhält zunächst ein Element durch die ID; Danach kann es auf dem Bildschirm angezeigt werden. Es führt auch Bedingungen aus, um das Passwort im angegebenen Format zu erhalten. Die Großbuchstaben, Kleinbuchstaben und Zahlen werden durch den im Code erstellten regulären Ausdruck validiert.

4. Reguläre Ausdrücke/REGEX

Reguläre Ausdrücke sind Muster, die mit der ursprünglichen Kombination von Literalen übereinstimmen, die im Feld übergeben werden. Bei der Kennwortvalidierung spielt die Verwendung des regulären Ausdrucks von JavaScript eine wesentliche Rolle bei der Identifizierung der Zeichenfolge und ob sie im angegebenen Format vorliegt oder nicht. Reguläre Ausdrücke sind JavaScript-Objekte. Diese regulären Ausdrücke werden zwischen Schrägstrichen im JavaScript-Code für die Kennwortvalidierung geschrieben.

Beispiel: let re=/ac-b/

Wie schreibe ich eine Passwortvalidierung in JavaScript mit regulären Ausdrücken?

Ein regulärer Ausdruck besteht aus einfachen Zeichen kombiniert mit Sonderzeichen. Der reguläre Ausdruck wird gemäß den Parametern oder Einschränkungen eines starken Passworts gebildet. Sonderzeichen werden verwendet, wenn es eine schwierige Übereinstimmung von Zeichenfolgen oder Zeichen gibt.

Der oben abgebildete JavaScript-Code verwendete reguläre Ausdrücke, um Großbuchstaben, Kleinbuchstaben und Zahlen zu finden. Die Expression erfolgt mit unterschiedlichen Sequenzen und Teilsequenzen. Für jedes Zeichen, das im regulären Ausdruck verwendet wird, gelten bestimmte Regeln.

Beispiel: let number=/[0-9]/g. Es akzeptiert die Zahlen im Bereich von 0-9.

Checkout: Javascript-Projekte in Github

Lernen Sie Softwarekurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Fazit

Die Passwortvalidierung ist von entscheidender Bedeutung, da sie es dem Benutzer ermöglicht, ein starkes Passwort zu erstellen und potenzielle Passwortknacken zu vermeiden. Mit JavaScript kann man Interaktivität hinzufügen und somit den Benutzer benachrichtigen, bis das Passwort alle erforderlichen Zeichen in beliebiger Reihenfolge enthält. Der in JavaScript codierte reguläre Ausdruck spielt eine Schlüsselrolle bei der Definition der Sequenzen. Es bringt die geschriebenen Parameter in den JavaScript-Code.

Wenn Sie mehr über Full-Stack-Entwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training, mehr als 9 Projekte und Aufgaben bietet , IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.