اعتبارسنجی فرم با قلاب های React — به زبان ساده

۱۴۸ بازدید
آخرین به‌روزرسانی: ۲۰ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
اعتبارسنجی فرم با قلاب های React — به زبان ساده

چند قلاب ری‌اکت وجود دارند که در این نوشته به بررسی آن‌ها می‌پردازیم. همچنین یک قلاب سفارشی می‌سازیم که تنها از قلاب useState برای اعتبار سنجی فرم استفاده می‌کند. اگر می‌خواهید مثال عملی آن را ببینید به این صفحه (+) مراجعه کنید. ایده کار این است که یک قلاب سفارشی ایجاد کنیم که برخی داده‌های اولیه، اعتبارسنجی و اعتبارسنجی‌ کننده‌ها را دریافت کند. کد نهایی این قلاب به صورت زیر خواهد بود. در ادامه طرز کار آن و همچنین شیوه استفاده از قلاب های React برای اعتبارسنجی یک فرم را بررسی می‌کنیم.

فهرست مطالب این نوشته
1export default function useValidatedForm (fields = {}, descriptors = [], validators = ValidaJS.validators) {
2  const initialErrorsObj = emptyErrorFactory(fields)
3  const initialState = stateFactory(fields)
4  const [state, setState] = useState(initialState)
5  const [validation, setValidation] = useState({ valid: true, errors: initialErrorsObj })
6  const rulesBy = rulesByNameFactory(descriptors, validators)
7  const form = formDataFactory(state, setState, setValidation, validation, rulesBy)
8
9  const getData = () => getDataFromState(state)
10  const setData = (data) => setState(stateFactory(data))
11  const validate = () => {
12    const newValidations = ValidaJS.validate(rulesBy.default, getDataFromState(state))
13    setValidation({ ...newValidations, errors: { ...initialErrorsObj, ...newValidations.errors } })
14    return newValidations.valid
15  }
16
17  return [
18    form,
19    validation,
20    validate,
21    getData,
22    setData
23  ]
24}

به طور کلی این قلاب یک آرایه با 2 بخش «حالت» (State) و 3 تابع بازگشت می‌دهد. در ادامه هر یک از این موارد را بررسی می‌کنیم.

متغیر فرم، حالت را به همراه تابع nChange و onClick برای همه بخش‌های حالت نمایش می‌دهد و این بدان معنی است که داده‌های اولیه فرم به صورت زیر در اختیار ما است:

1const formData = {
2  name: '',
3  email: ''
4}

متغیر فرم که از سوی قلاب بازگشت می‌یابد به صورت زیر خواهد بود:

1{
2  name: {
3    input: {
4      value: '',
5      onClick: onClickHandlerFunction,
6      onChange: onChangeHandlerFunction
7    },
8    meta: {
9      touched: false,
10      dirty: false
11    }
12  },
13  email: {
14    input: {
15      value: '',
16      onClick: onClickHandlerFunction,
17      onChange: onChangeHandlerFunction
18    },
19    meta: {
20      touched: false,
21      dirty: false
22    }
23  }
24}

بخش اعتبارسنجی پاسخ‌های اعتبارسنجی حاصل از valida-js را نگهداری می‌کند.

1{
2  valid: true,
3  errors: {
4    name: [],
5    email: []
6  }
7}

3 تابع دیگر به صورت زیر هستند:

  • validate: همه formData را به یک باره اعتبارسنجی می‌کند.
  • getData: یک شیء بازگشت می‌دهد که دارای همان امضای مقدار اولیه ارسالی به قلاب است.
  • setData: داده‌ها را از روی حالت تنظیم می‌کند و یک شیء با همان امضای پارامتر اولیه قلاب ارسال می‌کند.

استفاده از قلاب

ابتدا قلاب را از npm ایمپورت می‌کنیم و سپس آن‌ها را درون تابع کامپوننت قرار می‌دهیم.

