MVC开发登录页时点击提交触发的Javascript函数执行被截断如何解决？

你的代码存在3个核心问题，逐一说明如下：

• 事件绑定错误
  onsubmit是表单<form>的专属事件，你把它写在登录按钮的标签上根本不会触发。即使后续换用onclick事件，也需要在事件回调里返回false才能阻止表单提交，不然校验逻辑跑一半页面就跳转了，看起来就像函数执行中断。
• Razor变量直接注入JS导致语法报错
  当loginError为null的时候，你写的if (@loginError != null)渲染到前端后会变成if ( != null)，这是非法的JS语法，会直接抛出异常终止函数运行。就算loginError有值，要是内容里包含单引号、换行符等特殊字符，var message = '@loginError'这行也会因为字符串闭合问题触发语法错误，导致函数中断。
• 逻辑时序错误
  loginError是服务端渲染页面时就已经确定的变量，不需要等用户点击提交按钮才判断要不要弹出提示，完全可以在页面加载完成后直接执行判断逻辑。

修复后代码示例 #

@{
    string loginError = (string)ViewData["loginError"];
}

<script type="text/javascript">
// 页面加载完成后直接判断错误提示
window.onload = function() {
    // 先把服务端变量做安全编码，避免JS语法错误
    const loginError = @Html.Raw(Json.Encode(loginError));
    if (loginError) {
        alert(loginError);
    }
}

// 如果确实需要提交前校验可以保留这个函数，绑定到form的onsubmit事件
function checkLogin() {
    const username = document.querySelector('input[name="username"]').value.trim();
    const password = document.querySelector('input[name="password"]').value.trim();
    if (!username || !password) {
        alert('请输入用户名和密码');
        return false; // 阻止表单提交
    }
    return true;
}
</script>

<!-- 把onsubmit绑定到form标签上 -->
<form class="login-form" action="/Login/Login" method="POST" onsubmit="return checkLogin()">
    <div class="login-form__content">
        <div class="login-form__header">Login to your account</div>
        <input class="login-form__input" type="text" name="username" placeholder="Username">
        <input class="login-form__input" type="password" name="password" placeholder="Password">
        <button class="login-form__button" type="submit">Login</button>
        <p></p>
        <button class="login-form__button" type="submit" formaction="/Register/Create" id="signupbutton">Sign up</button>
    </div>
</form>

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