隐藏/显示验证表单问题答案

【问题标题】：Hide/Show validation form issue隐藏/显示验证表单问题
【发布时间】：2014-10-09 00:37:59
【问题描述】：

我想制作一个简单的验证表单，但我遇到了一个无法修复的小错误。单击登录元素后，我希望出现一个 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) 为什么每次点击提交时login_window一直隐藏？

2) 为什么我的验证表单不起作用？

谢谢

【问题讨论】：

回答你的第一个问题：login_window.style.display = "none";
只是要指出......永远不要在真实世界应用程序上使用javascript用户名/密码验证，因为它可以被任何人阅读......
你有一个计时问题：未捕获的 ReferenceError: validate_login is not defined

标签： javascript validation hide show

【解决方案1】：

如果你将你的函数移动到正文中，以便在调用时可用，它就可以工作。

Demo

No wrap - in <body>

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

【讨论】：

另外，请原谅我，但我还是 programmin 的新手，你能告诉我如何在浏览器中执行此操作吗？
这只是意味着您将在结束 </body> 标记之前添加一个<script> 标记。 DOM 元素需要在脚本加载之前存在。