ASP.NET MVC选中Email单选框时如何设置邮箱字段必填

你的现有代码存在嵌套form标签的HTML语法错误，两层form嵌套会导致提交逻辑异常，需要先删除外层多余的<form asp-action="Create">和对应的闭合标签，将asp-action="Create"属性加到内层带method="post"的表单标签上，最终表单起始标签为<form asp-action="Create" method="post">。

实现逻辑分三层：服务端模型校验兜底、视图标签绑定适配、前端即时交互校验，缺一不可。

1. 模型层添加条件校验（服务端兜底） #

不要在邮箱字段上加固定的[Required]特性，通过实现IValidatableObject接口写自定义条件校验逻辑，避免用户绕开前端校验提交非法数据：

using System.ComponentModel.DataAnnotations;

public class Complaint_form_Model : IValidatableObject
{
    // 其余原有属性（姓名、身份证、投诉内容等）保持不变，仅移除邮箱字段上的固定[Required]特性
    /// <summary>
    /// 首选沟通方式
    /// </summary>
    public string Preferred_communication_medium { get; set; }
    /// <summary>
    /// 邮箱地址
    /// </summary>
    public string Email_address { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        // 选中Email沟通方式时，邮箱必填
        if (Preferred_communication_medium == "Email" && string.IsNullOrWhiteSpace(Email_address))
        {
            yield return new ValidationResult(
                errorMessage: "选中Email作为沟通方式时，邮箱地址为必填项",
                memberNames: new[] { nameof(Email_address) }
            );
        }
        // 只要填写了邮箱，就校验格式合法性
        if (!string.IsNullOrWhiteSpace(Email_address) && !new EmailAddressAttribute().IsValid(Email_address))
        {
            yield return new ValidationResult(
                errorMessage: "请输入有效的邮箱地址",
                memberNames: new[] { nameof(Email_address) }
            );
        }
    }
}

2. 视图层代码调整 #

• 移除邮箱输入框上硬编码的required属性，改用MVC Tag Helper绑定模型字段，同时添加验证消息占位标签，校验失败时自动展示错误提示
• 单选按钮统一用asp-for绑定模型属性，修正原有label for和input id不匹配的小bug（比如id为Call_Back的单选，label for不能写Call Back，否则点击标签无法选中）
  相关代码片段修改后如下：

<!-- 沟通方式单选部分 -->
<div class="check_div">
    <input type="radio" id="Call_Back" asp-for="Preferred_communication_medium" value="Call Back">
    <label for="Call_Back">Call Back</label>
</div>
<div class="check_div">
    <input type="radio" id="Email" asp-for="Preferred_communication_medium" value="Email">
    <label for="Email">Email</label>
</div>

<!-- 邮箱输入部分 -->
<div class="individual_form">
    <label for="email_address" style="font-weight: 500;">Email Address<span style="color: rgb(185, 74, 72);">**</span></label>
    <input type="email" id="email_address" asp-for="Email_address">
    <!-- 验证消息占位 -->
    <span asp-validation-for="Email_address" class="text-danger"></span>
</div>

3. 前端即时校验逻辑 #

在你现有的Scripts区块添加JS逻辑，利用项目已经引入的jQuery Validate插件实现选单选时动态切换邮箱的必填规则，用户不用等提交到服务端就能看到提示：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            // 页面初始化时先根据默认选中项设置邮箱规则
            toggleEmailRequiredRule();

            // 监听沟通方式单选的切换
            $('input[name="Preferred_communication_medium"]').on('change', function () {
                toggleEmailRequiredRule();
                // 刷新邮箱字段的校验状态
                $('#email_address').valid();
            });

            function toggleEmailRequiredRule() {
                const emailInput = $('#email_address');
                const isEmailSelected = $('#Email').is(':checked');

                if (isEmailSelected) {
                    // 选中Email时，添加必填+邮箱格式校验规则
                    emailInput.rules('add', {
                        required: true,
                        email: true,
                        messages: {
                            required: "选中Email作为沟通方式时，邮箱地址为必填项",
                            email: "请输入有效的邮箱地址"
                        }
                    });
                } else {
                    // 选其他方式时，移除邮箱的必填、格式校验规则
                    emailInput.rules('remove', 'required email');
                }
            }
        });
    </script>
}

效果说明 #

• 用户选「Call Back」时，邮箱字段为非必填，填不填都可以提交
• 用户选「Email」时，邮箱自动变为必填项，同时校验邮箱格式，空值或者格式错误会实时提示
• 就算用户禁用JS绕过前端校验，服务端模型校验也会拦截非法提交，不会出现脏数据

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