تحقق من صحة إدخال المستخدم ضمنياً دون كتابة رمز التحقق

5 دقائق

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

في هذه الوحدة ، تتعلم كيفية التعليق على النماذج حتى يعرف Blazor البيانات المتوقعة. تتعلم أيضا كيفية تكوين نموذج بحيث يتحقق من صحة بيانات المستخدم ويستجيب لها بشكل صحيح.

التحقق من صحة إدخال المستخدم في نماذج Blazor

عندما تقوم بجمع معلومات من مستخدم موقع ويب، من المهم التحقق من أنها منطقية وأنها في الشكل الصحيح:

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

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

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

لقطة شاشة لنموذج يعرض تعليقات للمستخدم حول البيانات غير الصالحة.

من الجيد جعل رسائل التحقق من الصحة مفيدة قدر الإمكان. لا تفترض أي معرفة من المستخدم؛ على سبيل المثال، لا يعرف الجميع تنسيق عنوان بريد إلكتروني صالح.

عند استخدام EditForm المكون في Blazor، تتوفر خيارات التحقق من الصحة متعددة الاستخدامات دون كتابة تعليمات برمجية معقدة:

في نموذجك، يمكنك استخدام التعليقات التوضيحية للبيانات مقابل كل خاصية لإخبار Blazor بالوقت المطلوب للقيم وبالتنسيق الذي ينبغي أن تكون به.
داخل المكون الخاص بك EditForm ، أضف مكون DataAnnotationsValidator ، الذي يتحقق من التعليقات التوضيحية للنموذج مقابل القيم المدخلة للمستخدم.
استخدم المكوِّن ValidationSummary عندما تريد عرض ملخص لجميع رسائل التحقق في نموذج تم إرساله.
استخدم المكون ValidationMessage عندما تريد عرض رسالة التحقق لخاصية نموذج معينة.

إعداد نماذج للتحقق من الصحة

ابدأ بإخبار مكوِّن DataAnnotationsValidator بالشكل الذي تبدو عليه البيانات الصالحة. يمكنك تعريف قيود التحقق من الصحة باستخدام سمات التعليق التوضيحي في نموذج البيانات. فكِّر في هذا المثال:

using  System.ComponentModel.DataAnnotations;

public class Pizza
{
    public int Id { get; set; }
    
    [Required]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00)]
    public decimal Price { get; set; }
}

نستخدم هذا النموذج في شكل يمكن موظفي Blazing Pizza من إضافة بيتزا جديدة إلى القائمة. وهي تتضمن السمة [Required] للتأكد من أن قيم Name وPrice مكتملة دائماً. كما أنها تستخدم السمة [Range] للتحقق من أن السعر الذي تم إدخاله يقع ضمن النطاق المعقول للبيتزا. أخيراً، يستخدم السمة [EmailAddress] للتحقق من أن القيمة ChefEmail التي تم إدخالها هي عنوان بريد إلكتروني صالح.

تشمل التعليقات التوضيحية الأخرى التي يمكنك استخدامها في النموذج ما يلي:

[ValidationNever]: استخدم هذا التعليق التوضيحي عندما تريد التأكد من عدم تضمين الحقل أبدا في التحقق من الصحة.
[CreditCard]: استخدم هذا التعليق التوضيحي عندما تريد تسجيل رقم بطاقة ائتمان صالح من المستخدم.
[Compare]: استخدم هذا التعليق التوضيحي عندما تريد التأكد من تطابق خاصيتين في النموذج.
[Phone]: استخدم هذا التعليق التوضيحي عندما تريد تسجيل رقم هاتف صالح من المستخدم.
[RegularExpression]: استخدم هذا التعليق التوضيحي للتحقق من تنسيق قيمة عن طريق مقارنتها بتعبير عادي.
[StringLength]: استخدم هذا التعليق التوضيحي للتحقق من أن طول قيمة السلسلة لا يتجاوز الحد الأقصى للطول.
[Url]: استخدم هذا التعليق التوضيحي عندما تريد تسجيل عنوان URL صالح من المستخدم.

Note

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

إضافة مكونات التحقق من الصحة إلى النموذج

