YUP를 사용한 양식 유효성 검사

Yup을 사용하여 React에서 양식 유효성 검사를 단순화하세요

웹 애플리케이션을 구축할 때 양식 유효성 검사는 데이터 무결성을 보장하는 데 중요합니다. React에서 양식을 검증하는 간단하면서도 강력한 방법을 찾고 있다면 그렇습니다가 여러분의 가장 친한 친구입니다! 이 블로그에서는 Yup을 설정하고 유효성 검사를 통해 세련된 양식을 만드는 단계를 안내합니다.

---

당신이 배울 내용

이 블로그를 마치면 다음 방법을 알게 될 것입니다.

1. React에서 유효성 검사를 위해 Yup을 설정합니다.
2. 확인 규칙을 사용하여 양식을 작성하세요.
3. 외부 CSS를 사용하여 양식 스타일을 지정하세요.

---

전제 조건

들어가기 전에 다음 사항을 확인하세요.

• React에 대한 기본 지식
• 컴퓨터에 Node.js가 설치되어 있습니다.

---

1단계: 설정하기

먼저 React 프로젝트에 Yup을 설치하세요. 터미널에서 다음 명령을 실행하세요:

npm install yup

2단계: 양식 만들기

다음은 이름과 이메일 입력란이 있는 간단한 양식입니다. React의 useState를 이용해 입력값과 오류를 관리해보겠습니다.

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validation will go here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

3단계:

이제 통합할 차례입니다. 유효성 검사 스키마를 생성한 다음 제출된 양식 데이터를 확인하겠습니다.

import * as Yup from "yup"

const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})

handleSubmit 함수에서 이 스키마를 사용하여 양식의 유효성을 검사하겠습니다

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
    await validationSchema.validate(formData, { abortEarly: false });
    setErrors({});
    alert('Form is valid!');
  } catch (err) {
    const newErrors = {};
    err.inner.forEach((error) => {
      newErrors[error.path] = error.message;
    });
    setErrors(newErrors);
  }
  };

4단계: 양식 스타일 지정

양식을 보기 좋게 만들려면 외부 CSS 파일(MyForm.css)을 만들고 다음 스타일을 추가하세요.

.form-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
  font-weight: bold;
}
.input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}
.error {
  color: red;
  font-size: 12px;
}
.button {
  background: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:hover {
  background: #45a049;
}

CSS 파일을 구성요소로 가져오기:

import './MyForm.css';

전체 코드:

import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required!'),
    email: Yup.string().email('Invalid email!').required('Email is required!'),
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      alert('Form is valid!');
    } catch (err) {
      const newErrors = {};
      err.inner.forEach((error) => {
        newErrors[error.path] = error.message;
      });
      setErrors(newErrors);
    }
  };

  return (
    <div className="form-container">
      <h1>Simple Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="label">Name:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="input"
          />
          {errors.name && <div className="error">{errors.name}</div>}
        </div>
        <div>
          <label className="label">Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="input"
          />
          {errors.email && <div className="error">{errors.email}</div>}
        </div>
        <button type="submit" className="button">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

결론

Yup은 Formik 없이도 양식 유효성 검사를 위한 강력한 도구입니다. 단 몇 줄의 코드만으로 React 앱에 강력한 유효성 검사를 추가할 수 있습니다.

위 내용은 YUP를 사용한 양식 유효성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!