Express注册表单密码不匹配时如何弹出alert替代res.send提示

需求说明 #

• 替换现有注册逻辑中密码不匹配时res.send("Passwords are not matching")的跳转页提示
• 改为在当前页面弹出内容为Passwords are not matching的alert弹窗，不跳转新页面

现有代码 #

注册表单HTML代码 #

<form action="/register" id="RegForm" method = "POST">
         <input type="text" placeholder="Username" name="username">
         <input type="email" placeholder="E-mail" name="email">
         <input type="password" placeholder="Password" name="password">
         <input type="password" placeholder="Confirm Password" name="confirmPassword">
         <input type="submit" class="btn" value="Create account"/>
         <a class="loginAnchor" href="/">Already a user? Sign up</a>
</form>

Express.js 后端接口代码 #

app.post("/register", async (req,res) =>{
    try{
        const password = req.body.password;
        const cpassword = req.body.confirmPassword;
        if(password === cpassword){
            const registerEmployee = new Register({
                username : req.body.username,
                email : req.body.email,
                password : password,
                confirmPassword : cpassword
            })
            const registered = await registerEmployee.save();
            res.status(201).render("login");
        }
        else{
            // 此处需要替换为弹窗提示逻辑
            res.send("Passwords are not matching");
        }
    }catch(error){
        res.status(400).send(error);
    }
})

具体修改步骤 #

推荐优先做前端前置校验，响应速度更快，同时保留后端校验防止恶意请求绕过前端验证。

1. 前端添加提交前校验（无需发请求即可提示） #

在表单所在的HTML页面底部添加如下脚本，拦截表单默认提交事件，提交前先校验两次密码是否一致：

<script>
const regForm = document.getElementById('RegForm');
regForm.addEventListener('submit', (e) => {
    const password = document.querySelector('input[name="password"]').value;
    const confirmPassword = document.querySelector('input[name="confirmPassword"]').value;
    if(password !== confirmPassword) {
        // 阻止表单默认提交跳转行为
        e.preventDefault();
        alert('Passwords are not matching');
    }
})
</script>

加完这部分之后，用户两次输入密码不一致时会直接在当前页弹alert，不会发请求到后端，也不会跳转页面。

2. 修改后端返回逻辑（兼容绕过前端校验的请求） #

为了防止用户直接构造请求绕过前端校验，把后端密码不匹配分支的返回改成JSON格式的错误响应，不要直接返回纯文本触发页面跳转：

// 把原else分支的res.send替换为如下代码
else{
    return res.status(400).json({
        error: "Passwords are not matching"
    })
}

如果需要完全走后端校验逻辑，可以把表单默认提交改成异步提交，根据接口返回结果判断是否弹alert，修改上述脚本的提交逻辑即可：

regForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(regForm);
    const res = await fetch('/register', {
        method: 'POST',
        body: formData
    });
    if(res.ok) {
        // 注册成功跳转到登录页
        window.location.href = '/login';
    } else {
        const err = await res.json();
        alert(err.error);
    }
})

注意：如果用异步提交的方式，记得把后端注册成功的逻辑也改成返回JSON成功标识，不要直接render页面，否则前端无法正常处理跳转。

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