c# - 如何在 Blazor 中使用 DataAnnotationsValidator 验证两个字段是否匹配？

Question

我对开发和尝试使用 Blazor 学习 C# 开发相当陌生。我目前正在学习如何使用 EditForms 构建表单并使用 DataAnnotationsValidator 进行验证。

在继续处理表单之前，我已经成功完成了验证所需的大部分工作，但是，我在验证的一个重要方面遇到了麻烦:我正在处理的表单是新用户的注册表单.通常，在注册新用户时，您可能希望用户重新输入一个值，例如电子邮件地址或密码，以确保他们正确键入:

    <InputText @bind-Value=User.email id="email" /><br />
    <ValidationMessage For=@( () => User.email) />
    <label for="confirm">Confirm Email</label><br />
    <InputText @bind-Value=User.confirm id="confirm"/><br />

为了验证这些字段，我将类 UserModel 实例化为 User()。

@code
{
    UserModel User = new UserModel();

    class UserModel
    {
        [Required]
        [EmailAddress(ErrorMessage = "Please enter a valid email address.")]
        public string email { get; set; }
        [Required]
        [EmailAddress(ErrorMessage = "Please confirm your email address.")]
        [Compare(email, ErrorMessage = "The email addresses you entered did not match.")]
        public string confirm { get; set; }
        public string fname { get; set; }
        public string lname { get; set; }
        public string pwd { get; set; }

        public string error = "";

        public void Submit()
        {
        }
    }

在 Microsoft 的 DataAnnotationsValidator 文档中，我找到了一个 Class CompareAttribute ，根据文档，它“提供了一个比较两个属性的属性”。我相信这会满足我的需求，但是我在使用它时遇到了麻烦。 Compare 接受参数 otherProperty ，我认为这将是我试图匹配的其他用户输入，但是，我无法弄清楚如何将先前的输入作为此参数传递。

我试过 email, 但是，需要一个对象引用。似乎我不想在类本身中引用类的实例，所以我尝试了 this.email 但得到错误“关键字‘this’在当前上下文中不可用。”

如果有人能帮我找出在我的情况下使用 Compare 类的正确方法，我将不胜感激。否则，如果我叫错了树，请告诉我。谢谢!

Answer 1

对于 Blazor 应用程序，Microsoft 创建了新的 NuGet 包 Microsoft.AspNetCore.Components.DataAnnotations.Validation 以与 DataAnnotationsValidator 组件一起使用。该库在与之前的 [CompareProperty] 属性相同的命名空间中定义属性 [Compare] ，它是直接替换的属性。

工作示例:

@using System.ComponentModel.DataAnnotations;

<EditForm Model="@_user" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>
        Email:
        <InputText @bind-Value="_user.Email" />
    </label>
    <label>
        Confirm:
        <InputText @bind-Value="_user.ConfirmEmail" />
    </label>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private User _user = new User();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    public class User
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Required]
        [CompareProperty("Email")]
        public string ConfirmEmail { get; set; }
    }
}

您可以阅读有关为什么 Blazor 应用 in the documentation 不需要使用 [Compare] 属性的更多信息。