اعتبارسنجی فرم با قلاب های 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 استفاده کردیم، اما شما میتوانید به بررسی قلابهای دیگر و روش استفاده از آنها نیز بپردازید.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس
- آموزش React.js در کمتر از ۵ دقیقه — از صفر تا صد
- ری اکت (React) — راهنمای جامع برای شروع به کار
==