仅在使用 Blazor 提交时验证表单

Question

我最近开始使用 Blazor。有没有办法只在提交时触发表单模型验证，而不是在每次更改时都生效？

为了澄清起见，假设我有这样的事情：

<EditForm Model="this" OnValidSubmit="SubmitForm">
    <DataAnnotationsValidator />
    <ValidationSummary />
            <Label For="Name">Name</Label>
            <InputText id="Name" name="Name" class="form-control" @bind-Value="Name"/>
    <button type="submit">Save</button>
</EditForm>

@code {
    [StringLength(10, ErrorMessage="Name too long")]
    public string Name { get; set; }

    private async Task SubmitForm()
    {
        // ...
        // send a POST request
    }
}

默认情况下，似乎字段的有效性和 ValidationSummary 中显示的错误消息会在文本输入的每次更改时重新评估（例如，一旦我从输入中删除第 11 个字符， “太长”消息消失了）。

我希望显示的消息在单击“提交”按钮之前保持冻结状态。

我想可以通过删除 ValidationSummary 组件并实现自定义解决方案（例如，显示仅在提交时刷新的错误消息列表）来实现它，但我想知道是否有一些惯用的解决方案我不知道。

Answer 1

何时进行验证由您使用的验证器控制。

您可以从 EditContext 接收两个事件：

OnValidationRequested 在调用 EditContext.Validate 时或作为表单提交过程的一部分被调用。

OnFieldChanged 每次更改字段值时都会调用。

验证器使用这些事件来触发它的验证过程，并将结果输出到 EditContext 的 ValidationMessageStore。

DataAnnotationsValidator 连接两个事件并在任何一个被调用时触发验证。

还有其他验证器，编写自己的验证器并不太难。除了来自通常的控制供应商的那些，还有 Blazored 或我的。我的记录在这里 - https://shauncurtis.github.io/articles/Blazor-Form-Validation.html。它有一个 DoValidationOnFieldChange 设置！

Answer 2

@enet 的回答引发了另一种回答。构建您自己的 DataAnnotationsValidator。

这是 EditContext 扩展代码。它是原始 MS 代码的修改版本，带有一些额外的控制参数。

using Microsoft.AspNetCore.Components.Forms;
using System.Collections.Concurrent;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
using System.Reflection;
using System.Reflection.Metadata;
using System.Runtime.InteropServices;

namespace WhosebugAnswers;

public static class EditContextCustomValidationExtensions
{
    public static IDisposable EnableCustomValidation(this EditContext editContext, bool doFieldValidation, bool clearMessageStore)
        =>  new DataAnnotationsEventSubscriptions(editContext, doFieldValidation, clearMessageStore);

    private static event Action? OnClearCache;

    private static void ClearCache(Type[]? _)
        =>  OnClearCache?.Invoke();

    private sealed class DataAnnotationsEventSubscriptions : IDisposable
    {
        private static readonly ConcurrentDictionary<(Type ModelType, string FieldName), PropertyInfo?> _propertyInfoCache = new();

        private readonly EditContext _editContext;
        private readonly ValidationMessageStore _messages;
        private bool _doFieldValidation;
        private bool _clearMessageStore;

        public DataAnnotationsEventSubscriptions(EditContext editContext, bool doFieldValidation, bool clearMessageStore)
        {
            _doFieldValidation = doFieldValidation;
            _clearMessageStore = clearMessageStore;
            _editContext = editContext ?? throw new ArgumentNullException(nameof(editContext));
            _messages = new ValidationMessageStore(_editContext);

            if (doFieldValidation)
                _editContext.OnFieldChanged += OnFieldChanged;
            _editContext.OnValidationRequested += OnValidationRequested;

            if (MetadataUpdater.IsSupported)
            {
                OnClearCache += ClearCache;
            }
        }
        private void OnFieldChanged(object? sender, FieldChangedEventArgs eventArgs)
        {
            var fieldIdentifier = eventArgs.FieldIdentifier;
            if (TryGetValidatableProperty(fieldIdentifier, out var propertyInfo))
            {
                var propertyValue = propertyInfo.GetValue(fieldIdentifier.Model);
                var validationContext = new ValidationContext(fieldIdentifier.Model)
                {
                    MemberName = propertyInfo.Name
                };
                var results = new List<ValidationResult>();

                Validator.TryValidateProperty(propertyValue, validationContext, results);
                _messages.Clear(fieldIdentifier);
                foreach (var result in CollectionsMarshal.AsSpan(results))
                {
                    _messages.Add(fieldIdentifier, result.ErrorMessage!);
                }

                // We have to notify even if there were no messages before and are still no messages now,
                // because the "state" that changed might be the completion of some async validation task
                _editContext.NotifyValidationStateChanged();
            }
        }

