如何在Blazor中对多个复选框进行后端验证？

针对你遇到的后端验证需求，这里提供两种可靠的实现方式：

方案一：使用IValidatableObject自定义验证逻辑 #

这种方式更灵活，适合复杂的验证场景，直接在ViewModel中编写验证规则：

修改PendingViewModel #

using System.ComponentModel.DataAnnotations;

public class PendingViewModel : IValidatableObject
{
    public string CriteriaMessage { get; set; }
    public bool checkboxA { get; set; }
    public bool checkboxB { get; set; }
    public bool checkboxC { get; set; }

    // 自定义验证逻辑
    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        // 检查是否至少选中一个复选框
        if (!checkboxA && !checkboxB && !checkboxC)
        {
            yield return new ValidationResult(
                "必须至少选中一个选项！",
                // 指定关联的字段，让错误提示可以对应到这些复选框
                new[] { nameof(checkboxA), nameof(checkboxB), nameof(checkboxC) }
            );
        }
    }
}

调整Razor页面代码 #

使用EditForm和DataAnnotationsValidator自动触发验证，同时可以用ValidationSummary或ValidationMessage展示错误：

<EditForm Model="@PendingViewModel" OnValidSubmit="@Save">
    <DataAnnotationsValidator />
    <!-- 显示所有验证错误的汇总 -->
    <ValidationSummary />

    <InputTextArea class="" id="" @bind-Value="PendingViewModel.CriteriaMessage" />
    <ValidationMessage For="@(() => PendingViewModel.CriteriaMessage)" />

    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxA" />
    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxB" />
    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxC" />
    <!-- 针对单个字段显示错误，也可以用ValidationSummary统一展示 -->
    <ValidationMessage For="@(() => PendingViewModel.checkboxA)" />

    <button type="submit">保存</button>
</EditForm>

@code {
    private PendingViewModel PendingViewModel = new();

    private void Save()
    {
        // 验证通过后执行保存逻辑
        // 示例：将ViewModel映射到PendingModel，再保存到数据库
        var model = new PendingModel
        {
            CriteriaMessage = PendingViewModel.CriteriaMessage,
            checkboxA = PendingViewModel.checkboxA,
            checkboxB = PendingViewModel.checkboxB,
            checkboxC = PendingViewModel.checkboxC
        };
        // 这里添加数据库保存代码
    }
}

方案二：修复计算属性的验证触发（基于原代码改造） #

如果你想保留原有的Range属性方案，需要确保验证系统能感知到计算属性的变化，通过实现INotifyPropertyChanged接口来通知属性更新：

修改PendingViewModel #

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class PendingViewModel : INotifyPropertyChanged
{
    public string CriteriaMessage { get; set; }

    private bool _checkboxA;
    public bool checkboxA
    {
        get => _checkboxA;
        set
        {
            _checkboxA = value;
            OnPropertyChanged(nameof(checkboxA));
            // 当checkbox值变化时，通知validateCheckbox属性也更新了
            OnPropertyChanged(nameof(validateCheckbox));
        }
    }

    private bool _checkboxB;
    public bool checkboxB
    {
        get => _checkboxB;
        set
        {
            _checkboxB = value;
            OnPropertyChanged(nameof(checkboxB));
            OnPropertyChanged(nameof(validateCheckbox));
        }
    }

    private bool _checkboxC;
    public bool checkboxC
    {
        get => _checkboxC;
        set
        {
            _checkboxC = value;
            OnPropertyChanged(nameof(checkboxC));
            OnPropertyChanged(nameof(validateCheckbox));
        }
    }

    [NotMapped]
    [Range(typeof(bool), "true", "true", ErrorMessage = "必须至少选中一个选项！")]
    public bool validateCheckbox => checkboxA || checkboxB || checkboxC;

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

调整Razor页面代码 #

同样使用EditForm和DataAnnotationsValidator来自动处理验证：

<EditForm Model="@PendingViewModel" OnValidSubmit="@Save">
    <DataAnnotationsValidator />

    <InputTextArea class="" id="" @bind-Value="PendingViewModel.CriteriaMessage" />
    <ValidationMessage For="@(() => PendingViewModel.CriteriaMessage)" />

    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxA" />
    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxB" />
    <InputCheckbox class="" id="" @bind-Value="PendingViewModel.checkboxC" />
    <!-- 显示validateCheckbox的验证错误 -->
    <ValidationMessage For="@(() => PendingViewModel.validateCheckbox)" />

    <button type="submit">保存</button>
</EditForm>

@code {
    private PendingViewModel PendingViewModel = new();

    private void Save()
    {
        // 验证通过后执行保存逻辑
        var model = new PendingModel
        {
            CriteriaMessage = PendingViewModel.CriteriaMessage,
            checkboxA = PendingViewModel.checkboxA,
            checkboxB = PendingViewModel.checkboxB,
            checkboxC = PendingViewModel.checkboxC
        };
        // 数据库保存代码
    }
}

注意事项 #

• 原代码中Save方法直接实例化新的PendingViewModel会清空用户输入，这是错误的，应该在验证通过后执行数据映射和保存操作。
• 后端验证必须在保存到数据库前触发，使用EditForm的OnValidSubmit会自动在提交时执行验证，只有验证通过才会进入Save方法。

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