Question

我在页面（Home.html）上有一个登录表单，其中包含电子邮件ID和密码。它使用javascript验证并重定向到另一个页面（Login.html）

function redirect() {
  var email = $('#email').val();
  var password = $('#password').val();
  if(email=='user@gmail.com' && password=='user')
     window.location = 'Login.html';
  else
     alert("Wrong credentials");
}


<form onsubmit='redirect()' method='post'>

如果输入了错误的凭据，则会按预期显示警告框，但是如果输入了正确的凭据，则会在转到Login.html时重新加载Home.html

我尝试将window.location更改为window.location.href，但这没有帮助。

如果未使用表单标记，则它可以正常工作，并且在按钮标记中使用onclick来调用redirect（）函数。

Answer 1

<form onsubmit='redirect();return false;' method='post'>

Answer 2

如果您使用重定向方法return false，则不会提交表单，发生错误时请尝试return false。

function redirect() {
  var email = $('#email').val();
  var password = $('#password').val();
  if(email=='user@gmail.com' && password=='user')
     window.location = 'Login.html';
  else
   {
     alert("Wrong credentials");
    return false;
  }
}

将表单更改为

<form onsubmit='return redirect()' method='post'>

Answer 3

提交表单会导致加载新页面。这将取消JS从其提交事件中执行的任何location赋值。

由于您没有操作属性，因此加载的新页面是与现有页面具有相同URL的页面。

您需要取消提交事件的默认行为（即表单提交）。快速而肮脏的方法是从提交事件处理函数返回false：

<form onsubmit='redirect(); return false;' method='post'>

现代代码会使用JavaScript绑定事件处理程序，而不是首先使用内部事件处理程序：

<form method='post'>

和

function redirect(event) {
  var email = $('#email').val();
  var password = $('#password').val();
  if(email=='user@gmail.com' && password=='user')
     window.location = 'Login.html';
  else
     alert("Wrong credentials");
  event.preventDefault();
}

document.querySelector("form").addEventListener("submit", redirect);

强健代码将被写为unobtrusively，因此如果JavaScript failed（it will），则表单将正常提交，服务器端代码将执行活动。< / p>

除此之外，用户重定向到的用户名，密码和不安全的URL都在页面的源代码中可见，因此您确实需要在服务器上执行此操作，并且只在服务器上执行此操作。< / p>

Javascript：window.location重新加载编写脚本的同一页面

3 个答案: