Asp.Net Core 结合Ajax实现模态框表单验证提交问题咨询

你当前代码失效的核心原因是$.post是异步请求，Validate_Register函数不会等待ajax请求返回结果，就会直接执行末尾的return true，所以不管校验结果如何，表单都会直接提交，校验逻辑完全不生效。

第一步：调整表单结构 #

给表单添加唯一ID，同时补充mobile_User参数对应的表单控件（你的Register接口需要接收该参数，之前的代码缺失）：

<form asp-controller="Account" asp-action="Register" id="registerForm">
<div class="form-area" id="Register-Form" hidden>
    <div class="form-group">
    <input type="password" name="user_Password" class="input-field" maxlength="6" id="Register-NewPassword">
    </div>
    <div class="form-group">
    <!-- 补充手机号字段，替换value为实际存储的用户手机号 -->
    <input type="hidden" name="mobile_User" id="Login_Mobile" value="你的用户手机号">
    <input type="number" class="input-field" maxlength="6" autocomplete="off" id="Register-ActiveCode"> 
    </div>
    <div class="form-group text-center">
    <button  type="submit" class="mybtn">保存</button>
    </div>
</div>
</form>

第二步：重写校验逻辑 #

删除原来的Validate_Register函数，改为监听表单的submit事件，先阻止默认提交，等异步校验通过后再手动提交表单：

$('#registerForm').on('submit', function(e) {
    // 先阻止表单默认提交行为
    e.preventDefault();
    // 读取校验需要的参数
    const mobile = $('#Login_Mobile').val();
    const activeCode = $('#Register-ActiveCode').val();
    
    $.post("/Account/CheckActiveCode", {
        Mobile: mobile, 
        ActiveCode: activeCode
    }, function (data) {
        if (data == 1) {
            // 校验失败，弹出错误提示
            $.alert({
                title: '错误',
                content: '激活码不正确',
                rtl: true,
                closeIcon: true,
                type: 'red',
                typeAnimated: true,
                buttons: {
                    confirm: {
                        text: '确定',
                        btnClass: 'btn-red',
                    }
                }
            });
        } else {
            // 校验通过，调用原生DOM的submit方法提交表单，不会触发二次监听
            $('#registerForm')[0].submit();
        }       
    });
});

• 原生DOM的submit方法不会触发jQuery绑定的submit事件，不会出现循环调用的问题
• 不推荐把$.post改为同步请求的实现方式，同步请求会阻塞浏览器交互，用户体验很差

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