我最近開始使用 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 組件并實作自定義解決方案來實作它（例如，顯示僅在提交時重繪 的錯誤訊息串列），但我想知道是否有一些我不知道的慣用解決方案的。
uj5u.com熱心網友回復：
驗證發生的時間由您使用的驗證器控制。
您可以從 EditContext 接收兩個事件：
OnValidationRequested在被呼叫時EditContext.Validate或作為表單提交程序的一部分被呼叫。
OnFieldChanged 每次更改欄位值時都會呼叫。
驗證器使用這些事件來觸發它的驗證程序，并將結果輸出到 EditContext 的 ValidationMessageStore。
DataAnnotationsValidator 連接兩個事件并在呼叫任一事件時觸發驗證。
還有其他驗證器，撰寫自己的驗證器并不太難。除了那些來自通常的控制供應商的產品之外，還有 Blazored 或我的。我的記錄在這里 - https://shauncurtis.github.io/articles/Blazor-Form-Validation.html。它有一個DoValidationOnFieldChange設定！
uj5u.com熱心網友回復：
您可以跳過使用該DataAnnotationsValidator組件，而是在SubmitForm方法中執行以下操作：
private void SubmitForm()
{
EditContext.AddDataAnnotationsValidation();
EditContext.Validate();
}
這是完整的代碼...請注意，我沒有使用 EditForm 的 Model 屬性。相反，我使用 EditForm 的 EditContext 屬性
<EditForm EditContext="@EditContext" OnValidSubmit="SubmitForm">
<ValidationSummary />
<div class="form-group">
<label for="name">Name: </label>
<InputText Id="name" Class="form-control" @bind-Value="@Model.Name"></InputText>
<ValidationMessage For="@(() => Model.Name)" />
</div>
<div class="form-group">
<label for="body">Text: </label>
<InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text"></InputTextArea>
<ValidationMessage For="@(() => Model.Text)" />
</div>
<button type="submit" class="btn btn-success">Submit</button>
</EditForm>
@code {
private EditContext EditContext;
private Comment Model = new Comment();
protected override void OnInitialized()
{
EditContext = new EditContext(Model);
base.OnInitialized();
}
private void SubmitForm()
{
// Adds DataAnnotations validation support to the EditContext.
// instead of the removed DataAnnotationsValidator component
EditContext.AddDataAnnotationsValidation();
// Validates the EditContext.
EditContext.Validate();
}
public class Comment
{
[Required]
[MaxLength(10,ErrorMessage="Name too long")]
public string Name { get; set; }
[Required]
public string Text { get; set; }
}
}
慣用解法
我的回答是慣用的解決方案嗎？我不知道。完成了嗎？我不知道...如果您正在尋找慣用的解決方案，那么可以提供它的合適人選是 Steve Sanderson。現在談論 Blazor 中的慣用解決方案和良好實踐還為時過早。我這樣做是因為我覺得如此，沒有別的。
我正在使用 ValidationMessage 組件，以便您可以看到驗證何時生效。
uj5u.com熱心網友回復：
@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 StackOverflowAnswers;
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 StackOverflowAnswers;
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>
.......
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/390891.html