Blazor 验证组

Question

我在 asp.net Web Forms 方面有很长的历史，最近搬到了 Blazor，我很喜欢它！我正在 Blazor 中创建一些表单，想知道 Blazor 是否像在 Web 表单中那样具有 ValidationGroups。比如说我在一个页面上有两个表单，例如登录表单和创建新帐户表单（两者都是相同的模型）。每个都有自己的按钮。但我希望每个按钮都验证其字段组，例如电子邮件有效，必填字段已填充等......我看到必填字段放在模型上，这很整洁。但在这种情况下，两种形式都使用相同的模型并且位于同一页面上。我是否在单击每个表单的按钮时进行验证 - 但这似乎会生成大量代码并且有点混乱。 Web Forms Groupa Validation 非常简洁，您可以将控件组合在一起，包括提交按钮。

TIA

Answer 1

这是一个起点。这有一个模型实例，两种形式都 linked 到。验证是表单的一部分，因此对每个表单分别进行跟踪。我已 link 编辑到同一字段，但您可以将每个表单 link 编辑到同一模型中的不同字段。

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

}

Blazor 验证组

Blazor Validation Groups

validation

webforms

blazor