如何根据复选框状态动态控制Asp.NET Core中Pet字段的验证？

问题背景 #

我有一个显示文字为“Have a pet?”的复选框，以及一个包含'Dog'、'Cat'、'Other'选项的Pet下拉列表字段。需求是：

• 勾选复选框时，Pet字段设为必填项，用户必须选择一项
• 取消勾选复选框时，移除Pet字段的asp-validation-for="Pet"验证

现有模型代码：

[Required]
[BindProperty]
public int Pet {get; set;}

现有cshtml代码：

<div style="align-content: center;">
    <input type="checkbox" id="have-pet" />
    <label>Have a pet?</label>
</div>

<div class="form-floating">
    <select asp-for="Pet" asp-items="Html.GetEnumSelectList<Pets>()" class="form-control" id="pet">
        <option value="@null">Please Select</option>
    </select>
    <label asp-for="Pet"></label>
    <span asp-validation-for="Pet" class="text-danger"></span>
</div>

解决方案：分模型层和前端层处理 #

1. 模型层：修改为条件必填验证

原模型的[Required]是全局生效的，不符合动态需求，需要改成条件必填。可以通过实现IValidatableObject接口自定义验证逻辑：

[BindProperty]
public int Pet { get; set; }

// 新增属性绑定复选框状态
[BindProperty]
public bool HavePet { get; set; }

// 自定义验证逻辑
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
    // 假设Pets枚举的未选择默认值为0
    if (HavePet && Pet == 0)
    {
        yield return new ValidationResult("请选择宠物类型", new[] { nameof(Pet) });
    }
}

同时要把视图里的复选框绑定到HavePet属性：

<input type="checkbox" id="have-pet" asp-for="HavePet" />
<label asp-for="HavePet">Have a pet?</label>

2. 前端层：动态控制客户端验证

ASP.NET Core默认用jQuery Validate做客户端验证，编写脚本监听复选框状态变化，动态启用/禁用Pet字段的验证规则：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function() {
            // 页面加载时根据复选框初始状态设置验证
            togglePetValidation($('#have-pet').is(':checked'));

            // 监听复选框切换事件
            $('#have-pet').on('change', function() {
                togglePetValidation($(this).is(':checked'));
            });

            function togglePetValidation(isRequired) {
                var petField = $('#Pet');
                var validationMsg = $('span[data-valmsg-for="Pet"]');

                if (isRequired) {
                    // 启用验证：添加必填规则，更新提示样式
                    petField.rules('add', {
                        required: true,
                        messages: {
                            required: "请选择宠物类型"
                        }
                    });
                    validationMsg.removeClass('field-validation-valid').addClass('field-validation-error');
                } else {
                    // 禁用验证：移除必填规则，清空提示
                    petField.rules('remove', 'required');
                    validationMsg.text('').removeClass('field-validation-error').addClass('field-validation-valid');
                    // 手动触发验证，确保表单提交时不会校验该字段
                    petField.valid();
                }
            }
        });
    </script>
}

关键说明 #

• 模型层的自定义验证保证了后端接口的校验逻辑，避免前端绕过验证的情况
• 前端脚本通过jQuery Validate的rules()方法动态调整验证规则，同步更新提示消息的显示状态
• 复选框必须绑定到模型的HavePet属性，后端才能获取用户选择状态完成服务器端验证

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