Blazor 验证组

Question

我与 asp.net Web Forms 有悠久的历史，最近搬到了 Z98AD8B3B3C949B3C44FZF 和爱7 it44F16 I am creating some forms in Blazor and wondered if Blazor has ValidationGroups like they did in Web Forms, Say for example I have two forms on one page. 例如登录表单和创建新帐户表单（两者都是相同的模型）。 每个都有自己的按钮，但我希望每个按钮都验证其字段组，例如 Email 是有效的。 必填字段已填充等..，我看到必填字段放在 Model 上。 这很整洁。 但在这种情况下，forms 都使用相同的 model 并且在同一页面上。 我是否对每个表单的按钮单击进行验证 - 但这似乎会生成大量代码并且有点混乱。 Web Forms Groupa 验证非常简洁，您可以将控件组合在一起，包括提交按钮。

TIA

Answer 1

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

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

}