واکنش سنجی فرم را با Formik و Yup – مجله سر و صدا

درباره نویسنده

Nefe یک توسعه دهنده Frontend است که از یادگیری چیزهای جدید و به اشتراک گذاشتن دانش خود با دیگران لذت می برد.
بیشتر در مورد
نفی
…

به عنوان توسعه دهنده ، وظیفه ما این است که اطمینان حاصل کنیم وقتی کاربران با فرم هایی که تنظیم می کنیم تعامل داشته باشند ، داده هایی که از طریق آنها ارسال می شوند به همان شکلی است که انتظار داریم.

در این مقاله ، ما یاد خواهیم گرفت که چگونه اعتبار سنجی فرم را کنترل کنیم و وضعیت فرم ها را بدون کمک کتابخانه فرم ردیابی کنیم. در مرحله بعدی ، نحوه کار کتابخانه Formik را خواهیم دید. ما خواهیم آموخت که چگونه می توان با فیلدهای ورودی HTML و قوانین اعتبار سنجی سفارشی از آن استفاده کرد. سپس ما اعتبارسنجی فرم را با استفاده از م componentsلفه های سفارشی Yup و Formik تنظیم خواهیم کرد و می فهمیم که Yup چگونه در مدیریت اعتبار سنجی فرم با فرمک کار می کند. ما این روش های اعتبار سنجی فرم را برای تأیید فرم ثبت نام ساده ای که تنظیم کرده ام ، پیاده سازی خواهیم کرد.

توجه داشته باشید: این مقاله نیاز به درک اساسی React دارد.

اعتبار سنجی فرم در واکنش

React به خودی خود قدرت کافی دارد تا بتوانیم اعتبار سنجی سفارشی را برای فرم های خود تنظیم کنیم. بیایید ببینیم که چگونه این کار را انجام می دهیم ما با ایجاد م componentلفه فرم خود با مقادیر حالت اولیه شروع خواهیم کرد. به شرح زیر جعبه شنی کد فرم ما را در خود نگه می دارد:

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

const Form = () => {
  const intialValues = { email: "", password: "" };
  const [formValues, setFormValues] = useState(intialValues);
  const [formErrors, setFormErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
}

با useState قلاب ، ما متغیرهای حالت را برای formValues، formErrors و isSubmitting.

• formValues متغیر داده های کاربر را در قسمت های ورودی قرار می دهد.
• formErrors متغیر خطاهای مربوط به هر قسمت ورودی را نگه می دارد.
• isSubmitting متغیر بولی است که بررسی می کند آیا فرم ارسال می شود یا نه. این خواهد بود true فقط وقتی خطایی در فرم وجود نداشته باشد.

const submitForm = () => {
    console.log(formValues);
  };

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

const handleSubmit = (e) => {
    e.preventDefault();
    setFormErrors(validate(formValues));
    setIsSubmitting(true);
  };

const validate = (values) => {
    let errors = {};
    const regex = /^[^s@]+@[^s@]+.[^s@]{2,}$/i;
    if (!values.email) {
      errors.email = "Cannot be blank";
    } else if (!regex.test(values.email)) {
      errors.email = "Invalid email format";
    }
    if (!values.password) {
      errors.password = "Cannot be blank";
    } else if (values.password.length < 4) {
      errors.password = "Password must be more than 4 characters";
    }
    return errors;
  };

useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmitting) {
      submitForm();
    }
  }, [formErrors]);

در اینجا ، ما 4 فرم کنترل کننده و a داریم useEffect برای رسیدگی به عملکرد فرم ما تنظیم شده است.

• handleChange
  این ورودی ها را با همگام سازی می کند formValues وضعیت را به عنوان نوع کاربر بیان و به روز کنید.
• validate
  ما در عبور می کنیم formValues شی به عنوان آرگومان این عملکرد ، سپس بر اساس email و password برگزاری آزمونهای اعتبار سنجی ، errors شی پر شده و برگردانده می شود.
