بهترین کتابخانه های اعتبارسنجی React Form ✅🥇

Summarize this content to 400 words in Persian Lang
اعتبار سنجی فرم بخش مهمی از توسعه وب است. این تضمین می کند که ورودی کاربر صحیح، کامل و مطابق با الزامات خاص است.

در این مقاله، ما نگاهی به برخی از محبوب ترین راه حل ها برای مدیریت فرم و اعتبار سنجی در React خواهیم داشت:

1. React Hook Form

React Hook Form کتابخانه ای است که مدیریت فرم را در React با قلاب ها و استاندارد HTML ساده می کند. رندرهای مجدد، محاسبات اعتبارسنجی و زمان نصب را به حداقل می رساند و پشتیبانی می کند.

بهترین کتابخانه فرم React که من تا به حال در هنگام ساخت برنامه react استفاده کرده ام به دلیل کاربردی و سادگی آن. ابزارهای مفید زیادی دارد و در مقایسه با Formik و Redux Form به کد زیادی نیاز ندارد.

import { useForm, SubmitHandler } from “react-hook-form”

type Inputs = {
example: string
exampleRequired: string
}

export default function App() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<Inputs>()
const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

console.log(watch(“example”)) // watch input value by passing the name of it

return (
/* “handleSubmit” will validate your inputs before invoking “onSubmit” */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the “register” function */}
<input defaultValue=”test” {…register(“example”)} />

{/* include validation with required or other standard HTML validation rules */}
<input {…register(“exampleRequired”, { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}

<input type=”submit” />
</form>
)
}

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

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

2. فرمیک

Formik گروه کوچکی از کامپوننت ها و هوک های React برای ساخت فرم ها در React و React Native است. این به سه بخش آزاردهنده کمک می کند:

گرفتن مقادیر در حالت فرم و خارج از آن
اعتبارسنجی و پیام های خطا
رسیدگی به ارسال فرم

import React from ‘react’;
import { useFormik } from ‘formik’;

const SignupForm = () => {
// Pass the useFormik() hook initial form values and a submit function that will
// be called when the form is submitted
const formik = useFormik({
initialValues: {
email: ”,
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor=”email”>Email Address</label>
<input
id=”email”
name=”email”
type=”email”
onChange={formik.handleChange}
value={formik.values.email}
/>

<button type=”submit”>Submit</button>
</form>
);
};

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

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

3. React Final Form

React Final Form یک پوشش نازک React برای Final Form است، که یک کتابخانه مدیریت فرم مبتنی بر اشتراک است که از الگوی Observer استفاده می‌کند، بنابراین تنها مؤلفه‌هایی که نیاز به به‌روزرسانی دارند با تغییر حالت فرم، دوباره ارائه می‌شوند.

برای فرم های کوچک، ترسیم مجدد کل فرم در هر فشار کلید مشکلی ندارد. اما وقتی فرم شما رشد می کند، عملکرد می تواند کاهش یابد.

Final Form یک راه حل مدیریت حالت فرم مبتنی بر اشتراک با کارایی بالا برای React است. به گونه ای طراحی شده است که ماژولار، وابستگی صفر و سازگار با قلاب باشد.

import { Form, Field } from ‘react-final-form’

const MyForm = () => (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<Field name=”firstName” component=”input” placeholder=”First Name” />
</div>

<h2>An Arbitrary Reusable Input Component</h2>
<div>
<label>Interests</label>
<Field name=”interests” component={InterestPicker} />
</div>

<h2>Render Function</h2>
<Field
name=”bio”
render={({ input, meta }) => (
<div>
<label>Bio</label>
<textarea {…input} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
/>

<h2>Render Function as Children</h2>
<Field name=”phone”>
{({ input, meta }) => (
<div>
<label>Phone</label>
<input type=”text” {…input} placeholder=”Phone” />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
</Field>

<button type=”submit”>Submit</button>
</form>
)}
/>
)

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

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

4. @formily/core

Formily یک جعبه ابزار نوآورانه است که برای ساده سازی ایجاد فرم های پویا و در عین حال تضمین عملکرد بهینه در دستگاه های مختلف طراحی شده است.

ویژگی ها🖼 قابل طراحی، شما می توانید به سرعت فرم ها را با هزینه کم از طریق Form Builder توسعه دهید.

🚀 کارایی بالا، زمینه ها به طور مستقل مدیریت می شوند، به جای اینکه کل درخت را بازنمایی کنند.

💡 اجزای یکپارچه Alibaba Fusion و Ant Design تضمین شده است که خارج از جعبه کار می کنند.

🎨 طرحواره JSON برای BackEnd اعمال شد. JSchema برای FrontEnd درخواست داد. دو پارادایم را می توان به یکدیگر تبدیل کرد.

🏅 عوارض جانبی به طور مستقل مدیریت می شوند و پیوند داده های فرم را آسان تر از همیشه می کنند.

🌯 پیچیده ترین موارد استفاده از طرح بندی فرم را لغو کنید.

import React from ‘react’
import { createForm } from ‘@formily/core’
import { FormProvider, FormConsumer, Field } from ‘@formily/react’
import {
FormItem,
FormLayout,
Input,
FormButtonGroup,
Submit,
} from ‘@formily/antd’

const form = createForm()

export default () => {
return (
<FormProvider form={form}>
<FormLayout layout=”vertical”>
<Field
name=”input”
title=”Input box”
required
initialValue=”Hello world”
decorator={[FormItem]}
component={[Input]}
/>
</FormLayout>
<FormConsumer>
{() => (
<div
style={{
marginBottom: 20,
padding: 5,
border: ‘1px dashed #666’,
}}
>
Real-time response：{form.values.input}
</div>
)}
</FormConsumer>
<FormButtonGroup>
<Submit onSubmit={console.log}>submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}

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

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

import { useForm, SubmitHandler } from "react-hook-form"


type Inputs = {
  example: string
  exampleRequired: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />


      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}


      <input type="submit" />
    </form>
  )
}

import React from 'react';
import { useFormik } from 'formik';

const SignupForm = () => {
  // Pass the useFormik() hook initial form values and a submit function that will
  // be called when the form is submitted
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

import { Form, Field } from 'react-final-form'

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" placeholder="First Name" />
        </div>

        <h2>An Arbitrary Reusable Input Component</h2>
        <div>
          <label>Interests</label>
          <Field name="interests" component={InterestPicker} />
        </div>

        <h2>Render Function</h2>
        <Field
          name="bio"
          render={({ input, meta }) => (
            <div>
              <label>Bio</label>
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        />

        <h2>Render Function as Children</h2>
        <Field name="phone">
          {({ input, meta }) => (
            <div>
              <label>Phone</label>
              <input type="text" {...input} placeholder="Phone" />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        </Field>

        <button type="submit">Submit</button>
      </form>
    )}
  />
)

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'
import {
  FormItem,
  FormLayout,
  Input,
  FormButtonGroup,
  Submit,
} from '@formily/antd'

const form = createForm()

export default () => {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="input"
          title="Input box"
          required
          initialValue="Hello world"
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
      <FormConsumer>
        {() => (
          <div
            style={{
              marginBottom: 20,
              padding: 5,
              border: '1px dashed #666',
            }}
          >
            Real-time response：{form.values.input}
          </div>
        )}
      </FormConsumer>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}