🔹 Blazor - التحقق من صحة الحقول وعرض الرسائل

Blazor يوفّر نظام تحقق من صحة (Validation) مدمج، يعتمد على Data Annotations. في هذا الدرس سنتعلم كيفية التحقق من صحة الحقول داخل النموذج، وطريقة عرض رسائل الخطأ بجانب كل حقل بشكل واضح وجذاب.

---

✅ التحقق باستخدام DataAnnotations

Blazor يعتمد على السمات (Attributes) داخل الكلاس للتحقق، مثل:

public class LoginModel
{
    [Required(ErrorMessage = "اسم المستخدم مطلوب")]
    public string? Username { get; set; }

    [Required(ErrorMessage = "كلمة المرور مطلوبة")]
    [StringLength(20, MinimumLength = 6, ErrorMessage = "يجب أن تكون كلمة المرور بين 6 و 20 حرفًا")]
    public string? Password { get; set; }
}

---

🧪 عرض رسائل الخطأ بجانب الحقول

يمكن استخدام <ValidationMessage For=... /> أسفل كل حقل لعرض رسالة الخطأ الخاصة به.

<EditForm Model="@loginModel" OnValidSubmit="SubmitForm">
    <DataAnnotationsValidator />

    <div class="mb-3">
        <label class="form-label">اسم المستخدم</label>
        <InputText class="form-control" @bind-Value="loginModel.Username" />
        <ValidationMessage For="@(() => loginModel.Username)" />
    </div>

    <div class="mb-3">
        <label class="form-label">كلمة المرور</label>
        <InputText class="form-control" @bind-Value="loginModel.Password" type="password" />
        <ValidationMessage For="@(() => loginModel.Password)" />
    </div>

    <button class="btn btn-primary" type="submit">تسجيل الدخول</button>
</EditForm>

@code {
    private LoginModel loginModel = new();

    void SubmitForm()
    {
        Console.WriteLine("✅ تسجيل الدخول ناجح!");
    }
}

---

🎯 أنواع التحقق الشائعة في Blazor

• [Required]: الحقل مطلوب.
• [StringLength]: تحديد الحد الأقصى والأدنى للطول.
• [Range]: تحديد رقم بين حدين.
• [EmailAddress]: التحقق من صيغة بريد إلكتروني.
• [Compare]: مقارنة بين حقلين (مثلاً تأكيد كلمة المرور).

---

💡 ملاحظات مهمة

• لضمان عمل التحقق بشكل سليم، يجب استخدام مكونات الإدخال المخصصة مثل <InputText> وليس <input> العادي.
• يمكنك تخصيص كل رسالة باستخدام خاصية ErrorMessage.
• عرض <ValidationSummary /> يُظهر كل الأخطاء في الأعلى، لكن <ValidationMessage /> أفضل لتجربة المستخدم.

---

✅ خلاصة الدرس

Blazor يُسهّل عليك التحقق من صحة البيانات باستخدام Data Annotations، مع إمكانية عرض رسائل واضحة لكل حقل بطريقة تفاعلية وجذابة. هذه التقنية تساعد في ضمان إدخال بيانات صحيحة وتحسين تجربة المستخدم.