آموزش فرم TanStack: اعتبار سنجی پیشرفته

اعتبارسنجی یکی از ویژگی های اصلی فرم ها است که احتمالاً مهمترین آن است.

در آخرین مقاله ما با هم یک فرم ساده با فرم TanStack و اعتبار سنجی اولیه تنظیم کردیم. امروز آن را کمی جلوتر خواهیم برد و خواهیم دید که چگونه سناریوهای اعتبارسنجی پیچیده تر را مدیریت کنیم. به این ترتیب:

1. اعتبار سنجی در سطح فرم
2. اعتبار سنجی Backend
3. اعتبار سنجی محلی + Async
4. بازخورد کاربر در حین اعتبارسنجی
5. در فیلدهای مرتبط گوش دهید و اعتبارسنجی کنید
6. اعتبار سنجی کتابخانه ها (zod، yup، valibot)

دنبال کنید

طبق معمول من همچنین یک نسخه نمایشی ضبط کردم که در آن هر چیزی را که به شما توصیه می کنم تماشا کنید و دنبال کنید تنظیم کردم، می توانید آن را در اینجا پیدا کنید:

https://www.youtube.com/watch?v=Pys2ExswZT0

به کد منبع علاقه دارید؟ اینجا در GitHub: https://github.com/Balastrong/tanstack-form-demo/tree/02-advanced-validation
(در صورت تمایل می توانید یک ستاره بگذارید ⭐️)

در اینجا در زیر می توانید مهمترین مراحل و قطعه کد را بیابید، بیایید شروع کنیم!

اعتبار سنجی در سطح فرم

در اولین ویدیو ما اعتباردهنده ها را به آن اضافه کردیم form.Field مؤلفه ها دارای اعتبارسنجی در سطح میدان باشند. حدس بزنید، ما همچنین می توانیم اعتباردهنده ها را به آن اضافه کنیم form مؤلفه دارای اعتبار سنجی در سطح فرم باشد!

const form = useForm({
  defaultValues: {
    username: '',
    password: '',
  },
  validators: {
    onSubmit: ({ value }) => {
      if (!value.username || !value.password) {
        return 'Please fill in all fields';
      }
    },
  },
  onSubmit: ({ value }) => {
    console.log(value);
  },
});

اسپویلر: به زودی امکان اعتبارسنجی فیلدها در اعتبارسنجی فرم نیز وجود خواهد داشت! ببینید: https://github.com/TanStack/form/pull/656

اعتبار سنجی Backend

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

برای بازتولید این، روشی ایجاد کردم که یک وعده را برمی گرداند که پس از 1 ثانیه حل می شود و یک باطن را مسخره می کند. اگر همراه با آموزش دنبال می‌کنید و بک‌اندی برای آزمایش ندارید، در اینجا چیزی است که من در ویدیو استفاده کردم:

export function validateUsername(username: string) {
  return new Promise<string | undefined>((resolve) => {
    console.log('Validating username: ' + username);
    setTimeout(() => {
      resolve(['foo', 'bar', 'baz'].includes(username) ? 'Username already taken' : undefined);
    }, 1000);
  });
}

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

 <form.Field
    name="username"
    validatorAdapter={zodValidator}
    validators={{
        onChangeAsyncDebounceMs: 100,
        onChangeAsync: ({ value }) => validateUsername(value),
    }}
    children={(field) => (
        ...
    )}
/>

با این کار، اعتبارسنجی async پس از 100 میلی‌ثانیه عدم فعالیت در فیلد ورودی اجرا می‌شود و اعتبارسنجی باطن (ساختگی) ما را انجام می‌دهد.

اعتبار سنجی محلی + Async

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

این کاملاً کار می کند:

<form.Field
  name="username"
  validatorAdapter={zodValidator}
  validators={{
    onChangeAsyncDebounceMs: 100,
    onChangeAsync: ({ value }) => validateUsername(value),
    onChange: ({ value }) => value.length < 3 && 'Username must be at least 3 characters long',
  }}
  children={(field) => ...}
/>

بازخورد کاربر در حین اعتبارسنجی

اگر اعتبارسنجی شما کمی زمان می برد (حتی نیم ثانیه)، ممکن است بخواهید به کاربر خود اطلاع دهید که چیزی در حال انجام است. Tanstack Form به درستی نامیده می شود isValidating که به کمک می آید!

