JavaScript表单验证通过后如何用POST方法提交到/login路由

你可以根据业务场景选择以下两种常用提交方式：

方案1：原生表单同步提交（提交后页面跳转） #

适用于后端处理完登录请求后需要跳转页面（如跳转到用户中心、首页）的场景。

1. 首先确保你的HTML表单标签已配置提交属性（也可以在JS中动态设置）：

<form id="login" action="/login" method="POST">
  <!-- 原有表单input内容 -->
</form>

2. 修改你的submit事件监听逻辑，验证通过后直接调用原生submit方法即可（该方法不会触发你绑定的submit事件监听器，不会重复触发验证逻辑，无死循环问题）：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    if(checkInputs()) {
        // 直接调用原生提交方法
        form.submit();
    }
});

方案2：Fetch异步提交（页面无刷新） #

适用于提交后不需要跳转页面，直接在当前页给用户反馈的场景，是现在前后端分离项目的主流选择。
根据后端接收的参数格式选择对应写法：

后端接收FormData格式参数 #

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    if(checkInputs()) {
        fetch('/login', {
            method: 'POST',
            body: new FormData(form)
        }).then(res => {
            if(res.ok) {
                alert('登录成功')
                // 可自定义后续逻辑，比如手动跳转页面
                // window.location.href = '/dashboard'
                return
            }
            alert('登录失败，请检查账号密码')
        }).catch(err => {
            console.error('提交请求出错：', err)
        })
    }
});

后端接收JSON格式参数 #

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    if(checkInputs()) {
        fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: email.value.trim(),
                password: password.value
            })
        }).then(res => {
            if(res.ok) {
                alert('登录成功')
                // 可自定义后续逻辑
                // window.location.href = '/dashboard'
                return
            }
            alert('登录失败，请检查账号密码')
        }).catch(err => {
            console.error('提交请求出错：', err)
        })
    }
});

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