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.
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.
Das Projekt ist wie folgt aufgebaut:
├── public ├── src │ ├── components │ │ └── Password.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
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.
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.
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.
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.
Sehen Sie sich hier die Live-Demo des Passwort-Validators an.
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.
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!
