نحوه استفاده و نمایش Validation ها در Form در Blazor

اعتبار سنجی فرم ها در Blazor

برای اعتبارسنجی فرم ها در Blazor راههای مختلفی وجود دارد. شما هم میتوانید از طریق Server Side و هم به صورت Client Side اعتبارسنجی فرم ها در Blazor را انجام دهید. اما برای انجام Validation در form ها در Blazor دو راه مهم تر و پراستفاده تر در ادامه توضیح داده میشه.

در ابتدا یک کلاس با نام Customer ایجاد می کنیم. این کلاس در واقع یک انتیتی هست و شامل فیلدهای زیر می باشد.

کلاس Customer

public class Customer
{
    [Key]
    public int Id { get; set; }
  
    [Required(ErrorMessage = "نام مشتری وارد نشده است")]
    public string CustomerName { get; set; }
    
    [Required(ErrorMessage = "تلفن مشتری وارد نشده است")]
    public string CustomerTel { get; set; }
}

خب حالا کدهای زیر را در صفحه index بنویسید.

صفحه Index.razor

@page "/"

<EditForm Model="customer" OnValidSubmit="Create">
    <label>Customer Name :</label>
    <br />
    <InputText @bind-Value="customer.CustomerName" />
    <br />
    <label>Customer Address :</label>
    <br />
    <InputText @bind-Value="customer.CustomerTel" />

    <button type="submit" class="btn btn-success">Create Customer</button>
</EditForm>

@code {
    Customer customer;
    protected override void OnInitialized()
    {
        customer = new Customer();
    }

    private void Create()
    {

    }
}

خب حالا اگر برنامه رو اجرا کنید چنین چیزی رو مشاهده می کنید.

خب تا اینجا یک فرم ساده رو داشتیم. اما حالا چجوری Validation ها رو برای فرم فعال کنیم.

نصب پکیج System.ComponentModel.Annotations برای اعتبار سنجی Form ها در Blazor

جهت فعال کردن و استفاده از قابلیت های اعتبارسنجی فیلدها در Form پکیج زیر را از طریق nuget نصب کنید.

System.ComponentModel.Annotations

نمایش خطاهای اعتبارسنجی توسط DataAnnotationsValidator

خب حالا برای نمایش خطاهای اعتبارسنجی میتونید از دستورات زیر استفاده کنید. این دستورات رو میتونید در درون تگ EditForm در بالای تگ قرار بدید.

<EditForm Model="customer" OnValidSubmit="Create">
    <DataAnnotationsValidator />
    <ValidationSummary />
   
    ...
</EditForm>

در این حالت خطاهای مربوط به اعتبارسنجی در بالای فرم نمایش داده می شود.

نمایش خطاهای اعتبارسنجی توسط ValidationMessage

راه بعدی برای نمایش خطاهای اعتبار سنجی این هست که خطا رو دقیقا زیر همون فیلد نمایش بدیم. برای این منظور بعد از هر فیلد میتونید دستور زیر رو بنویسید.

<InputText @bind-Value="customer.CustomerName" />
<ValidationMessage For="@(() => customer.CustomerName)" />

خب بنابراین Form شما به صورت زیر میشه :

<EditForm Model="customer" OnValidSubmit="Create">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>Customer Name :</label>
    <br />
    <InputText @bind-Value="customer.CustomerName" />
    <ValidationMessage For="@(() => customer.CustomerName)" />
    <br />
    <label>Customer Address :</label>
    <br />
    <InputText @bind-Value="customer.CustomerTel" />
    <ValidationMessage For="@(() => customer.CustomerTel)" />
    <button type="submit" class="btn btn-success">Create Customer</button>
</EditForm>

حالا اگر برنامه رو مجددا اجرا کنید و روی دکمه Create Customer کلیک کنید باید خطاهای اعتبارسنجی رو ببینید.

اطلاعات بیشتر 

Blazor Form Validation

دانلود سورس