• handleSubmit
  هر زمان که فرم ارسال می شود ، formErrors متغیر state با هر خطایی که ممکن است با استفاده از وجود داشته باشد جمع می شود setFormErrors(validate(formValues)) روش.
• useEffect
  در اینجا ، بررسی می کنیم که آیا formErrors شی خالی است ، و اگر isSubmitting است true. اگر این بررسی درست باشد ، پس submitForm() یاور خوانده می شود. این وابستگی منفرد دارد ، یعنی formErrors هدف – شی. این به این معنی است که فقط وقتی اجرا می شود formErrors شی تغییر می کند.
• submitForm: این امر ارائه داده های فرم را کنترل می کند.

return (
    <div className="container">
      <h1>Sign in to continue</h1>
      {Object.keys(formErrors).length === 0 && isSubmitting && (
        <span className="success-msg">Signed in successfully</span>
      )}
      <form onSubmit={handleSubmit} noValidate>
        <div className="form-row">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            name="email"
            id="email"
            value={formValues.email}
            onChange={handleChange}
            className={formErrors.email && "input-error"}
          />
          {formErrors.email && (
            <span className="error">{formErrors.email}</span>
          )}
        </div>
        <div className="form-row">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            name="password"
            id="password"
            value={formValues.password}
            onChange={handleChange}
            className={formErrors.password && "input-error"}
          />
          {formErrors.password && (
            <span className="error">{formErrors.password}</span>
          )}
        </div>
        <button type="submit">Sign In</button>
      </form>
    </div>
  );

در اینجا ، ما عبور می کنیم در handleChange توابع کمکی به ورودی ها onChange صفت. ما مقدار ورودی ها را به formValues شی ، باعث می شود ورودی های کنترل شده داشته باشند. از اسناد React، ورودی های کنترل شده ورودی هایی هستند که مقادیر آنها توسط React کنترل می شوند. اگر خطایی مربوط به آن قسمت ورودی خاص باشد ، یک سبک خطای ورودی اعمال می شود. در صورت وجود هرگونه خطا در آن قسمت ورودی خاص ، یک پیام خطا در زیر هر ورودی نمایش داده می شود. سرانجام ، بررسی می کنیم که آیا در شی خطاها خطایی وجود دارد یا خیر و اگر isSubmitting درست است. اگر این شرایط درست باشد ، ما پیامی را نمایش می دهیم که به کاربر اطلاع می دهد با موفقیت وارد سیستم شده است.

با استفاده از این ، ما یک فرم کاملاً کاربردی و معتبر داریم که بدون کمک کتابخانه تنظیم شده است. با این حال ، یک کتابخانه فرم مانند Formik با کمک Yup می تواند پیچیدگی های مدیریت فرم ها را برای ما ساده کند.

Formik و Yup چیست؟

درست از اسناد:

“Formik یک کتابخانه کوچک است که با 3 قسمت آزار دهنده در اداره فرم ها به شما کمک می کند:

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

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

آره یک اعتبار سنج طرح شی JavaScript است. اگرچه این ویژگی های قدرتمند زیادی دارد ، اما ما در مورد چگونگی کمک به ما در ایجاد قوانین اعتبار سنجی سفارشی تمرکز خواهیم کرد ، بنابراین مجبور نیستیم. این یک نمونه طرحواره شی object Yup برای فرم ثبت نام است. بعداً در مقاله به بررسی Yup و نحوه عملکرد آن خواهیم پرداخت.

const SignUpSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Firstname is required"),

  lastName: Yup.string()
    .min(2, "Too Short!")
    .max(50, "Too Long!")
    .required("Lastname is required"),

  phoneNumber: Yup.string()
    .required("Phone number is required")
    .matches(
/^([0]{1}|+?[234]{3})([7-9]{1})([0|1]{1})([d]{1})([d]{7})$/g,
      "Invalid phone number"
    ),

  email: Yup.string().email().required("Email is required"),

  password: Yup.string()
    .required("Password is required")
    .min(6, "Password is too short - should be 6 chars minimum"),
});

