React로 비밀번호 검사기 만들기-CSS 튜토리얼-php.cn

React로 비밀번호 검사기 만들기

WBOY

풀어 주다： 2024-09-09 06:30:40

원래의

917명이 탐색했습니다.

Building a Password Validator with 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 후크를 사용하여 유효성 검사 메시지와 해당 색상을 모두 관리합니다. 유효성 검사 기능은 유효성 검사기 라이브러리를 사용하여 비밀번호 강도를 확인하고 그에 따라 상태를 업데이트합니다.

앱 구성요소

앱 구성요소는 애플리케이션의 전체 레이아웃을 처리하고 비밀번호 구성요소를 렌더링합니다.

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는 대화형 및 반응형 웹 애플리케이션 구축에 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.

위 내용은 React로 비밀번호 검사기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!