نحوه اعتبار سنجی فرم ها با Next.js

اعتبار سنجی فرم برای یک برنامه وب قوی و ایمن ضروری است. خوشبختانه، کتابخانه Formik می تواند کارهای سنگین را برای شما انجام دهد.

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

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

اعتبار سنجی فرم چیست؟

اعتبار سنجی فرم فرآیندی است برای اطمینان از صحت و کامل بودن داده های وارد شده به فرم توسط کاربر. شما می توانید این کار را در سمت مشتری، با استفاده از ویژگی های داخلی HTML مانند ویژگی مورد نیاز انجام دهید. همچنین می‌توانید با استفاده از جاوا اسکریپت روی کلاینت اعتبارسنجی کنید، و کتابخانه‌های Next.js خارجی برای کمک به تسهیل فرآیند وجود دارد.

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

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

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

نحوه اعتبار سنجی فرم ها در Next.js

دو راه برای اعتبارسنجی فرم ها در Next.js وجود دارد: استفاده از روش های داخلی یا استفاده از کتابخانه های خارجی.

با استفاده از روش های داخلی

HTML چندین روش برای اعتبار سنجی فرم ها ارائه می دهد که رایج ترین آنها ویژگی مورد نیاز است. این تضمین می کند که یک فیلد نمی تواند خالی باشد. می توانید از این روش در برنامه Next.js خود استفاده کنید، به سادگی با گنجاندن ویژگی در برچسب های ورودی که ایجاد می کنید. HTML همچنین یک ویژگی الگو را ارائه می دهد. برای اعتبار سنجی پیچیده تر، می توانید این را همراه با یک عبارت منظم استفاده کنید.

این مثال شامل یک فرم با دو فیلد است: نام و ایمیل. فیلد نام الزامی است و فیلد ایمیل باید با عبارت معمولی مطابقت داشته باشد.

import React from'react'
 
classMyFormextendsReact.Component {
  render() {
    return (
     <form >
       <label>
         Name:
         <inputtype="text"name="name"required />
       </label>
       <label>
         Email:
         <input type="email" name="email"
          pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
       </label>
       <inputtype="submit"value="Submit" />
     </form>
   )
 }
}
 
exportdefault MyForm

این کد کتابخانه React را وارد می کند، سپس کلاسی به نام MyForm ایجاد می کند و یک عنصر فرم را ارائه می دهد. در داخل عنصر فرم، دو عنصر برچسب وجود دارد.

اولین عنصر برچسب حاوی یک فیلد ورودی متن مورد نیاز است. عنصر برچسب دوم حاوی یک فیلد ورودی ایمیل با یک عبارت منظم در ویژگی الگوی آن است.

در نهایت، شما یک دکمه ارسال دارید. هنگامی که کاربر فرم را ارسال می کند، ویژگی مورد نیاز تضمین می کند که آنها فیلد نام را پر کرده اند. ویژگی الگوی فیلد ایمیل تضمین می کند که ایمیل در قالب مشخص شده است. اگر هر یک از این شرایط ناموفق باشد، فرم ارسال نمی شود.

استفاده از روش های داخلی دارای چند معایب است. اولاً، پیگیری همه قوانین اعتبارسنجی متفاوتی که تنظیم کرده‌اید ممکن است دشوار باشد. دوم، اگر فیلدهای زیادی دارید، اضافه کردن ویژگی مورد نیاز به هر یک می تواند خسته کننده باشد. در نهایت، روش‌های داخلی فقط اعتبارسنجی اولیه را ارائه می‌کنند. اگر می خواهید اعتبار سنجی پیچیده تری انجام دهید، باید از یک کتابخانه خارجی استفاده کنید.

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

علاوه بر روش‌های داخلی، کتابخانه‌های خارجی زیادی نیز وجود دارد که می‌توانید از آنها برای اعتبارسنجی فرم‌ها استفاده کنید. برخی از کتابخانه های محبوب عبارتند از Formik، react-hook-form و Yup.

برای استفاده از یک کتابخانه خارجی، ابتدا باید آن را نصب کنید. به عنوان مثال برای نصب Formik دستور زیر را اجرا کنید:

npm install formik

هنگامی که کتابخانه را نصب کردید، می توانید آن را به مؤلفه خود وارد کنید و از آن برای تأیید اعتبار فرم خود استفاده کنید:

import React from'react'
import { Formik, Form, Field } from'formik'
 
const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validate={values => {
      const errors = {}
      if (!values.name) {
        errors.name = 'Required'
      }
      if (!values.email) {
        errors.email = 'Required'
      } elseif (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
      ) {
        errors.email = 'Invalid email address'
      }
      return errors
    }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2))
        setSubmitting(false)
      }, 400)
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Fieldtype="text"name="name" />
        <Fieldtype="email"name="email" />
        <buttontype="submit"disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
)
 
exportdefault MyForm

در اینجا ابتدا اجزای Formik، Form و Field را از کتابخانه Formik وارد می‌کنید. سپس یک کامپوننت به نام MyForm ایجاد کنید. این مؤلفه فرمی را ارائه می دهد که دارای دو فیلد نام و ایمیل است.

پروپ originalValues ​​مقادیر اولیه فیلدهای فرم را تنظیم می کند. در این مورد، فیلدهای نام و ایمیل هر دو رشته خالی هستند.

Validate prop قوانین اعتبارسنجی فیلدهای فرم را تنظیم می کند. در این مورد، فیلد نام الزامی است و فیلد ایمیل باید با عبارت معمولی مطابقت داشته باشد.

پروپ onSubmit تابعی را تنظیم می کند که React زمانی که کاربر فرم را ارسال می کند فراخوانی می کند. در این حالت تابع یک هشدار است که مقادیر فیلدهای فرم را نمایش می دهد.

prop isSubmitting تعیین می کند که آیا فرم در حال حاضر ارسال شده است یا خیر. در این حالت آن را روی false قرار می دهید.

در نهایت فرم را با استفاده از کامپوننت Form از Formik رندر کنید.

مزایای استفاده از کتابخانه های خارجی در Next.js

استفاده از یک کتابخانه خارجی مانند Formik برای اعتبارسنجی فرم ها در Next.js مزایای متعددی دارد. یکی از مزایای آن این است که نمایش پیام های خطا به کاربر بسیار ساده تر است. به عنوان مثال، اگر یک فیلد الزامی پر نشده باشد، Formik به طور خودکار یک پیام خطا شامل یک راه حل پیشنهادی را نمایش می دهد.

مزیت دیگر این است که Formik می تواند قوانین اعتبار سنجی پیچیده تری را مدیریت کند. به عنوان مثال، می‌توانید از Formik برای تأیید یکسان بودن دو فیلد (مانند قسمت تأیید رمز عبور و رمز عبور) استفاده کنید.

در نهایت، Formik ارسال داده های فرم را به سرور آسان می کند. به عنوان مثال، می توانید از Formik برای ارسال داده های فرم به یک API استفاده کنید.

افزایش تعامل کاربر با استفاده از فرم ها

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

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

علاوه بر اعتبار سنجی، Next.js دارای ویژگی های بسیاری است که می توانید از آنها برای افزایش تعامل کاربر استفاده کنید.

منبع مقاله