Blazor中DataAnnotations Compare验证与浏览器自动填充冲突问题

问题现象 #

在Chrome/Edge浏览器中，使用密码生成工具自动填充新密码和确认密码后，修改新密码末尾添加字符时，确认密码会被浏览器同步更新为相同值，但表单仍提示“确认密码与新密码不匹配”的验证错误，需手动修改确认密码并切换焦点后才能消除错误。

重现步骤 #

• 使用浏览器密码生成工具（Chrome右键→建议密码）填充两个密码框。
• 在“新密码”框末尾添加任意字符，确认密码框会同步更新为相同值，但验证失败提示出现。
• 删除确认密码框最后一个字符，切换焦点后再添加相同字符，验证恢复正常。

原因分析 #

这是浏览器自动填充的DOM变更未被Blazor绑定系统捕获导致的验证延迟：

1. 浏览器自动同步确认密码字段时，直接修改了DOM值，但未触发Blazor的oninput或onchange事件，Blazor无法感知到ConfirmPassword属性的“变更”。
2. 当修改NewPassword时，Blazor仅验证NewPassword字段，而Compare属性的验证依赖ConfirmPassword与NewPassword的匹配，此时ConfirmPassword的验证状态还是旧的（基于之前的密码值），因此错误提示未自动清除。

解决方案 #

方法1：修改新密码绑定事件，手动触发全表单验证 #

通过获取EditContext引用，在NewPassword值变更后手动触发整个表单的验证，确保依赖字段的验证规则重新执行。

修改后的代码示例：

@page "/"
@using System.ComponentModel.DataAnnotations;

<PageTitle>Index</PageTitle>

<EditForm name="passwordForm" Model="MyModel" OnSubmit="@SubmitPasswordForm" @ref="editContextRef">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label for="NewPassword">New Password</label>
        <InputText @bind-Value="MyModel.NewPassword" 
                   @bind-Value:after="TriggerFullValidation"
                   class="form-control" 
                   id="NewPassword" 
                   name="NewPassword" 
                   type="password" 
                   autocomplete="new-password"></InputText>
        <ValidationMessage For="@(() => MyModel.NewPassword)" />
    </div>
    <div class="form-group">
        <label for="ConfirmNewPassword">Confirm Password</label>
        <InputText @bind-Value="MyModel.ConfirmPassword" 
                   class="form-control" 
                   id="ConfirmNewPassword" 
                   name="ConfirmNewPassword" 
                   type="password" 
                   autocomplete="new-password"></InputText>
        <ValidationMessage For="@(() => MyModel.ConfirmPassword)" />
    </div>

    <input id="submitResetPassword" type="submit" class="btn btn-default" value="Reset Password" />
</EditForm>

@code {
    private Model MyModel { get; set; } = new();
    private EditContext? editContextRef;

    private void SubmitPasswordForm()
    {
        // Do something with the password
    }

    private void TriggerFullValidation()
    {
        editContextRef?.Validate();
    }

    private class Model
    {
        [Required]
        public string? NewPassword { get; set; }
        [Required]
        [Compare(nameof(NewPassword))]
        public string? ConfirmPassword { get; set; }
    }
}

方法2：手动更新依赖字段的验证状态 #

如果不想触发全表单验证，可以仅更新ConfirmPassword字段的验证状态，将TriggerFullValidation方法替换为：

private void TriggerFullValidation()
{
    if (editContextRef != null)
    {
        var confirmField = editContextRef.Field(nameof(Model.ConfirmPassword));
        editContextRef.NotifyFieldChanged(confirmField);
        editContextRef.ValidateField(confirmField);
    }
}

说明 #

两种方法都能解决浏览器自动同步导致的验证异常问题，方法1更简单直接，方法2更轻量化，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Boatmarker