隐藏/显示验证表单问题

我想制作一个简单的验证表单，但是我得到了一个我无法修复的错误。当我点击一个登录元素后，我想要一个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

如果你移动你的函数体内所谓的可行时，它的工作原理。

Demo

No wrap - in <body>

另外，请修复您的comma splice。为什么程序员非常喜欢在警报消息中使用它们？ :-)

来源

2014-10-08 16:37:59 isherwood

非常感谢你:) – user3786923 2014-10-08 21:05:58

还请原谅我，但即时通讯仍然新与programmin，你能告诉我如何做到这一点在浏览器中？ – user3786923 2014-10-08 21:09:26

这意味着您只需在结束标签“”前添加'

隐藏/显示验证表单问题

回答

相关问题