Formik ، زمینه های ورودی HTML و قوانین اعتبار سنجی سفارشی

به شرح زیر جعبه شنی کد این فرم را که تنظیم کرده است نگه می دارد:

اولین کاری که باید انجام دهیم این است Formik را نصب کنید.

npm i formik

سپس می توانیم آن را در فایلی که در آن از آن استفاده خواهیم کرد وارد کنیم.

import { Formik } from "formik";

قبل از ایجاد م componentلفه ، باید یک ایجاد کنیم initialValues و validate شی object را که هنگام تنظیم آن به عنوان پیش فرض به م componentلفه Formik منتقل خواهیم کرد. initialValues و validate قطعه کد هستند ، کلمات عادی نیستند.

تصمیم برای انجام این کار در خارج از م componentلفه ، تصمیمی نیست بلکه برای خوانایی کد ما تصمیم می گیرد.

const initialValues = {
  email: "",
  password: ""
};

initialValues: شیئی است که مقادیر اولیه قسمتهای فرم مربوطه را توصیف می کند. نام داده شده به هر کلید در initialValues باید با مقدار نام فیلدی ورودی که می خواهیم Formik مشاهده کند مطابقت داشته باشد.

const validate = (values) => {
  let errors = {};
  const regex = /^[^s@]+@[^s@]+.[^s@]{2,}$/i;
  if (!values.email) {
    errors.email = "Email is required";
  } else if (!regex.test(values.email)) {
    errors.email = "Invalid Email";
  }
  if (!values.password) {
    errors.password = "Password is required";
  } else if (values.password.length < 4) {
    errors.password = "Password too short";
  }
  return errors;
};

validate: این تابعی را می پذیرد که اعتبار فرم را کنترل می کند. این تابع یک شی object را به صورت مقادیر داده به عنوان آرگومان می پذیرد و بر اساس قوانین تعریف شده ، هر ویژگی را در شی the تأیید می کند. هر کلید در مقادیر مقادیر باید با نام قسمت ورودی مطابقت داشته باشد.

const submitForm = (values) => {
  console.log(values);
};

onSubmit: این امر پس از ارسال کاربر توسط آنچه اتفاق می افتد ، انجام می شود. prop onSubmit یک عملکرد پاسخگویی را دریافت می کند که فقط درصورت عدم وجود خطا اجرا می شود ، به این معنی که ورودی های کاربر معتبر هستند.

