Membina Pengesah Kata Laluan dengan React

pengenalan

Dalam tutorial ini, kami akan membimbing anda membina Pengesah Kata Laluan yang mudah dan berkesan menggunakan React. Projek ini sesuai untuk pemula yang ingin berlatih pengesahan borang dan mengendalikan input pengguna dalam React.

Gambaran Keseluruhan Projek

Pengesah Kata Laluan menyemak kekuatan kata laluan pengguna dalam masa nyata dan memberikan maklum balas sama ada kata laluan itu memenuhi kriteria untuk kata laluan yang kukuh. Maklum balas dipaparkan di bawah medan input, menggalakkan pengguna mencipta kata laluan yang lebih selamat.

Ciri-ciri

• Pengesahan Masa Nyata: Menyediakan maklum balas segera tentang kekuatan kata laluan.
• Antara Muka Mesra Pengguna: Reka bentuk yang ringkas dan bersih untuk memudahkan proses pengesahan kata laluan.
• Maklum Balas Dinamik: Mesej berkod warna yang menunjukkan kekuatan kata laluan.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna.
• CSS: Untuk menggayakan aplikasi.
• Perpustakaan Pengesah: Untuk mengesahkan kekuatan kata laluan.

Struktur Projek

Projek ini berstruktur seperti berikut:

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

Komponen Utama

• Password.jsx: Mengendalikan logik pengesahan dan medan input untuk kata laluan.
• App.jsx: Membungkus komponen Kata Laluan dan mengurus reka letak aplikasi.
• App.css: Mengandungi penggayaan untuk apl dan komponen.

Penerangan Kod

Komponen Kata Laluan

Komponen Kata Laluan bertanggungjawab untuk mengendalikan input pengguna dan mengesahkan kekuatan kata laluan. Ia menggunakan cangkuk useState untuk mengurus mesej dan warna pengesahan, dan perpustakaan pengesah untuk menyemak kekuatan kata laluan.

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;

Dalam komponen ini, cangkuk useState digunakan untuk mengurus kedua-dua mesej pengesahan dan warnanya. Fungsi pengesahan menyemak kekuatan kata laluan menggunakan perpustakaan pengesah dan mengemas kini keadaan sewajarnya.

Komponen Apl

Komponen Apl mengendalikan reka letak keseluruhan aplikasi dan memaparkan komponen Kata Laluan.

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;

Komponen ini menstrukturkan reka letak, menyediakan pengepala dan pengaki, sambil memaparkan komponen Kata Laluan di tengah.

Penggayaan CSS

Fail CSS memastikan reka letak adalah mudah dan responsif. Medan input digayakan untuk mesra pengguna dan mesej maklum balas dikodkan warna berdasarkan kekuatan kata laluan.

* {
  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;
}

Kelas .kata laluan memusatkan input kata laluan dan mesej pengesahan, dan butang digayakan untuk rupa moden. Perubahan warna untuk mesej pengesahan menjadikan maklum balas lebih intuitif untuk pengguna.

Pemasangan dan Penggunaan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:

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

Ini akan memulakan pelayan pembangunan, dan aplikasi akan berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Pengesah Kata Laluan di sini.

Kesimpulan

Pengesah Kata Laluan ini ialah projek yang hebat untuk mendapatkan pengalaman langsung dengan pengesahan borang dan keadaan pengurusan dalam React. Ia mengajar prinsip asas pengendalian input pengguna dan maklum balas masa nyata.

Kredit

• Inspirasi: Projek ini diilhamkan oleh keperluan untuk amalan kata laluan selamat dan teknik pengesahan borang.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat membina aplikasi web yang interaktif dan responsif. Anda boleh mengikuti karya beliau di GitHub.

Atas ialah kandungan terperinci Membina Pengesah Kata Laluan dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!