        private void OnValidationRequested(object? sender, ValidationRequestedEventArgs e)
        {
            var validationContext = new ValidationContext(_editContext.Model);
            var validationResults = new List<ValidationResult>();
            Validator.TryValidateObject(_editContext.Model, validationContext, validationResults, true);

            // Transfer results to the ValidationMessageStore
            _messages.Clear();
            foreach (var validationResult in validationResults)
            {
                if (validationResult == null)
                {
                    continue;
                }

                var hasMemberNames = false;
                foreach (var memberName in validationResult.MemberNames)
                {
                    hasMemberNames = true;
                    _messages.Add(_editContext.Field(memberName), validationResult.ErrorMessage!);
                }

                if (!hasMemberNames)
                {
                    _messages.Add(new FieldIdentifier(_editContext.Model, fieldName: string.Empty), validationResult.ErrorMessage!);
                }
            }

            _editContext.NotifyValidationStateChanged();
        }

        public void Dispose()
        {
            if (_clearMessageStore)
                _messages.Clear();
            if (_doFieldValidation)
                _editContext.OnFieldChanged -= OnFieldChanged;
            _editContext.OnValidationRequested -= OnValidationRequested;
            _editContext.NotifyValidationStateChanged();

            if (MetadataUpdater.IsSupported)
            {
                OnClearCache -= ClearCache;
            }
        }

        private static bool TryGetValidatableProperty(in FieldIdentifier fieldIdentifier, [NotNullWhen(true)] out PropertyInfo? propertyInfo)
        {
            var cacheKey = (ModelType: fieldIdentifier.Model.GetType(), fieldIdentifier.FieldName);
            if (!_propertyInfoCache.TryGetValue(cacheKey, out propertyInfo))
            {
                // DataAnnotations only validates public properties, so that's all we'll look for
                // If we can't find it, cache 'null' so we don't have to try again next time
                propertyInfo = cacheKey.ModelType.GetProperty(cacheKey.FieldName);

                // No need to lock, because it doesn't matter if we write the same value twice
                _propertyInfoCache[cacheKey] = propertyInfo;
            }

            return propertyInfo != null;
        }

        internal void ClearCache()
            => _propertyInfoCache.Clear();
    }
}

和 CustomValidation 组件：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace WhosebugAnswers;

public class CustomValidation : ComponentBase, IDisposable
{
    private IDisposable? _subscriptions;
    private EditContext? _originalEditContext;

    [CascadingParameter] EditContext? CurrentEditContext { get; set; }

    [Parameter] public bool DoEditValidation { get; set; } = false;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        if (CurrentEditContext == null)
        {
            throw new InvalidOperationException($"{nameof(DataAnnotationsValidator)} requires a cascading " +
                $"parameter of type {nameof(EditContext)}. For example, you can use {nameof(DataAnnotationsValidator)} " +
                $"inside an EditForm.");
        }

        _subscriptions = CurrentEditContext.EnableCustomValidation(DoEditValidation, true);
        _originalEditContext = CurrentEditContext;
    }

    /// <inheritdoc />
    protected override void OnParametersSet()
    {
        if (CurrentEditContext != _originalEditContext)
        {
            // While we could support this, there's no known use case presently. Since InputBase doesn't support it,
            // it's more understandable to have the same restriction.
            throw new InvalidOperationException($"{GetType()} does not support changing the " +
                $"{nameof(EditContext)} dynamically.");
        }
    }

    /// <inheritdoc/>
    protected virtual void Dispose(bool disposing)
    {
    }

    void IDisposable.Dispose()
    {
        _subscriptions?.Dispose();
        _subscriptions = null;

        Dispose(disposing: true);
    }
}

你可以这样使用它：

<EditForm EditContext=this.editContext OnValidSubmit=OnValidSubmit>
    <CustomValidation DoEditValidation=false/>
    @*<DataAnnotationsValidator/>*@
    <div class="row">
        <div class="col-2">
            Date:
        </div>
        <div class="col-10">
            <InputDate @bind-Value=this.Record.Date></InputDate>
        </div>
    </div>
.......

仅在使用 Blazor 提交时验证表单

Validating forms only on submit with Blazor

asp.net

validation

blazor