如何防止表单提交，执行一些JavaScript，然后在将数据传递到节点时运行表单？

我正在处理一个个人信息页面（参见下图），我希望用户在提交表单之前检查旧密码时更改其凭据。这就是我正在寻找的事件序列

用户更改了一些数据并按下了按钮

（客户端）从用户检索旧密码的警报

（客户端）在节点中传递旧密码以检查是否正确

（服务器端）更改步骤1中的数据

上述事件的顺序可能不是实现这一目标的最佳方式，因此我很高兴听到你的建议

EJS:

节点：

---

我曾尝试使用npm

sweetalert

sweetalert2

和

alert节点

，但甚至无法获得简单的警报。我还查看了

主体解析器

，但据我所知，它可以访问DOM元素（如果我错了，请纠正我）。我不知道如何使用

警报

/

提示

您看过控制台了吗？如果代码中的某个地方有语法错误，而您没有显示，则该函数将永远不会执行。@Teemu，控制台中没有错误或其他错误。提示按预期执行。当我将表单从

更改为

时，也可以正常工作，但我不验证旧密码。同时执行这些操作将导致在不执行JS函数的情况下提交表单？在这种情况下，您拒绝了当前页面的警报窗口（当浏览器询问“请勿打开此页面上的邮件”之类的问题时，勾选复选框）。对不起，我的错。当执行

时，将执行JS而不是Node，因为我阻止了事件的发生。您看过控制台了吗？如果代码中的某个地方有语法错误，而您没有显示，则该函数将永远不会执行。@Teemu，控制台中没有错误或其他错误。提示按预期执行。当我将表单从

更改为

时，也可以正常工作，但我不验证旧密码。同时执行这些操作将导致在不执行JS函数的情况下提交表单？在这种情况下，您拒绝了当前页面的警报窗口（当浏览器询问“请勿打开此页面上的邮件”之类的问题时，勾选复选框）。对不起，我的错。执行

时，将执行JS，但不会执行Node，因为我阻止了该事件

<form id="personalInfoForm">
    <input type="text" name="settings_f_name" value="<%= data[0].value %>" placeholder="Enter new first name"> 
    <input type="text" name="settings_l_name" value="<%= data[1].value %>" placeholder="Enter new last name"> 
    <input type="email" name="settings_email" value="<%= data[2].value %>" placeholder="Enter new email-address" required> 
    <input type="password" name="settings_password" placeholder="Enter password"> 
    <input type="password" name="settings_password_confirmed"  placeholder="Confirm your password"> 

    <button type="submit" class="btn btn-primary ml-auto">Update Profile</button>
</form>

const personalInfoForm = document.getElementById("personalInfoForm");

personalInfoForm.addEventListener("submit", (e) => {
    e.preventDefault();

    var password;
    var person = prompt("Please enter your old password:", "");
    if (person == null || person == "") {
      password = "Please provide your old password in order to submit the request.";
    } else {
      password = "Your personal information have changed.";
    }

    alert(password);

    //CALL action='/setNewPersonalInformation' method='POST'
    //check if old password matches
    //change credentials
});

router.post('/setNewPersonalInformation', redirectLogin, async (req, res) => {
    let id = req.session.userId;
    let f_name = req.body.settings_f_name;
    let l_name = req.body.settings_l_name;
    let email = req.body.settings_email;
    let password_a = req.body.settings_password;
    let password_b = req.body.settings_password_confirmed;
    let hashedPass = 0;
    let sqlQuery = "";
    let db_data = [];
    
    //***********************************
    //CHECK IF OLD PASSWORD MATCHES AND THEN PROCEED
    //***********************************


    //Check if password matches the confirmed password
    if(password_a == password_b){

        let password_to_hash = password_a;
        try{
            hashedPass = await bcrypt.hash(password_to_hash, saltRounds);
        }catch(err){
            console.log(err);
        }
        db_data = [f_name, l_name, email, hashedPass, id]; //Data to change on the database
        sqlQuery = "UPDATE student_demographics SET first_name = ?, last_name = ?, email = ?, password = ? WHERE id = ?";
        

        getConnection().query(sqlQuery, db_data, async (err, results, fields) => {
            //Do changes
        });
    }
});