Validation

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)，还提供了要向用户显示的适当错误消息。

  Adding validation

  在默认的Blazor应用程序中编辑Index.razor页面，并提供一些标记来编辑Person实例。 ```csharp
  Name
  Age

@code { Person Person = new Person(); }

现在运行该应用程序将导致向用户呈现一个不验证其输入的表单。为了确保表单通过验证，我们必须指定验证机制。在`EditForm`组件内添加`DataAnnotationsValidator`组件。
```csharp
<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>

运行应用程序并单击保存按钮将更新用户界面，以提供用户输入中存在错误的可视指示。

Displaying validation error messages

验证错误消息可以通过两种方式显示给用户。我们可以添加ValidationSummary来显示表单中所有错误的综合列表。我们还可以使用ValidationMessage组件来显示表单上特定输入的错误消息。这些组件不是互斥的，因此可以同时使用这两个组件。
在我们的标记中，可以简单地将ValidationSummary组件拖放到EditForm中；根本不需要额外的参数。

当ValidationMessage组件显示单个字段的错误消息时，它要求我们指定该字段的标识。为了确保参数的值在重构后保持正确(例如，当我们重构Person类的属性名称时)，Blazor要求我们在标识字段时指定一个表达式。为命名的参数在ValidationMessage上定义如下：

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

这意味着要指定我们应该使用的lambda表达式的字段标识，该表达式可以用“引号”表示，也可以用@(...)括起来。

• Quoted form
  <ValidationMessage For="() => Person.Name"/>
• Razor expression form
  <ValidationMessage For=@( () => Person.Name )/>

这两种形式是等价的。引用的形式更易于阅读，而剃刀表达式使其他开发人员更清楚地看到，我们定义的是表达式而不是字符串。

@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();
}