原文鏈接：https://blazor-university.com/forms/validation/

驗證

源代碼^[1]

DataAnnotationsValidator 是 Blazor 中的標準驗證器類型。在 EditForm 組件中添加此組件將啟用基于 System.ComponentModel.DataAnnotations.ValidationAttribute 的 .NET 屬性的表單驗證。

首先，我們將創建一個簡短的示例，然后我們將了解幕后發生的事情。首先，創建一個我們可以編輯的模型，并用一些數據注釋裝飾它的屬性以進行驗證。

public?class?Person
{[Required]public?string?Name?{?get;?set;?}[Range(18,?80,?ErrorMessage?=?"Age?must?be?between?18?and?80.")]public?int?Age?{?get;?set;?}
}

• 第 3 行指定 Name 屬性不能為 null 或為空。

• 第 5 行為 Age 屬性指定了一個有效的值范圍（從 18 到 80），并且還提供了一個合適的錯誤消息來顯示給用戶。

添加驗證

在默認 Blazor 應用中編輯 Index.razor 頁面，并提供一些標記來編輯 Person 的實例。

<EditForm?Model=@Person><div?class="form-group"><label?for="Name">Name</label><InputText?@bind-Value=Person.Name?class="form-control"?id="Name"?/></div><div?class="form-group"><label?for="Age">Age</label><InputNumber?@bind-Value=Person.Age?class="form-control"?id="Age"?/></div><input?type="submit"?class="btn?btn-primary"?value="Save"/>
</EditForm>@code?{Person?Person?=?new?Person();
}

現在運行應用程序將導致向用戶顯示一個不驗證其輸入的表單。為了確保表單得到驗證，我們必須指定一個驗證機制。在 EditForm 組件內添加一個 DataAnnotationsValidator 組件。

<EditForm?Model=@Person><DataAnnotationsValidator/><div?class="form-group"><label?for="Name">Name</label><InputText?@bind-Value=Person.Name?class="form-control"?id="Name"?/></div><div?class="form-group"><label?for="Age">Age</label><InputNumber?@bind-Value=Person.Age?class="form-control"?id="Age"?/></div><input?type="submit"?class="btn?btn-primary"?value="Save"/>
</EditForm>

運行應用程序并單擊“保存”按鈕將更新用戶界面，以提供用戶輸入中存在錯誤的視覺指示。

顯示驗證錯誤消息

可以通過兩種方式向用戶顯示驗證錯誤消息。我們可以添加一個 ValidationSummary 來顯示表單中所有錯誤的完整列表。我們還可以使用 ValidationMessage 組件來顯示表單上特定輸入的錯誤消息。這些組件不是相互排斥的，因此可以同時使用它們。

ValidationSummary 組件可以簡單地放入我們標記中的 EditForm 中；根本不需要額外的參數。

由于 ValidationMessage 組件顯示單個字段的錯誤消息，它要求我們指定字段的標識。為了確保我們的參數值在重構后保持正確（例如，當我們重構 Person 類的屬性名稱時）Blazor 要求我們在識別字段時指定一個表達式。名為 For 的參數在 ValidationMessage 上定義如下：

[Parameter]
public?Expression<Func<T>>?For?{?get;?set;?}

這意味著我們應該使用 lambda 表達式來指定字段的標識，該表達式可以“雙引號”或包裹在 @(...)

• 雙引號

  <ValidationMessage?For="()?=>?Person.Name"/>

• Razor 表達式

  <ValidationMessage?For=@(?()?=>?Person.Name?)/>

兩種形式是等價的。帶引號的形式更容易閱讀，而 razor 表達式使其他開發人員更清楚我們定義的是表達式而不是字符串。

@page?"/"
@using?Models<EditForm?Model=@Person><DataAnnotationsValidator/><ValidationSummary/><div?class="form-group"><label?for="Name">Name</label><InputText?@bind-Value=Person.Name?class="form-control"?id="Name"?/><ValidationMessage?For="()?=>?Person.Name"/></div><div?class="form-group"><label?for="Age">Age</label><InputNumber?@bind-Value=Person.Age?class="form-control"?id="Age"?/><ValidationMessage?For=@(()?=>?Person.Age)?/></div><input?type="submit"?class="btn?btn-primary"?value="Save"/>
</EditForm>@code?{Person?Person?=?new?Person();
}

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/ValidatingUserInput