Blazor —— 幾乎每個系統都會用到的功能，表單驗證！！

前言

表單驗證是任何系統都會存在的功能。如果你是使用 Blazor 中內置的驗證組件，你需要提前掌握 System.ComponentModel.DataAnnotations 驗證註解特性的用法，即：

public class LoginViewModel
{
	[Required(ErrorMessage = "不能爲空")]
	public string UserName { get; set; }

	[Required(ErrorMessage ="不能爲空")]
	[StringLength(30, ErrorMessage = "不能超過 {1} 個字符")]
	public string Password { get; set; }
}

如果不會的小朋友，請移步百度自己查詢。

EditForm 表單組件

在 MVC 時代，我們使用 Html.BeginForm() 來定義表單區域。在 Blazor 中我們使用 EditForm 組件來定義表單區域。

所有的表單組件，一般由 InputXXX 開頭的組件，要求放在組件 EditForm 中。

在Blazor —— 數據綁定已經講過這個知識。

然後使用 EditForm 的 Model 屬性，表示要驗證的模型。下面是一套完整的示例代碼如下：

@page "/form"
@using System.ComponentModel.DataAnnotations

<EditForm Model="model" OnValidSubmit="Login">
    <DataAnnotationsValidator/>

    <div class="alert alert-danger">
        <ValidationSummary />
    </div>

    <div class="form-group">
        <label>用戶名</label>
        <InputText @bind-Value="model.UserName" />
        <ValidationMessage For="()=>model.UserName"/>
    </div>
    <div class="form-group">
        <label>密碼</label>
        <InputText type="password" @bind-Value="model.Password" />
        <ValidationMessage For="()=>model.Password" />
    </div>
    <div class="form-group">
        <button class="btn btn-primary" type="submit">登錄</button>
    </div>
    @if (success)
    {
        <div class="alert alert-success">表單驗證成功！</div>
    }
</EditForm>

@code{

    LoginViewModel model = new LoginViewModel();

    public class LoginViewModel
    {
        [Display(Name ="用戶名")]
        [Required(ErrorMessage = "{0}不能爲空")]
        public string UserName { get; set; }

        [Display(Name = "密碼")]
        [Required(ErrorMessage = "{0}不能爲空")]
        [StringLength(30, ErrorMessage = "不能超過 {1} 個字符")]
        public string Password { get; set; }
    }

    bool success;

    async Task Login()
    {
        success = true;
    }
}

注意事項

• LoginViewModel 必須要先實例化（即 new ），否賊會報空引用異常。
• EditForm 必須綁定要麼 EditContext 要麼 Model，二選一。
• 在 EditForm 中要提交的按鈕，一定必須是 type="submit" 類型。
• 觸發表單提交的事件是 EditForm 的 OnValidSubmit 而不是按鈕的 @onclick 事件。
• 要使驗證有效，必須在 EditForm 裏添加 DataAnnotationsValidator 組件。
• 使用 ValidationMessage 並且要求使用 For 屬性（必須使用 Lambda 表達式）綁定要輸出錯誤的字段。
• 如果要輸出全局錯誤，則使用 ValidationSummary 組件。

關於 css 樣式

如果你是通過 Visual Studio 的模板創建的項目，打開你的 wwwroot/css/site.css 文件，找到下面這段樣式：

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

這三個樣式的名字是組件默認加上的，也只能叫這個名字…很無語，也沒暴露出屬性給自定義，這點表示蛋疼…

如果你沒有的話，就複製到你的 css 樣式表裏把。

手動驗證

有時候的需求，可能要求通過其他的方式來觸發驗證，而不是通過提交按鈕。這個時候我們就不能單純滴使用 EditForm 的 Model 屬性，而需要使用 EditContext 屬性。

在使用前，我們需要自己初始化一個 EditContext 類型的變量，然後給 EditForm 的 EditContext 屬性賦值：

EditContext context;

protected override void OnInitialized()
{
    context = new EditContext(model);
}

<EditForm EditContext = "@context">
...
</EditForm>

然後手動調用 context.Validate() 方法，返回一個布爾值，true 表示驗證通過。

if (context.Validate())
{
    //驗證通過
}

總結

這篇文章通過一段完整的代碼，把表單驗證進行了說明，而且還將手動驗證的方式也進行了介紹。其實只要自己多嘗試一下就很容易掌握的，前端其實很有意思。