隱藏/顯示驗證表單問題

我想製作一個簡單的驗證表單，但是我得到了一個我無法修復的錯誤。當我點擊一個登錄元素後，我想要一個login_window出現（從display：none更改爲display：block）之後，我希望登錄和密碼輸入顯示出來。當我用「用戶名」和「密碼」填寫其他內容時，它應該顯示警告消息。取而代之的是它一直隱藏login_window即使沒有形式（我只是點擊提交和login_window是隱藏的）隱藏/顯示驗證表單問題

HTML：

<div id="login_window"> 
    <form name="login_form" onsubmit="return validate_login()" method="post"> 
     <label>Login</label> 
     <input type="text" name="usr" placeholder="username"><br> 
     <label>Sign In</label> 
     <input type="text" name="psw" placeholder="password"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div>

CSS：

#login { 
    position:absolute; 
    width:65px; 
    height:26px; 
} 


#login_window { 
    position:absolute; 
    width:400px; 
    height:460px; 
    background-color:#F0F0F0 ; 
    z-index:2; 
}

JS：

var login = document.getElementById("login"); 
var login_window = document.getElementById("login_window"); 
login_window.style.display = "none"; 

login.addEventListener("click",function(){  
    login_window.style.display = "block"; 
}); 


function validate_login(){ 
    var un = document.login_form.usr.value; 
    var pw = document.login_form.psw.value;           
    var username = "username"; 
    var password = "password"; 
    if((un == username) && (pw == password)){ 
     return true; 
    }else{ 
     alert("Login was unsuccesful, please enter the corrent name and password."); 
     return false; 
    }  
}

這裏是Fiddle

即使它在小提琴中的工作方式與在瀏覽器中的工作方式不同，我還有兩個問題。

1）爲什麼登錄窗口會一直隱藏，只要我點擊提交？

2）爲什麼我的驗證表單不工作？

謝謝

來源

2014-10-08 user3786923

回答第1個問題：'login_window.style.display =「none」;' – melancia 2014-10-08 16:21:35

只需指出...從不在真實世界*應用程序上使用javascript用戶名/密碼驗證，因爲它可以被任何人讀取.... – LcSalazar 2014-10-08 16:22:06

你有一個時間問題：未捕獲ReferenceError：validate_login沒有定義 – isherwood 2014-10-08 16:36:06

隱藏/顯示驗證表單問題

回答

相關問題