التحقّق من الصحة باستخدام Zod (Refine and Async)

الدرس 13 من 21 · دورة TanStack Form الكاملة · 4 دقيقة و25 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: zod-2

[00:02] المشكلة الأخرى، وهي التحقّق من كلمة المرور (password). ففي مخطّطنا قاعدة تحقّق من الصحة لكلمة المرور لدينا، وهي أن تتكوّن من ستّة أحرف على الأقل.

[00:12] غير أنّه بالنسبة إلى confirmPassword نحتاج إلى التحقّق من ذلك كذلك. فبالطبع confirmPassword ينبغي أن يكون مطابقًا لـpassword. وقد رأينا كيف نفعل ذلك إذا كنّا لا نستخدم Zod. غير أنّه كيف نتولّى ذلك إذا كنّا نستخدم Zod؟ فمثلًا يمكنني أن

[00:24] أكتب هنا 1 2 3 4 5 6 فلا أحصل على خطأ هنا. غير أنّه إذا كتبت هنا شيئًا مختلفًا فمن المفترض أن أحصل على خطأ. غير أنّنا لا نتعامل مع هذا في الوقت الحالي. إذًا لنفعل ذلك باستخدام Zod في مخطّطنا. إذًا هنا، بعد إغلاق

[00:41] هذا الكائن الموجود هنا، يمكننا إضافة دالة refine. عذرًا، refine، للتحقّق من أشياء مخصّصة كهذه. ففي هنا يمكننا تمرير دالة، وسنحصل في هذه الدالة على قيمة نموذجنا بأكمله، كائننا بأكمله.

[00:57] فلنسمّه data، ثم يمكننا في هنا التحقّق: data.password يساوي data.confirmPassword. فكما ذكرنا سابقًا، في دالة refine هذه إذا أعَدنا false من هنا فسيُعتبر

[01:16] حقلنا غير صالح (invalid). فإذا كانت كلمتا المرور غير متطابقتين فسيُعاد false من هذا، ونحتاج إلى عرض رسالة خطأ، ونحتاج أيضًا إلى تحديد الحقل الذي نعرض رسالة الخطأ عنده بالضبط، صحيح؟ ففي الوسيط الثاني يمكننا

[01:29] تمرير رسالتنا في error. فلنقل passwords do not match، ونحتاج إلى عرض هذا الخطأ في حقل confirmPassword. فيمكننا إضافة path هنا وتحديد أنّنا نريد عرض هذا في confirmPassword.

[01:47] بالطبع، ما نكتبه هنا ينبغي أن يطابق ما لدينا هنا في مخطّطنا، صحيح؟ وهذا كلّ شيء. فإذا حفظنا هذا الآن فلنجري ربما تحديثًا (refresh). ولنكتب شيئًا هنا.

[02:00] وكما ترى نحصل على passwords do not match في حقل confirmPassword.

[02:06] وباستخدام refine يمكننا أيضًا إجراء تحقّقٍ غير متزامن إذا كنّا نستخدم Zod لإجراء تحقّقنا. فلنذهب، ولنقل، إلى حقل الاسم الأول لدينا، ولنقل إنّنا نحتاج إلى امتلاك تحقّق غير متزامن لحقل الاسم الأول لدينا. فيمكننا استرجاع

[02:20] validators الخاصّة بنا هنا. فلنقل إنّنا نحتاج إلى فعل هذا على onChange. فلنضِف onChangeAsync، مع debounce، لكي نُطبّق الـdebounce على دالتنا. ولنضِف — عذرًا — onChangeAsync. والآن، وبما أنّنا نستخدم Zod، فبدلًا من تمرير دالة

[02:36] هنا يمكننا تمرير z؛ نحتاج إلى التحقّق من أنّ هذا سلسلةً نصّيّة (string)، ثم نحتاج إلى أن نطبّق عليه refine وننفّذ شيئًا غير متزامن داخل دالة refine هذه. ويمكن للـrefine أن يقبل دالةً غير متزامنة كذلك. فبإمكاننا تمرير دالة غير متزامنة

[02:50] هنا، حيث سنحصل على قيمتنا كذلك. فبإمكاننا أن نفعل شيئًا ما من خلاله: إرسال طلب (request) وما إلى ذلك. أنا سأحاكي فقط أنّنا نعمل شيئًا هنا، ثم أعيد شيئًا ما، وإذا كان هذا

[03:05] الشيء false فحقلنا غير صالح (invalid).

[03:07] فلنقل مثلًا: إذا كان اسمنا ليس John، وبالطبع يمكن أن يكون الوسيط الثاني لدالة refine هو رسالتنا التي نضيفها هنا في error. فلنضِف ربما رسالةً ما هنا: first name cannot be John.

[03:23] ولنقل إنّ هذا قادم من دالة التحقّق غير المتزامنة الخاصة بنا هنا.

[03:29] فلنجري الآن تحديثًا. فلنحاول أن نكتب هنا شيئًا ليس John. ولن نحصل على خطأ.

[03:36] غير أنّه إذا كتبنا John، فبعد ثانية، سنحصل على خطأنا هنا.

[03:42] فلنجرب أخيرًا شيئًا أخيرًا. فقبل استخدام Zod كان لَدَينا هذا onDynamic، حيث حين نعرّف نموذجنا هنا نمرّر منطق التحقّق من الصحة ونحدّد أنّنا نحتاج إلى عمل التحقّق على الإرسال (submit)، لكن بعد أول

[03:58] إرسالٍ نحتاج إلى أن يعمل التحقّق على onBlur. يمكننا استخدام onDynamic مع Zod كذلك؛ ألا وهو هنا حين نحدّد validators خاصّتنا يمكننا استخدام onDynamic وتمرير مخطّطنا. والآن إذا أجرينا تحديثًا فستعمل تحقّقاتنا فقط على

[04:15] الإرسال (submit) في المرة الأولى، أي بعد إرسال النموذج، لكن بعد ذلك ستعمل على onBlur، كما ترى هنا.