Question

我想制作一个简单的验证表单，但我有一点错误我无法解决。在我点击登录元素后，我想要一个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）为什么我的验证表不起作用？

谢谢

Answer 1

如果您将功能移到身体上，以便在呼叫时可以使用，则可以正常使用。

Demo

No wrap - in <body>

另外，请修正comma splice。程序员为什么如此喜欢在警报信息中使用它们？： - ）

隐藏/显示验证表单问题

1 个答案: