Blazor验证组

Question

我有着悠久的asp.net网络表单的历史，最近搬到了Blazor，我很喜欢它！我正在Blazor中创建一些表单，并且想知道Blazor是否有ValidationGroups，就像它们在Web中一样。例如，我在一个页面上有两个表单，例如登录表单和创建新帐户表单(两者都是相同的模型)。每个人都有自己的按钮。但是我希望每个按钮都验证它的一组字段，例如电子邮件是有效的，所需的字段被填充等等。我看到所需的字段是放在模型上的，这是很整洁的。但是在这种情况下，两种表单都使用相同的模型，并且都在同一页上。我会在每个表单的按钮点击上进行验证吗?但是这似乎会产生大量的代码，而且有点混乱。验证非常整洁，您可以将控件分组在一起，包括提交按钮。

提亚

Answer 1

这是一个起点。这有一个单独的模型实例，这两个表单都链接到这个实例。验证是对每个表单单独跟踪的表单的一部分。我已经链接到同一个字段，但是您可以在同一个模型中将每个表单链接到不同的字段。

@page "/"
@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Forms;
@using System.ComponentModel.DataAnnotations;

<h2>Login 1</h2>
<EditForm EditContext="this._editcontext1" OnValidSubmit="this.OnValidSubmit1">
    <DataAnnotationsValidator />
    <div class="m-2 row">
        <div class="m-2 col-2">
            User Name:
        </div>
        <div class="m-2 col-4">
            <InputText @bind-Value="this._model.UserName"></InputText>
        </div>
        <div class="m-2 col-4">
            <ValidationMessage For="() => this._model.UserName"></ValidationMessage>
        </div>
    </div>
    <div class="m-2">
        <button type="submit">Submit</button>
    </div>
</EditForm>

<h2>Login 2</h2>
<EditForm EditContext="this._editcontext2" OnValidSubmit="this.OnValidSubmit1">
    <DataAnnotationsValidator />
    <div class="m-2 row">
        <div class="m-2 col-2">
            User Name:
        </div>
        <div class="m-2 col-4">
            <InputText @bind-Value="this._model.UserName"></InputText>
        </div>
        <div class="m-2 col-4">
            <ValidationMessage For="() => this._model.UserName"></ValidationMessage>
        </div>
    </div>
    <div class="m-2">
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
            private EditContext? _editcontext1;
        private EditContext? _editcontext2;

        private Model _model = new Model();
        
        protected override Task OnInitializedAsync()
        {
            _editcontext1 = new EditContext(_model);
            _editcontext2 = new EditContext(_model);
            return base.OnInitializedAsync();
        }

        private async Task OnValidSubmit1()
        {
            await Task.Delay(1000);
        }

        private async Task OnValidSubmit2()
        {
            await Task.Delay(1000);
        }
        class Model
        {
            [Required]
            public string? UserName { get; set; }
        }

}