Erstellen eines Passwortvalidators mit React

Einführung

In diesem Tutorial führen wir Sie durch die Erstellung eines einfachen und effektiven Passwortvalidators mit React. Dieses Projekt ist perfekt für Anfänger, die die Formularvalidierung und den Umgang mit Benutzereingaben in React üben möchten.

Projektübersicht

Der Passwortvalidator überprüft die Stärke des Passworts des Benutzers in Echtzeit und gibt Rückmeldung, ob das Passwort die Kriterien für ein sicheres Passwort erfüllt. Das Feedback wird unterhalb des Eingabefelds angezeigt und ermutigt Benutzer, sicherere Passwörter zu erstellen.

Merkmale

• Echtzeitvalidierung: Bietet sofortiges Feedback zur Passwortstärke.
• Benutzerfreundliche Oberfläche: Einfaches und klares Design, um den Passwortvalidierungsprozess zu vereinfachen.
• Dynamisches Feedback: Farbcodierte Nachrichten, die die Passwortstärke anzeigen.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche.
• CSS: Zum Gestalten der Anwendung.
• Validator-Bibliothek: Zur Validierung der Stärke des Passworts.

Projektstruktur

Das Projekt ist wie folgt aufgebaut:

├── public
├── src
│   ├── components
│   │   └── Password.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Schlüsselkomponenten

• Password.jsx: Verwaltet die Validierungslogik und das Eingabefeld für das Passwort.
• App.jsx: Umschließt die Passwortkomponente und verwaltet das Layout der Anwendung.
• App.css: Enthält Stile für die App und Komponenten.

Code-Erklärung

Passwortkomponente

Die Passwortkomponente ist für die Verarbeitung von Benutzereingaben und die Validierung der Passwortstärke verantwortlich. Es verwendet den useState-Hook, um die Validierungsnachricht und -farbe zu verwalten, und die Validator-Bibliothek, um die Passwortstärke zu überprüfen.

import { useState } from 'react';
import validator from 'validator';

const Password = () => {
  const [validationMessage, setValidationMessage] = useState("");
  const [messageColor, setMessageColor] = useState("black");

  const validate = (value) => {
    if (validator.isStrongPassword(value)) {
      setValidationMessage("Password is Strong!");
      setMessageColor("green");
    } else {
      setValidationMessage("Password is not Strong. Please consider using a mix of uppercase, lowercase letters, numbers, and symbols.");
      setMessageColor("red");
    }
  };

  return (
    <div className="password">
      <form action="post">
        <input type="password" required placeholder="Enter Password" onChange={(e) => validate(e.target.value)} />
        <p style={{ color: messageColor }}>{validationMessage}</p>
      </form>
    </div>
  );
};

export default Password;

In dieser Komponente wird der useState-Hook verwendet, um sowohl die Validierungsnachricht als auch ihre Farbe zu verwalten. Die Validierungsfunktion überprüft die Passwortstärke mithilfe der Validierungsbibliothek und aktualisiert den Status entsprechend.

App-Komponente

Die App-Komponente verwaltet das Gesamtlayout der Anwendung und rendert die Passwortkomponente.

import Password from "./components/Password";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Password Validator</h1>
      </div>
      <Password />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

Diese Komponente strukturiert das Layout, stellt eine Kopf- und Fußzeile bereit und stellt die Passwortkomponente in der Mitte dar.

CSS-Styling

Die CSS-Datei sorgt dafür, dass das Layout einfach und reaktionsschnell ist. Das Eingabefeld ist benutzerfreundlich gestaltet und die Feedback-Nachricht ist basierend auf der Stärke des Passworts farblich gekennzeichnet.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #f0f0f0;
  color: black;
}

.app {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.header {
  margin-bottom: 10px;
}

.password {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.password input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
}

.password p {
  font-size: 0.8em;
}

.footer {
  margin-top: 100px;
}

Die .password-Klasse zentriert die Passworteingabe- und Validierungsnachricht, und die Schaltfläche ist für ein modernes Aussehen gestaltet. Farbänderungen für die Validierungsnachricht machen das Feedback für Benutzer intuitiver.

Installation und Nutzung

Um mit diesem Projekt zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

git clone https://github.com/abhishekgurjar-in/password-validator.git
cd password-validator
npm install
npm start

Dadurch wird der Entwicklungsserver gestartet und die Anwendung wird unter http://localhost:3000 ausgeführt.

Live-Demo

Sehen Sie sich hier die Live-Demo des Passwort-Validators an.

Abschluss

Dieser Passwort-Validator ist ein großartiges Projekt, um praktische Erfahrungen mit der Formularvalidierung und der Statusverwaltung in React zu sammeln. Es vermittelt die Grundprinzipien des Umgangs mit Benutzereingaben und des Echtzeit-Feedbacks.

Credits

• Inspiration: Das Projekt ist von der Notwendigkeit sicherer Passwortpraktiken und Formularvalidierungstechniken inspiriert.

Autor

Abhishek Gurjar ist ein Webentwickler, der sich leidenschaftlich für die Entwicklung interaktiver und reaktionsfähiger Webanwendungen interessiert. Sie können seine Arbeit auf GitHub verfolgen.

Das obige ist der detaillierte Inhalt vonErstellen eines Passwortvalidators mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!