لتكوين النموذج الخاص بك لاستخدام التحقق من صحة التعليقات التوضيحية للبيانات، تأكد أولا من ارتباط عنصر تحكم الإدخال بخصائص النموذج. ثم أضف مكون DataAnnotationsValidator في مكان ما داخل EditForm المكون. لعرض الرسائل التي ينشئها التحقق من الصحة، استخدم المكون ValidationSummary، الذي يعرض جميع رسائل التحقق لجميع عناصر التحكم في النموذج. إذا كنت تفضل عرض رسائل التحقق من الصحة بجوار كل عنصر تحكم، فاستخدم مكونات ValidationMessage المتعددة. تذكر ربط كل عنصر تحكم ValidationMessage بخاصية معينة للنموذج، باستخدام السمة For:

@page "/admin/createpizza"

<h1>Add a new pizza</h1>

<EditForm Model="@pizza">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEmail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price)" />
</EditForm>

@code {
    private Pizza pizza = new();
}

التحكم في التحقق من صحة نموذج التطبيق الخاص بك

يقوم Blazor بالتحقق من الصحة في وقتين مختلفين:

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

إذا فشل النموذج في التحقق من الصحة، يتم عرض الرسائل في المكونين ValidationSummary وValidationMessage. لتخصيص هذه الرسائل، يمكنك إضافة سمة ErrorMessage إلى التعليق التوضيحي للبيانات لكل حقل في النموذج:

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
}

سمات التحقق من الصحة المضمنة متعددة الاستخدامات، ويمكنك استخدام التعبيرات العادية للتحقق من أنواع عديدة من أنماط النص. ومع ذلك، إذا كان لديك متطلبات محددة أو غير عادية للتحقق من الصحة، فقد لا تتمكن من تلبيتها بدقة مع السمات المضمنة. في هذه الحالات، يمكنك إنشاء سمة التحقق من صحة مخصصة. ابدأ بإنشاء فئة ترث من فئة ValidationAttribute وتتجاوز أسلوب IsValid :

public class PizzaBase : ValidationAttribute
{
    public string GetErrorMessage() => $"Sorry, that's not a valid pizza base.";

    protected override ValidationResult IsValid(
        object value, ValidationContext validationContext)
    {
        if (value != "Tomato" || value != "Pesto")
        {
            return new ValidationResult(GetErrorMessage());
        }

        return ValidationResult.Success;
    }
}

الآن، يمكنك استخدام سمة التحقق المخصصة الخاصة بك أثناء استخدام السمات المضمنة في فئة النموذج:

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(
        ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
    
    [PizzaBase]
    public string Base { get; set; }
}

معالجة التحقق من صحة النموذج من جانب الخادم عند إرسال النموذج

عند استخدام مكون EditForm ، تتوفر ثلاثة أحداث للاستجابة إلى إرسال النموذج:

OnSubmit: يتم تشغيل هذا الحدث عندما يرسل المستخدم نموذجاً، بغض النظر عن نتائج التحقق من الصحة.
OnValidSubmit: يتم تشغيل هذا الحدث عندما يرسل المستخدم نموذجاً ويجتاز مدخلاته عملية التحقق من الصحة.
OnInvalidSubmit: يتم تشغيل هذا الحدث عندما يرسل المستخدم نموذجاً وتفشل مدخلاته في عملية التحقق من الصحة.

إذا كنت تستخدم OnSubmit، فلن يتم إطلاق الحدثين الآخرين. بدلا من ذلك، يمكنك استخدام المعلمة EditContext للتحقق مما إذا كنت تريد معالجة بيانات الإدخال أم لا. استخدم هذا الحدث عندما تريد كتابة منطقك الخاص للتعامل مع إرسال النموذج:

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnSubmit=@HandleSubmission>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void HandleSubmission(EditContext context)
    {
        bool dataIsValid = context.Validate();
        if (dataIsValid)
        {
            // Store valid data here
        }
    }
}

إذا كنت تستخدم OnValidSubmit وبدلا OnInvalidSubmit من ذلك، لن تحتاج إلى التحقق من حالة التحقق من الصحة داخل كل معالج أحداث:

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnValidSubmit=@ProcessInputData OnInvalidSubmit=@ShowFeedback>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void ProcessInputData(EditContext context)
    {
        // Store valid data here
    }
    
    void ShowFeedback(EditContext context)
    {
        // Take action here to help the user correct the issues
    }
}

الملاحظات

هل كانت هذه الصفحة مفيدة؟

تحقق من صحة إدخال المستخدم ضمنياً دون كتابة رمز التحقق

‏‫اختبر معلوماتك

الملاحظات