const SignInForm = () => {
  return (
    <Formik
      initialValues={initialValues}
      validate={validate}
      onSubmit={submitForm}
    >
      {(formik) => {
        const {
          values,
          handleChange,
          handleSubmit,
          errors,
          touched,
          handleBlur,
          isValid,
          dirty
        } = formik;
        return (
            <div className="container">
              <h1>Sign in to continue</h1>
              <form onSubmit={handleSubmit}>
                <div className="form-row">
                  <label htmlFor="email">Email</label>
                  <input
                    type="email"
                    name="email"
                    id="email"
                    value={values.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    className={errors.email && touched.email ? 
                    "input-error" : null}
                  />
                  {errors.email && touched.email && (
                    <span className="error">{errors.email}</span>
                  )}
                </div>

                <div className="form-row">
                  <label htmlFor="password">Password</label>
                  <input
                    type="password"
                    name="password"
                    id="password"
                    value={values.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    className={errors.password && touched.password ? 
                     "input-error" : null}
                  />
                  {errors.password && touched.password && (
                    <span className="error">{errors.password}</span>
                  )}
                </div>

                <button
                  type="submit"
                  className={dirty && isValid ? "" : "disabled-btn"}
                  disabled={!(dirty && isValid)}>
                  Sign In
                </button>
              </form>
            </div>
        );
      }}
    </Formik>
  );
};

ما در عبور می کنیم initialValues شی ، و submitForm و validate توابعی که قبلاً در فرمریک تعریف کردیم initialValues، onSubmit و validate وسایل به ترتیب

با استفاده از الگوی رندر رندر ، ما حتی به تکیه گاه های بیشتری که Formik API ارائه می دهد دسترسی داریم.

1. values
   این مقادیر ورودی کاربر را در خود نگه می دارد.
2. handleChange
   این کنترل کننده رویداد تغییر ورودی است. به قسمت ورودی منتقل می شود <input onChange={handleChange}>. این تغییرات ورودی های کاربر را کنترل می کند.
3. handleSubmit
   کنترل کننده ارسال فرم به فرم منتقل می شود <form onSubmit={props.handleSubmit}>. این عملکردی را که به onSubmit هر زمان فرم ارسال شد ، آن را پشتیبانی کنید.
4. errors
   این شی دارای خطاهای اعتبارسنجی است که با هر فیلد ورودی مطابقت دارد و با تعاریفی که ما به طرح شی Yup منتقل کرده ایم پر می شود.
5. touched
   این شیئی است که در صورت لمس یک قسمت فرم ، مشاهده می کند. هر کلید مربوط به نام عناصر ورودی است و دارای ارزش بولی است.
6. handleBlur
   این است onBlur کنترل کننده رویداد ، و به قسمت ورودی منتقل می شود <input onBlur={handleBlur} />. هنگامی که کاربر تمرکز را از ورودی حذف می کند ، این عملکرد فراخوانی می شود. بدون آن ، در صورت از بین رفتن کانون توجه ، خطایی در ورودی وجود دارد ، خطاها فقط درصورت تلاش کاربر برای ارسال نمایش داده می شوند.
7. isValid
   برمی گردد true اگر خطایی وجود نداشته باشد (یعنی errors شی خالی است) و false در غیر این صورت.
8. dirty
   این prop بررسی می کند که آیا فرم ما لمس شده است یا خیر. ما می توانیم از این ویژگی برای غیرفعال کردن دکمه ارسال خود در هنگام بارگیری فرم در ابتدا استفاده کنیم.

وقتی فرم ارسال می شود ، Formik بررسی می کند که آیا خطاهایی در آن وجود دارد errors هدف – شی. در صورت وجود ، ارسال را لغو کرده و خطاها را نمایش می دهد. برای نمایش بازه با استفاده از ورودی های HTML ، اگر فیلد لمس شده باشد و خطاهایی برای آن قسمت وجود داشته باشد ، پیام خطای هر قسمت ورودی مربوطه را به طور شرطی ارائه و سبک می کنیم.

<button
  type="submit"
  className={!(dirty && isValid) ? "disabled-btn" : ""}
  disabled={!(dirty && isValid)}>
      Sign In
</button>

همچنین ، می توانیم یک نشانه بصری به دکمه اضافه کنیم. دکمه به صورت مشروط است و اگر خطایی در آن وجود دارد آن را غیرفعال کنید errors شی با استفاده از isValid و dirty وسایل جانبی

اعتبار سنجی با استفاده از م Formلفه های Formik و Yup

این جعبه شن کد نهایی را برای این تنظیمات نگهداری می کند.

npm i yup
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

ما Yup را نصب می کنیم ، Field، Form، و ErrorMessage اجزای سازنده از Formik.

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

const SignInSchema = Yup.object().shape({
  email: Yup.string().email().required("Email is required"),

  password: Yup.string()
    .required("Password is required")
    .min(4, "Password is too short - should be 4 chars minimum"),
});

یوپ همانند تعریف ما عمل می کند propTypes در React. ما یک طرحواره شی با Yup ایجاد کردیم object تابع. ما شکل طرح اعتبار سنجی را تعریف کرده و به Yup منتقل می کنیم shape() روش. required() روش. این روش یک رشته را به عنوان آرگومان می گیرد و این رشته پیام خطا خواهد بود. که هر زمان یک قسمت مورد نیاز خالی است نمایش داده می شود.

این طرح دارای دو ویژگی است:

• یک email خاصیتی که از نوع رشته ای است و لازم است.
• آ password خاصیتی که از نوع شماره است اما نیازی به آن نیست.

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

const SignInForm = () => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={signInSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {(formik) => {
        const { errors, touched, isValid, dirty } = formik;
        return (
          <div className="container">
            <h1>Sign in to continue</h1>
            <Form>
              <div className="form-row">
                <label htmlFor="email">Email</label>
                <Field
                  type="email"
                  name="email"
                  id="email"
                  className={errors.email && touched.email ? 
                  "input-error" : null}
                />
                <ErrorMessage name="email" component="span" className="error" />
              </div>

              <div className="form-row">
                <label htmlFor="password">Password</label>
                <Field
                  type="password"
                  name="password"
                  id="password"
                  className={errors.password && touched.password ? 
                  "input-error" : null}
                />
                <ErrorMessage
                  name="password"
                  component="span"
                  className="error"
                />
              </div>

              <button
                type="submit"
                className={!(dirty && isValid) ? "disabled-btn" : ""}
                disabled={!(dirty && isValid)}
              >
                Sign In
              </button>
            </Form>
          </div>
        );
      }}
    </Formik>
  );
};

در حالی که با استفاده از فیلدهای ورودی HTML کار به پایان می رسد ، م componentsلفه های سفارشی Formik کار را برای ما آسان تر می کند و میزان کدی را که باید بنویسیم کاهش می دهد! این م componentsلفه های سفارشی Formik در اختیار ما قرار می دهد

1. Formik
   مدتی است که از این استفاده می کنیم. این مورد لازم است تا سایر اجزا نیز قابل استفاده باشند.
2. Form
   یک بسته بندی که HTML را بسته بندی می کند <form/> عنصر این به طور خودکار لینک می شود onSubmit روش به رویداد ارسال فرم.
3. Field
   در پس زمینه ، این به طور خودکار ورودی فرم را پیوند می دهد onChange، onBlur و value صفات به Formik’s handleChange، handleBlur، و values به ترتیب شی از نام prop برای مطابقت با حالت استفاده می کند و به طور خودکار حالت را با مقدار ورودی همگام نگه می دارد. با استفاده از این م componentلفه ، می توانیم تصمیم بگیریم که آن را به عنوان یک قسمت ورودی که می خواهیم با استفاده از آن نمایش دهیم as ویژگی. به عنوان مثال ، a ارائه می شود textarea. به طور پیش فرض ، یک فیلد ورودی HTML ارائه می دهد.
4. ErrorMessage
   این ارائه پیام خطا برای فیلد مربوطه خود را بر اساس مقدار داده شده به نام prop ، که مربوط به <Field />پروانه نام. در صورت بازدید از فیلد و وجود خطا ، پیام خطا نمایش داده می شود. به طور پیش فرض ، این رشته یک رشته است component پروپ مشخص نشده است.

ما عبور می کنیم signInSchema با استفاده از validationSchema تکیه گاه تیم Formik عاشق کتابخانه اعتبارسنجی Yup هستند ، بنابراین آنها یک prop خاص برای Yup ایجاد کردند که نام آن است validationSchema که خطاها را به اشیا تبدیل کرده و با مقادیر و عملکردهای لمسی آنها مطابقت دارد.

نتیجه

کاربران نمی دانند که چگونه شما اعتبار سنجی فرم را کنترل می کنید. با این حال ، برای شما توسعه دهنده ، این فرآیند باید تا حد ممکن بدون درد باشد ، و من معتقدم Formik به عنوان یک انتخاب محکم در این زمینه برجسته است.

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

منابع

(ks ra، yk، il)