1import useValidatedForm from 'react-valida-hook'

قلاب به نام useValidatedForm را می‌توان دست‌کم در دو پارامتر مورد استفاده قرار داد که یکی داده‌های اولیه برای فرم است (که باید طرح‌بندی کامل داده‌ها باشد) و پارامتر دوم آرایه قواعد اعتبارسنجی است. این قواعد اعتبارسنجی برای valida-js استفاده خواهد شد.

اینک مقدار بازگشتی از قلاب و شیوه مقداردهی اولیه آن را می‌دانیم. در ادامه فرم کوچکی را به وسیله آن می‌نویسیم:

1import React from 'react'
2import useValidatedForm from 'react-valida-hook'
3
4const initialState = {
5  firstName: '',
6  lastName: '',
7  email: ''
8}
9
10const validations = [
11  {
12    name: 'firstName',
13    type: 'required',
14    stateMap: 'firstName'
15  },
16  {
17    name: 'lastName',
18    type: 'required',
19    stateMap: 'lastName'
20  },
21  {
22    name: 'email',
23    type: 'required',
24    stateMap: 'email'
25  },
26  {
27    name: 'email',
28    type: 'isEmail',
29    stateMap: 'email'
30  }
31]
32
33function UserForm () {
34  const [formData, validation, validateForm, getData] = useValidatedForm(initialState, validations)
35  const submit = (event) => {
36    event.preventDefault()
37    const valid = validateForm()
38    console.log(getData())
39  }
40  return (
41    <form className='validated-form' noValidate={true} onSubmit={submit}>
42      <div className={ validation.errors.firstName.length > 0 ? 'validated-form__control error': 'validated-form__control' }>
43        <label htmlFor='first-name'>First name</label>
44        <input name='first-name' id='first-name' { ...formData.firstName.input } />
45        <div className='validated-form__errors'>
46          { validation.errors.firstName.join(', ')}
47        </div>
48      </div>
49      <div className={ validation.errors.lastName.length > 0 ? 'validated-form__control error': 'validated-form__control' }>
50        <label htmlFor='last-name'>Last name</label>
51        <input name='last-name' id='last-name' { ...formData.lastName.input } />
52        <div className='validated-form__errors'>
53          { validation.errors.lastName.join(', ')}
54        </div>
55      </div>
56      <div className={ validation.errors.email.length > 0 ? 'validated-form__control error': 'validated-form__control' }>
57        <label htmlFor='email'>Email</label>
58        <input name='email' id='email' { ...formData.email.input } />
59        <div className='validated-form__errors'>
60          { validation.errors.email.join(', ')}
61        </div>
62      </div>
63      <div className='validated-form__actions'>
64        <input disabled={!validation.valid} className='btn' type="submit" value="Submit" />
65      </div>
66    </form>
67  )
68}

بخش‌های مهم به شرح زیر هستند:

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

1className={ validation.errors.firstName.length > 0? 'validated-form__control error': 'validated-form__control'

بخش مهم دیگر به صورت زیر است:

1<input name='first-name' id='first-name' { ...formData.firstName.input } />

جایی که شیء ورودی firstName را افراز می‌کنیم به این معنی است که props را به ورودی value، دستگیره onClick و دستگیره onChange می‌فرستیم. به این ترتیب قصد داریم متادیتای مشخصه را به‌روزرسانی کنیم. همچنین مقدار ورودی را زمانی که کاربر در ورودی می‌نویسد به‌روز کرده و اعتبارسنجی در مورد مشخصه خاص فرم را نیز به‌روزرسانی می‌کنیم. از این رو validation.errors.firstName نیز در این حالت به‌روزرسانی می‌شود.

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

در این مثال تنها از یکی از قلاب‌های موجود روی React یعنی useState استفاده کردیم، اما شما می‌توانید به بررسی قلاب‌های دیگر و روش استفاده از آن‌ها نیز بپردازید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
itnext
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *