使用 React 建立密碼驗證器

介紹

在本教程中，我們將指導您使用 React 建立一個簡單有效的密碼驗證器。這個項目非常適合想要在 React 中練習表單驗證和處理使用者輸入的初學者。

項目概況

密碼驗證器即時檢查使用者密碼的強度，並提供有關密碼是否符合強密碼標準的回饋。回饋顯示在輸入欄位下方，鼓勵使用者建立更安全的密碼。

特徵

• 即時驗證：提供密碼強度的即時回饋。
• 使用者友善的介面：簡單乾淨的設計使密碼驗證過程變得簡單。
• 動態回饋：指示密碼強度的顏色編碼訊息。

使用的技術

• React：用於建立使用者介面。
• CSS：用於設計應用程式的樣式。
• 驗證器庫：用來驗證密碼的強度。

專案結構

專案的架構如下：

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

關鍵零件

• Password.jsx：處理密碼的驗證邏輯和輸入欄位。
• App.jsx：包裝密碼元件並管理應用程式的佈局。
• App.css：包含應用程式和元件的樣式。

程式碼說明

密碼組件

密碼組件負責處理使用者輸入並驗證密碼的強度。它使用 useState 鉤子來管理驗證訊息和顏色，並使用驗證器庫來檢查密碼強度。

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;

在此元件中，useState 鉤子用於管理驗證訊息及其顏色。驗證函數使用驗證器庫檢查密碼強度並相應更新狀態。

應用程式元件

App 元件處理應用程式的整體佈局並渲染密碼元件。

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;

此元件建置佈局，提供頁首和頁腳，同時在中心渲染密碼元件。

CSS 樣式

CSS 檔案確保佈局簡單且響應靈敏。輸入欄位的風格易於使用者使用，回饋訊息根據密碼強度進行顏色編碼。

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

.password 類別集中密碼輸入和驗證訊息，且按鈕的樣式具有現代外觀。驗證訊息的顏色變化讓使用者的回饋更加直覺。

安裝與使用

要開始此項目，請複製儲存庫並安裝相依性：

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

這將啟動開發伺服器，並且應用程式將在 http://localhost:3000 上運行。

現場演示

在此處查看密碼驗證器的現場演示。

結論

這個密碼驗證器是一個很棒的項目，可以在 React 中獲得表單驗證和管理狀態的實務經驗。它教授使用者輸入處理和即時回饋的基本原理。

製作人員

• 靈感：該專案的靈感來自於對安全密碼實踐和表單驗證技術的需求。

作者

Abhishek Gurjar 是一位熱衷於建立互動式和響應式 Web 應用程式的 Web 開發人員。您可以在 GitHub 上關注他的工作。

以上是使用 React 建立密碼驗證器的詳細內容。更多資訊請關注PHP中文網其他相關文章！