Vue Academy · درس

أنماط التحقق اليدوي

كائنات الأخطاء التفاعلية، والتحقق عند فقدان التركيز مقابل الإرسال، ومطابقة تأكيد كلمة المرور

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

التحقق من الصحة دون مكتبة

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

كائن الأخطاء

احتفظوا بكائن تفاعلي باسم errors تكون مفاتيحه أسماء الحقول. تعني السلسلة الفارغة (أو المفتاح المفقود) عدم وجود خطأ.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

دالة validate

اكتبوا دالة validate تتحقق من كل حقل وتعيّن الرسائل في كائن الأخطاء. أعيدوا نتيجة توضّح ما إذا كان النموذج صالحًا.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

التحقق عند الإرسال

استدعوا validate في بداية معالج الإرسال، وأوقفوا التنفيذ إذا فشل التحقق. يضمن ذلك عدم إرسال بيانات غير صالحة.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

التحقق من كل حقل عند فقدان التركيز

قد يبدو التحقق عند الإرسال فقط بطيئًا. تحقّقوا من الحقل عند مغادرة المستخدم له باستخدام @blur للحصول على ملاحظات فورية.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

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

استخدموا v-if لعرض الرسالة فقط عندما يحتوي الحقل على خطأ. ضعوا الرسالة بالقرب من حقل الإدخال.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

تنسيق الحقول غير الصالحة

اربطوا class باستخدام صيغة الكائن لإضافة إطار أحمر عند وجود خطأ. لا تُطبَّق class إلا عندما تكون قيمة errors.name صحيحة.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

تنسيق الخطأ

تُكمل قاعدة CSS صغيرة المظهر — إذ يشير الإطار الأحمر إلى أن الحقل يحتاج إلى الانتباه.

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

الصلاحية المحسوبة

اشتقّوا علامة توضّح الصلاحية الإجمالية باستخدام computed لتمكين زر الإرسال أو تعطيله تفاعليًا.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

نقاط القوة والقيود

التحقق اليدوي واضح ولا يتطلب اعتماديات، ولذلك فهو مثالي للنماذج الصغيرة. لكن مع ازدياد القواعد — مثل التحقق بين الحقول، والتحقق غير المتزامن، وكثرة الحقول — تتراكم الشيفرة المتكررة، ولهذا توجد المكتبات.

ملخص سير التحقق

النمط هو: أخطاء تفاعلية، ودالة validate، وتشغيلها عند الإرسال (واختياريًا عند فقدان التركيز)، وعرض الرسائل باستخدام v-if، وتنسيقها باستخدام class شرطية.

اختبار سريع

اختبروا معرفتكم بالتحقق اليدوي.

مراجعة

أنماط التحقق اليدوي:

احتفظوا بكائن تفاعلي باسم errors تكون مفاتيحه الحقول.
تعيّن دالة validate الرسائل وتعيد نتيجة الصلاحية.
تحقّقوا عند الإرسال، ومن كل حقل عند استخدام @blur للحصول على ملاحظات سريعة.
اعرضوا الرسائل باستخدام v-if="errors.x" ونسّقوها باستخدام :class="{ error: errors.x }".

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

هل درس «أنماط التحقق اليدوي» مجاني؟

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

ماذا ستتعلم في «أنماط التحقق اليدوي»؟

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

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

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

كم من الوقت يستغرق درس «أنماط التحقق اليدوي»؟

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

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

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

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

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