堆棧內存溢出
  簡體   English   中英

在Spring Framework中進行用戶驗證后，Javascript將不會移至下一個網頁

[英]Javascript will not move to the next webpage after user validation in a Spring Framework

 原文  2016-11-01 07:11:56  2   6    javascript/ html/ spring/ spring-mvc

問題描述

在讓用戶移動到網頁的另一部分之前，我嘗試進行簡單的驗證檢查。 不用擔心，這只是設置一個簡單的版本，我永遠不會在js中將密碼和用戶名作為變量讓所有人看到。 這只是一個起點，可以測試我的URL在我的網頁中的流向。

我的代碼有兩個問題。 因此，當我輸入正確的用戶名並傳遞時，它可以正常工作並說重定向，但它不會重定向到網頁。 它只是重新加載登錄頁面，卻無處可去。

第二個問題是，當我輸入錯誤的密碼時，嘗試計數永遠不會低於2。

感謝您對此的任何幫助。

這是我正在使用的腳本 

<html>
<head>
<script>
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "gus" && password == "cool"){
        alert ("Login successfully");
        window.location.href = "/hub/hubpage"; // Redirecting to other page.
        return false;
    }
    else{
        attempt --;// Decrementing by one.
        alert("You have left "+attempt+" attempt;");
        // Disabling fields after 3 attempts.
        if( attempt == 0){
        document.getElementById("username").disabled = true;
        document.getElementById("password").disabled = true;
        document.getElementById("submit").disabled = true;
        return false;
    }
}
}
</script>
</head>

<body>
<h2>Login Page </h2>
<a href="/hub/hubpage">Hub</a>

<br/>
<br/>
<form action = "">
<fieldset>
<legend>Login Infomration</legend>
    <label>User Name :</label><br/>
    <input type="text" name="username" id="username"/><br/>
    <label>Password :</label><br/>
    <input type="password" name="password" id="password"/><br/>
    <br/>
    <input type="submit" value ="Login" onclick ="validate()">
</fieldset>
</form>

</body>
</html>

href中心頁可以很好地用作鏈接，所以我知道它可以到達那里

6 個解決方案

解決方案1
 1  2016-11-01 07:16:01

試試下面的代碼： 

    <script>
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "gus" && password == "cool"){
        alert ("Login successfully");
        window.location.href = "/hub/hubpage"; // Redirecting to other page.
        return false;
    }
    else{
        attempt --;// Decrementing by one.
        alert("You have left "+attempt+" attempt;");
        // Disabling fields after 3 attempts.
        if( attempt == 0){
        document.getElementById("username").disabled = true;
        document.getElementById("password").disabled = true;
        document.getElementById("submit").disabled = true;

    }
    return false;
}
}
</script>

解決方案2
 1  2016-11-01 07:18:08

代替window.location使用window.location.href 

<script>
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "gus" && password == "cool"){
        alert ("Login successfully");
        window.location.href = "/hub/hubpage"; // Redirecting to other page.
        return false;
    }
    else{
        attempt --;// Decrementing by one.
        alert("You have left "+attempt+" attempt;");
        // Disabling fields after 3 attempts.
        if( attempt == 0){
        document.getElementById("username").disabled = true;
        document.getElementById("password").disabled = true;
        document.getElementById("submit").disabled = true;
        return false;
    }
}
}
</script>

解決方案3
 1  2016-11-01 07:18:24

成功驗證后，刪除return false； 聲明，因為這阻止了表單的提交。 

function validate(){
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   if ( username == "gus" && password == "cool"){
        alert ("Login successfully");
        window.location.href = "/hub/hubpage"; // Redirecting to other page.
        //return false; 
    }
    else{
        attempt --;// Decrementing by one.
        alert("You have left "+attempt+" attempt;");
        // Disabling fields after 3 attempts.
        if( attempt == 0){
        document.getElementById("username").disabled = true;
        document.getElementById("password").disabled = true;
        document.getElementById("submit").disabled = true;
        return false;
    }
  }
}

對於第二個問題，我不確定哪里出了問題，因為這對我來說很好。

解決方案4
 1  2016-11-01 07:18:43

使用location.assign（“ http://www.w3schools.com ”）; 用於從登錄頁面重定向

解決方案5
 1 已采納  2016-11-01 07:43:12

對於第一個問題，將輸入類型更改為按鈕。 <input type="button" value ="Login" onclick ="validate();">對於第二個問題，請嘗試try attempt = attempt - 1; try attempt = attempt - 1;

解決方案6
 0  2016-11-01 07:39:02

該代碼正在工作... 

<html>
<head>
    <script>
        var attempt = 3;

        function validate(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if ( username == "gus" && password == "cool"){

            alert ("Login successfully");

            window.location = "/hub/hubpage";
        }

        else{
            attempt--;

            alert("You have left " + attempt + " attempt;");

            if( attempt == 0){
                document.getElementById("username").disabled = true;
                document.getElementById("password").disabled = true;
                document.getElementById("submit").disabled = true;
            }
        }

        return false;
    }
</script>
</head>

<body>
    <h2>Login Page </h2>

    <a href="/hub/hubpage">Hub</a>

    <br/>
    <br/>

    <form action = "" onsubmit="return validate()">
        <fieldset>
            <legend>Login Infomration</legend>
            <label>User Name :</label><br/>
            <input type="text" name="username" id="username"/><br/>
            <label>Password :</label><br/>
            <input type="password" name="password" id="password"/><br/>
            <br/>
            <input type="submit" value ="Login">
        </fieldset>
    </form>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript 頁面上的驗證錯誤，但可以轉到下一步 選中javascript選項卡式菜單，直到用戶移至下一個菜單 移動到Javascript中的下一個表 如何在網頁中的javascript中移動幻燈片 在第一個表單驗證javascript之后移至第二個表單 Javascript庫/框架/小工具，允許用戶在頁面上移動和調整div的大小 用戶授權后使用PHP或Javascript保存Facebook網頁 如何在 Javascript 警報/確認框后將用戶重定向到新網頁 Javascript表單驗證按鈕：表單有效后進入下一頁 如果不填寫表單中的一個字段，則我的光標不應移至javascript驗證中的下一個字段
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM