このチュートリアルでは、React を使用してシンプルで効果的なパスワード検証ツールを構築する方法を説明します。このプロジェクトは、React でフォームの検証とユーザー入力の処理を練習したい初心者に最適です。
パスワード検証ツールは、ユーザーのパスワードの強度をリアルタイムでチェックし、パスワードが強力なパスワードの基準を満たしているかどうかに関するフィードバックを提供します。フィードバックは入力フィールドの下に表示され、より安全なパスワードを作成するようユーザーに促します。
プロジェクトは次のように構成されています:
├── public ├── src │ ├── components │ │ └── Password.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
パスワード コンポーネントは、ユーザー入力を処理し、パスワードの強度を検証する責任があります。 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 フックを使用して検証メッセージとその色の両方を管理します。 validate 関数は、バリデータ ライブラリを使用してパスワードの強度をチェックし、それに応じて状態を更新します。
App コンポーネントはアプリケーション全体のレイアウトを処理し、Password コンポーネントをレンダリングします。
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 ファイルにより、レイアウトがシンプルで応答性が高くなります。入力フィールドはユーザーフレンドリーなスタイルになっており、フィードバックメッセージはパスワードの強度に基づいて色分けされています。
* { 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 で実行されます。
ここでパスワード検証ツールのライブデモをチェックしてください。
この Password Validator は、React でのフォーム検証と状態管理を実際に体験できる素晴らしいプロジェクトです。ユーザー入力の処理とリアルタイムのフィードバックの基本原則を学びます。
Abhishek Gurjar は、インタラクティブで応答性の高い Web アプリケーションの構築に情熱を注ぐ Web 開発者です。彼の作品は GitHub でフォローできます。
以上がReact を使用してパスワード検証ツールを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。