Permudahkan Pengesahan Borang anda dalam React dengan Yup

Apabila membina aplikasi web, pengesahan borang adalah kunci untuk memastikan integriti data. Jika anda sedang mencari cara yang mudah tetapi berkesan untuk mengesahkan borang dalam React, Yup ialah kawan baik anda! Blog ini akan membimbing anda melalui langkah-langkah untuk menyediakan Yup dan membuat borang yang digilap dengan pengesahan.

Apa yang Anda Akan Pelajari

Menjelang akhir blog ini, anda akan tahu cara untuk:

1. Sediakan Yup untuk pengesahan dalam React.
2. Bina borang dengan peraturan pengesahan.
3. Gayakan borang anda menggunakan CSS luaran.

Prasyarat

Sebelum menyelam, pastikan anda mempunyai:

• Pengetahuan asas React.
• Node.js dipasang pada komputer anda.

Langkah 1: Menyediakan Yup

Mula-mula, pasang Yup dalam projek React anda. Jalankan arahan berikut dalam terminal anda:

npm install yup

Langkah 2: Mencipta Borang

Berikut ialah borang ringkas dengan medan untuk nama dan e-mel. Kami akan menggunakan useState React untuk mengurus nilai input dan ralat.

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;

Langkah 3:

Kini tiba masanya untuk menyepadukan Yup. Saya akan membuat skema pengesahan dan kemudian menyemak data borang setelah diserahkan.

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')
})

Saya akan menggunakan skema ini dalam fungsi handleSubmit untuk mengesahkan borang

  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);
  }
  };

Langkah 4: Menggayakan borang

Untuk menjadikan borang kelihatan bagus, buat fail CSS luaran (MyForm.css) dan tambah gaya ini:

.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;
}

Import fail CSS ke dalam komponen anda:

import './MyForm.css';

Kod Penuh:

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;

Kesimpulan

Yup ialah alat yang berkuasa untuk pengesahan borang, walaupun tanpa Formik. Dengan hanya beberapa baris kod, anda boleh menambahkan pengesahan yang mantap pada apl React anda.

Atas ialah kandungan terperinci Pengesahan borang dengan YUP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!