Vue Academy · درس

‏VeeValidate للتحقق القائم على المخططات

‏useForm() وuseField() ومخططات yup ورسائل الخطأ ومعالجة التحقق غير المتزامن

‏VeeValidate للتحقق القائم على المخططات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

التوسع باستخدام VeeValidate

مع ازدياد حجم النماذج، يصبح التحقق المكتوب يدويًا مرهقًا. تُعد VeeValidate مكتبة Vue شائعة تدير حالة النموذج، وتجري التحقق وفق مخطط، وتعرض الأخطاء — وكل ذلك بشكل تفاعلي.

التحقق المستند إلى مخطط

بدلًا من كتابة الفحوصات يدويًا، تصفون القواعد بشكل تصريحي داخل schema. يتيح الجمع بين VeeValidate وyup إنشاء هذا المخطط بطريقة مرنة.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

إعداد النموذج باستخدام useForm

تهيّئ useForm حالة النموذج والتحقق على مستوى النموذج. مرّروا المخطط إلى validationSchema، وستتولى الدالة ربط كل شيء معًا.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

ربط حقل باستخدام useField

تسجّل useField حقل إدخال واحدًا باسمه. وتعيد قيمة الحقل value، ورسالة الخطأ الخاصة به errorMessage، ومعالج handleBlur.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

ربط الحقل في القالب

اربطوا القيمة المعادة value باستخدام v-model، واربطوا @blur بـ handleBlur للتحقق عند فقدان التركيز.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

عرض رسالة الخطأ

يعرض كل حقل errorMessage الخاص به، وهي سلسلة تفاعلية. تكون فارغة عندما يكون الحقل صالحًا، وتحتوي على رسالة المخطط عندما يكون غير صالح.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

معالجة الإرسال

تغلّف handleSubmit دالة الإرسال الخاصة بكم. وتجري التحقق أولًا، ولا تستدعي دالة الاستدعاء الخاصة بكم بالقيم إلا إذا كان النموذج بأكمله صالحًا.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

الأخطاء على مستوى النموذج

يربط كائن errors الناتج من useForm أسماء الحقول برسائلها الحالية، وهو مفيد لعرض ملخص أو واجهة مستخدم شرطية.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

لماذا نستخدم مكتبة

تحل المخططات التصريحية محل الفحوصات اليدوية المتكررة.
توقيت مدمج للتحقق عند فقدان التركيز والتغيير والإرسال.
يوفر كل حقل errorMessage، ويوفر النموذج errors على مستواه.
تسهّل yup إضافة القواعد غير المتزامنة والقواعد بين الحقول.

المكوّنات مقابل Composition API

توفر VeeValidate أيضًا مكوّني <Form> و<Field> لأسلوب يركّز على القالب. وتتناسب دالتا التركيب useForm وuseField بصورة أفضل مع <script setup> وتمنحانكم تحكمًا أكبر.

التحقق اليدوي مقابل التحقق المستند إلى مخطط

يعلّم التحقق اليدوي آلية العمل ويناسب النماذج الصغيرة جدًا. أما التحقق المستند إلى مخطط باستخدام VeeValidate وyup، فيتوسع ليتعامل مع النماذج الكبيرة والمعقدة بشيفرة أقل بكثير وأخطاء أقل.

اختبار سريع

اختبروا معرفتكم بـ VeeValidate.

مراجعة

التحقق المستند إلى مخطط باستخدام VeeValidate:

صفوا القواعد في مخطط yup ومرّروه إلى validationSchema.
تدير useForm حالة النموذج وerrors وhandleSubmit.
تعيد useField القيم value وerrorMessage وhandleBlur لكل حقل إدخال.
يتوسع هذا الأسلوب بشكل أفضل بكثير من التحقق اليدوي عند التعامل مع النماذج الكبيرة.

الأسئلة الشائعة

هل درس «‏VeeValidate للتحقق القائم على المخططات» مجاني؟

نعم — نص درس «‏VeeValidate للتحقق القائم على المخططات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏VeeValidate للتحقق القائم على المخططات»؟

‏useForm() وuseField() ومخططات yup ورسائل الخطأ ومعالجة التحقق غير المتزامن تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏VeeValidate للتحقق القائم على المخططات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

← العودة إلى Vue Academy