输入密码后的 JavaScript 简单重定向

Question

我只想点击一个按钮，然后，如果你输入正确的密码，它应该将你重定向到另一个页面，但如果你输入错误，它应该什么都不做。

下面的代码可以工作，但如果你弄错了，它也会将你重定向到成功页面。我只是希望它只有在你做对的情况下才会重定向。

   <div class="wrapper">
    <form class="form1" action="http://google.com">
        <div class="formtitle">
            Enter the password to proceed
        </div>

        <div class="input nobottomborder">
            <div class="inputtext">
                Password:
            </div>

            <div class="inputcontent">
                <input type="password" id="password" /><br />
            </div>
        </div>

        <div class="buttons">
            <input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'hello') alert('Correct Password!'); else alert('Wrong Password!');" />
        </div>
    </form>
</div>

Answer 1

当密码不同时，您必须添加 return false。这可以防止默认操作和事件传播。如果您有该选项，您还可以使用 jquery 获取元素及其值。

这取决于您希望如何在服务器端或仅在客户端进行处理。 仅在客户端，我们可以将 type="submit" 更改为 type="button"。

        <div class="wrapper">
            <form class="form1" action="http://google.com">
                <div class="formtitle">
                    Enter the password to proceed
                </div>

                <div class="input nobottomborder">
                    <div class="inputtext">
                        Password:
                    </div>

                    <div class="inputcontent">
                        <input type="password" id="password" /><br />
                    </div>
                </div>

                <div class="buttons">
                    <input class="orangebutton" type="button" value="Login" onclick="checkPassword()" />
                </div>
            </form>
        </div>

       <script>
      function checkPassword(){
       if(document.getElementById('password').value == 'hello'){
        alert('Correct Password!'); 
          location.href = "http://google.com";
         } else {
         alert('Wrong Password!');
          return false;
        }
       }
      </script>

Answer 2

你可以使用

location.href="http://google.com"

这将重定向页面

Answer 3

这应该通过 onclick 函数来完成，而不是内联的 if 语句。糟糕的编程习惯，如果编码正确，会更容易查看和操作。

<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'hello') alert('Correct Password!'); else alert('Wrong Password!');" />

改为

<input class="orangebutton" type="submit" value="Login" onclick="passCheck()" />

使用 passCheck() 函数应该怎么做。

Answer 4

主要问题是表单提交，因为它是一个表单，你需要先禁用这个提交，然后验证表单。

检查这个：https://jsfiddle.net/sg8pw2vL/1/

 <div class="wrapper">
        <form method="POST" class="form1" onsubmit="return checkPassword();  return false;">
            <div class="formtitle">
                Enter the password to proceed
            </div>

            <div class="input nobottomborder">
                <div class="inputtext">
                    Password:
                </div>

                <div class="inputcontent">
                    <input type="password" id="password" /><br />
                </div>
            </div>

            <div class="buttons">
                <input class="orangebutton" type="submit" value="Login"  />
            </div>
        </form>
    </div>

   <script>
  function checkPassword(){
   if(document.getElementById('password').value == 'hello'){
    alert('Correct Password!'); 
    location.href="http://google.com";
     } else {
     alert('Wrong Password!');
      return false;
    }
   }
  </script>