javascript - 使用javascript重定向到同一文件夹中的另一个页面

Question

我正在开发更改密码页面。在此页面中，用户输入新密码并确认新密码。如果两个密码不匹配，它应该在同一页面中。如果密码匹配，则用户将被定向到另一个页面。我已经尝试了所有重定向页面的方法，但它没有发生。请帮忙!

function f1()
{
        var newpass = document.getElementById('npass').value;
        var confirmpass = document.getElementById('cpass').value;

        if(newpass!=confirmpass)
        {
            document.getElementById('npass').value = "";
            document.getElementById('cpass').value = "";
            alert("Password Mismatch. Please enter again!");

           //window.location.href = "/file.html";
           // window.location = 'file.html';
           // window.location.replace('file.html');
           //window.location.assign("file.html");
            //window.location.href = "file.html";
        }
        else
        {
            alert("Password Match");


         //   window.location.href= "/file.html";


        // document.write("check");

        }
    }

 </script>



<form method="POST" onsubmit="f1()">

<label for="npass">New Password:</label>
<input type="password" id="npass" placeholder="Enter New Password" 
name="newpassword" required="required" size="8">

<label for="cpass">Confirm Password:</label>
<input type="password" id="cpass" placeholder="Confirm New Password" 
name="cpass" required="required" size="8"><br><br>
<input type="submit" class="btn btn-info" name="submit" value="Submit">
</form>

警告框正在工作，但页面重定向没有发生。我已经尝试了代码中显示的所有重定向方法。但仍然没有工作。 JavaScript 新手。请帮忙

Answer 1

在您的方法中，仅返回 false 会有所帮助。这样您就可以避免提交表单。

function f1() {
  var newpass = document.getElementById('npass').value;
  var confirmpass = document.getElementById('cpass').value;

  if (newpass != confirmpass) {
    document.getElementById('npass').value = "";
    document.getElementById('cpass').value = "";

    alert("Password Mismatch. Please enter again!");

    //window.location.href = "/file.html";
    // window.location = 'file.html';
    // window.location.replace('file.html');
    //window.location.assign("file.html");
    //window.location.href = "file.html";
  } else {
    alert("Password Match");
    //   window.location.href= "/file.html";
    // document.write("check");
  }

  return false;
}

<form method="POST" onsubmit="return f1()">

  <label for="npass">New Password:</label>
  <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8">

  <label for="cpass">Confirm Password:</label>
  <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br>
  <input type="submit" class="btn btn-info" name="submit" value="Submit">
</form>

另一方面，如果您可以控制重定向用户，为什么还要使用表单元素。你想要默认的表单验证吗？或许!如果不是这种情况，您可以删除表单元素并将点击事件绑定(bind)到您的按钮。

function f1() {
  var newpass = document.getElementById('npass').value;
  var confirmpass = document.getElementById('cpass').value;

  if (newpass.trim() === '') {
    alert("Password is required.");
    return;
  }
  
  if (confirmpass.trim() === '') {
    alert("Password confirmation is required.");
    return;
  }
  
  if (newpass != confirmpass) {
    document.getElementById('npass').value = "";
    document.getElementById('cpass').value = "";

    alert("Password Mismatch. Please enter again!");

    //window.location.href = "/file.html";
    // window.location = 'file.html';
    // window.location.replace('file.html');
    //window.location.assign("file.html");
    //window.location.href = "file.html";
  } else {
    alert("Password Match");
    //   window.location.href= "/file.html";
    // document.write("check");
  }
}

document.querySelector('.btn').addEventListener('click', f1)

<label for="npass">New Password:</label>
  <input type="password" id="npass" placeholder="Enter New Password" name="newpassword" required="required" size="8">

  <label for="cpass">Confirm Password:</label>
  <input type="password" id="cpass" placeholder="Confirm New Password" name="cpass" required="required" size="8"><br><br>
  <input type="submit" class="btn btn-info" name="submit" value="Submit">