如何在ASP.NET Core MVC中验证JavaScript动态创建的表单元素

问题根因分析 #

你的代码存在三类核心错误，才会导致校验通过后无法提交：

• 事件绑定逻辑错误：你把表单submit事件的绑定逻辑嵌套在了提交按钮的click事件内，每次点击提交按钮都会重复绑定submit事件，逻辑会出现不可预期的混乱
• 校验逻辑完全不符合需求：
  1. 输入框校验部分：只要第一个输入框为空就直接判定校验失败，完全不符合「至少一个输入框有值即可」的要求
  2. 所有checkbox校验部分：只要同组第一个checkbox未勾选就直接判定校验失败，和你需要的「至少一个勾选」逻辑完全相反
• unbind时机错误，且校验通过后没有主动触发提交逻辑

修正后的代码 #

$(function () {
    // 直接绑定表单submit事件，不要嵌套在click事件里
    $("#fupForm").submit(function (e) {
        // 先清空所有错误提示
        $("#tableEmpty, #Person_errorMSG, #From_errorMSG, #To_errorMSG").html("");
        var valid = true;

        // 校验至少一个文本输入框有值
        var hasInputValue = false;
        $('#dataTable tbody tr td input[type=text]').each(function () {
            if ($(this).val().trim() !== '') {
                hasInputValue = true;
                return false; // 找到有值的就终止遍历
            }
        });
        if (!hasInputValue) {
            valid = false;
            $("#tableEmpty").html("Please Choose a Service");
        }

        // 校验.check类至少一个勾选
        var hasCheck = $('.check:checked').length > 0;
        if (!hasCheck) {
            valid = false;
            $("#Person_errorMSG").html("Please choose a person");
        }

        // 校验.Fromcheck类至少一个勾选
        var hasFromCheck = $('.Fromcheck:checked').length > 0;
        if (!hasFromCheck) {
            valid = false;
            $("#From_errorMSG").html("Please choose a City");
        }

        // 校验.Tocheck类至少一个勾选
        var hasToCheck = $('.Tocheck:checked').length > 0;
        if (!hasToCheck) {
            valid = false;
            $("#To_errorMSG").html("Please choose a To city");
        }

        // 校验不通过才阻止提交，通过的话直接走默认提交逻辑即可
        if (!valid) {
            e.preventDefault();
        }
    });
});

优化说明 #

1. 直接绑定表单submit事件，不需要额外绑定提交按钮的click事件，点击提交按钮会自动触发表单的submit事件
2. 所有「至少一个满足条件」的校验都直接用选择器统计符合条件的元素数量，不需要自己遍历判断，逻辑更简洁不易出错
3. 只有校验不通过的时候才调用e.preventDefault()阻止提交，校验通过时不做任何干预，表单会自动按默认逻辑提交

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