输入密码后，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>