提交注册表单时意外触发原有登录页面Ajax调用的问题咨询

问题成因 #

• 事件绑定选择器范围过大：你当前使用通用选择器$("form")绑定submit事件，会匹配页面内所有表单元素，跳转至注册页后，注册页的表单提交动作也会触发该绑定逻辑。
• 全局ID选择器冲突：代码中获取邮箱、密码输入值使用$("#email")、$("#psw")这种全局ID选择器，如果注册页表单使用了相同的ID属性，会直接读取注册表单的输入值发送给登录校验接口。
• 单页应用场景事件未销毁：如果你的项目是SPA单页应用，跳转注册页是前端路由切换而非整页刷新，之前绑定的表单submit事件不会自动销毁，会一直保留在当前页面上下文。
• 公共脚本全局引入：如果登录逻辑的JS代码被作为公共脚本全局加载，即便是整页跳转进入注册页，注册页也会加载执行这段代码，导致注册表单提交触发登录校验逻辑。

可行解决方案 #

1. 限定事件绑定范围
   将表单submit事件的绑定对象从全局的form改为仅匹配登录表单的ID选择器，修改后的代码如下：

$(document).ready(function () {
    // 只给登录表单绑定提交事件
    $("#loginForm").on('submit', function (event) {
        // 获取输入值也限定在当前登录表单范围内，避免ID冲突
        var data = {
            'email': $(this).find("#email").val(),
            'psw': $(this).find("#psw").val()
        };
        $.ajax({
            type: "POST",
            url: 'SignUp_SignIn/CredentialCheck',
            data: data,
            success: function (result) {
                if (result == true) {
                        $("#message").text("Login attempt was successful");
                }
                else {
                        $("#message").text("Email/Password didn't match any results");
                }
            },
            error: function () {
                alert("It failed");
            }
        });
        return false;
    });
});

2. 脚本按需加载
   如果是多页应用，不要把这段登录逻辑的JS代码打包进全局公共脚本，仅在登录页单独引入即可，避免注册页加载到不需要的登录逻辑代码。
3. SPA场景主动销毁事件
   如果是单页应用，在登录页面卸载/路由离开的生命周期钩子中，主动移除绑定的submit事件，代码示例：

// 路由离开前执行
$("#loginForm").off('submit');

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