اعتبار سنجی فرم با انجمن DEV – YUP

Summarize this content to 400 words in Persian Lang

اعتبار سنجی فرم خود را در React with Yup ساده کنید

هنگام ساخت برنامه های کاربردی وب، اعتبار سنجی فرم برای اطمینان از یکپارچگی داده ها کلیدی است. اگر به دنبال راهی ساده و در عین حال قدرتمند برای اعتبارسنجی فرم ها در React هستید، بله بهترین دوست شماست این وبلاگ شما را از طریق مراحل راه اندازی Yup و ایجاد یک فرم صیقل داده شده با اعتبار سنجی راهنمایی می کند.

آنچه شما یاد خواهید گرفت

در پایان این وبلاگ، شما می دانید که چگونه:

Yup را برای اعتبارسنجی در React تنظیم کنید.
یک فرم با قوانین اعتبار سنجی بسازید.
فرم خود را با استفاده از CSS خارجی سبک کنید.

پیش نیازها

قبل از غواصی، مطمئن شوید که:

دانش اولیه React
Node.js روی رایانه شما نصب شده است.

مرحله 1: راه اندازی بله

ابتدا Yup را در پروژه React خود نصب کنید. دستور زیر را در ترمینال خود اجرا کنید:

npm install yup

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: ایجاد فرم

در اینجا یک فرم ساده با فیلدهایی برای نام و ایمیل وجود دارد. ما از useState React برای مدیریت مقادیر ورودی و خطاها استفاده خواهیم کرد.

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”>Submitbutton>
form>
);
}

export default MyForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3:

اکنون زمان ادغام Yup است. من یک طرح اعتبار سنجی ایجاد می کنم و پس از ارسال، داده های فرم را بررسی می کنم.

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 Formh1>
<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”>Submitbutton>
form>
div>
);
}

export default MyForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

Yup یک ابزار قدرتمند برای اعتبارسنجی فرم است، حتی بدون Formik. تنها با چند خط کد، می توانید اعتبارسنجی قوی به برنامه های React خود اضافه کنید.

npm install yup

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">Submitbutton>
    form>
  );
}

export default MyForm;

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

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

.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 './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 Formh1>
      <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">Submitbutton>
      form>
    div>
  );
}

export default MyForm;