<form.Field
  name="username"
  validatorAdapter={zodValidator}
  validators={{
    onChangeAsyncDebounceMs: 100,
    onChangeAsync: ({ value }) => validateUsername(value),
    onChange: ({ value }) => value.length < 3 && 'Username must be at least 3 characters long',
  }}
  children={(field) => (
    <div className="relative">
      <Input id="username" type="text" value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} />
      {field.getMeta().isValidating && (
        <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
          <LoaderCircle className="animate-spin" />
        div>
      )}
    div>
  )}
/>

در فیلدهای مرتبط گوش دهید و اعتبارسنجی کنید

در اینجا یک مورد معمول رایج دیگر وجود دارد: شما می خواهید یک فیلد را بر اساس مقدار یک فیلد دیگر تأیید کنید و مطمئن شوید که وقتی فیلد OTHER تغییر می کند، اعتبارسنجی را اجرا کنید.

در آنجا شما دارید: onChangeListensTo:

<form.Field
  name="confirmPassword"
  validators={{
    onChangeListenTo: ['password'],
    onChange: ({ value, fieldApi }) =>
      fieldApi.getMeta().isDirty && value !== fieldApi.form.getFieldValue('password') && 'Passwords do not match',
  }}
  children={(field) => (
    <>
      <Label htmlFor="password">Confirm PasswordLabel>
      <Input
        id="confirmPassword"
        type="password"
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      {field.state.meta.errors && <p className="text-destructive text-sm mt-1">{field.state.meta.errors}p>}
    >
  )}
/>

اضافه كردن onChangeListenTo: ['password'] به confirmPassword فیلد مطمئن می شود که اعتبارسنجی زمانی اجرا می شود که password تغییرات میدان

اعتبار سنجی کتابخانه ها (zod، yup، valibot)

آیا طرحواره ای از داده های خود دارید؟ می توانید از آنها برای تأیید فیلدهای فرم خود استفاده کنید! TanStack Form از zod، yup و valibot خارج از جعبه پشتیبانی می کند.

می‌توانید تعریف طرحواره را منتقل کنید و با ارسال یک آداپتور به آن، کار را انجام دهید form.Field جزء:

بیایید با zod و آداپتور آن مثالی بزنیم، zodValidator:

npm i zod @tanstack/zod-form-adapter

بعد از نصب هر دو zod و @tanstack/zod-form-adapter می توانید از آن به این صورت استفاده کنید:

 <form.Field
    name="username"
    validatorAdapter={zodValidator}
    validators={{
        onChange: z.string().min(3)
    }}
    children={(field) => (
        ...
    )}
/>

یا اگر شما طرح را در جای دیگری تعریف کرده اید:

const UsernameSchema = z
  .string()
  .min(3, "Username must be at least 3 characters");

...
 <form.Field
    name="username"
    validatorAdapter={zodValidator}
    validators={{
        onChange: UsernameSchema
    }}
    children={(field) => (
        ...
    )}
/>

نتیجه

و این نگاهی اجمالی به برخی از گزینه های اعتبار سنجی بود که Tanstack Form در حال حاضر پشتیبانی می کند.

ویدیوی بعدی این مجموعه احتمالاً در مورد آرایه ها و فیلدهای پویا خواهد بود، پس حتماً در کانال عضو شوید تا آن را از دست ندهید!

امیدوارم از این مقاله لذت برده باشید، اگر سوال یا بازخوردی دارید در نظرات زیر با ما در میان بگذارید. در قسمت بعدی می بینمت! 👋

با تشکر از خواندن این مقاله، امیدوارم برای شما جالب بوده باشد!

من اخیراً یک انجمن GitHub راه اندازی کردم! ما پروژه های متن باز را با هدف یادگیری توسعه وب با هم ایجاد می کنیم!

به ما بپیوندید: https://github.com/DevLeonardoCommunity

آیا مطالب من را دوست دارید؟ ممکن است در نظر داشته باشید که در کانال یوتیوب من مشترک شوید! برای من خیلی معنی داره ❤️
میتوانید اینجا پیدایش کنید:

با خیال راحت من را دنبال کنید تا در صورت انتشار مقالات جدید مطلع شوید 😉