ASP.NET MVC中动态行文本框的联动必填校验需求

我来帮你搞定这个动态多行文本框的校验问题！核心需求就是：只要某行里有一个文本框填了内容，那该行所有文本框都必须填；如果一行里全是空的，就可以跳过。下面分前端和后端两种方案，前端提升用户体验，后端做安全兜底。

前端JavaScript校验方案 #

首先得给动态生成的行和输入框加统一的标识，方便JS定位。修改你的Razor代码，给每行加类名和行ID标识，每个输入框加统一类名：

@{ int count = 0; }
@foreach (var record in Model) {
    <tr class="dynamic-row" data-row-id="@count">
        <td>
            @Html.Hidden($"Row[{count}].Id", record.Id)
            @Html.TextBox($"Row[{count}].Field1", record.Field1, new { @class = "row-input" })
        </td>
        <td>
            @Html.TextBox($"Row[{count}].Field2", record.Field2, new { @class = "row-input" })
        </td>
        <!-- 这里可以继续加更多文本框，保持class="row-input"即可 -->
    </tr>
    count++;
}

然后写JS逻辑，监听输入变化并做校验：

// 监听每个输入框的内容变化，实时更新必填状态
document.querySelectorAll('.row-input').forEach(input => {
    input.addEventListener('input', function() {
        // 获取当前输入框所在的行
        const currentRow = this.closest('.dynamic-row');
        const rowInputs = currentRow.querySelectorAll('.row-input');
        
        // 判断当前行有没有已填写的输入框
        const hasFilled = Array.from(rowInputs).some(input => input.value.trim() !== '');
        
        // 给该行所有输入框设置必填状态
        rowInputs.forEach(input => {
            input.required = hasFilled;
        });
    });
});

// 表单提交时做最终校验，防止用户绕过实时校验
document.querySelector('form').addEventListener('submit', function(e) {
    let isFormValid = true;
    
    document.querySelectorAll('.dynamic-row').forEach(row => {
        const rowInputs = row.querySelectorAll('.row-input');
        const filledInputs = Array.from(rowInputs).filter(input => input.value.trim() !== '');
        
        // 如果一行里填了部分但没填全，标记为无效
        if (filledInputs.length > 0 && filledInputs.length < rowInputs.length) {
            isFormValid = false;
            row.classList.add('border-danger'); // 给错误行加高亮样式
            alert(`第${parseInt(row.dataset.rowId)+1}行：请填写所有字段，或者全部留空！`);
        } else {
            row.classList.remove('border-danger');
        }
    });
    
    if (!isFormValid) {
        e.preventDefault(); // 阻止表单提交
    }
});

后端C#兜底校验方案 #

前端校验可以被用户篡改绕过，所以后端必须做兜底校验。在你的HttpPost Action里，从FormCollection中提取动态行的数据，按行分组后校验：

[HttpPost]
public ActionResult YourSubmitAction(FormCollection form)
{
    // 提取所有以"Row["开头的表单字段，按行号分组
    var rowGroups = form.AllKeys
        .Where(key => key.StartsWith("Row["))
        .GroupBy(key => 
        {
            // 从字段名中提取行号，比如"Row[0].Field1" → "0"
            var start = key.IndexOf('[') + 1;
            var end = key.IndexOf(']');
            return key.Substring(start, end - start);
        });
    
    // 遍历每一行做校验
    foreach (var rowGroup in rowGroups)
    {
        // 获取当前行所有字段的值（去除前后空格）
        var rowValues = rowGroup.Select(key => form[key].Trim()).ToList();
        // 判断当前行是否有已填写的内容
        var hasFilledContent = rowValues.Any(val => !string.IsNullOrEmpty(val));
        
        // 如果有填写内容，但存在空字段，就添加错误信息
        if (hasFilledContent && rowValues.Any(val => string.IsNullOrEmpty(val)))
        {
            // 行号+1是因为用户看到的序号是从1开始的
            ModelState.AddModelError(string.Empty, $"第{int.Parse(rowGroup.Key)+1}行必须填写所有字段，或者全部留空！");
        }
    }
    
    // 如果校验不通过，返回原视图显示错误
    if (!ModelState.IsValid)
    {
        // 重新获取你的Model数据（比如从数据库或其他地方）
        var model = GetYourModelData();
        return View(model);
    }
    
    // 校验通过，处理业务逻辑
    // ...
    
    return RedirectToAction("Success");
}

这样不管用户怎么操作，前端能实时给反馈，后端也能确保数据符合规则，完美解决你的校验问题！

内容的提问来源于stack exchange，提问作者Ashir K.