我正在尝试验证我的表单,以便如果用户不输入用户名或密码,则不允许他登录该网站。出于某种原因,当我同时输入用户名和密码字段并单击登录时,login.html 页面不会出现。有帮助吗?
<script>
window.onload = function(){
function handleinput(){
if(document.loginform.username.value == ""){
document.getElementById("usernameError").innerHTML = "You must enter a username";
return false;
}
if(document.loginform.password.value == ""){
document.getElementById("passwordError").innerHTML = "You must enter a password";
return false;
}
}
document.getElementById("loginform").onsubmit = handleinput;
}
</script>
<form id="loginform" name="loginform" method="post">
<div>
<label hidden> Username</label>
<input type= "text" class="text" placeholder="Username" title="Username" name="username">
<span id="usernameError"></span>
<label hidden> Password </label>
<input type= "password" class="text" placeholder="Password" title="Password" name="password">
<span id="passwordError"></span>
<a href="" class="anchor-float">Forgot password?</a>
</div>
<div class="button-container">
<a href="login.html" target="_blank"> <input type= "submit" value="Login" class="login"/>
</a>
<input type= "button" value="Sign up" class="login signup"/>
</div>
</form>
最佳答案
您将提交按钮包裹在指向 login.html
的 a
元素中,这不是在提交表单后正确重定向的方法。由于event bubbling and/or capturing,这也会导致处理事件的问题。 .
实际上,您还没有在 form
标记中指定表单应将其数据发送到的位置:
<form id="loginform" name="loginform" method="post">
这(默认情况下)意味着表单会将其数据发送到当前页面(导致同一页面重新加载,但在此更新的加载中可以访问表单数据)。
要将数据发送到不同的页面/资源,表单需要有一个 action
属性来指定到目的地的路径:
<form id="loginform" name="loginform" method="post" action="login.html">
参见 this有关提交表单的详细信息。
Stack Overflow 的代码片段环境不允许提交表单,但请查看 this Fiddle它具有您的代码的更新版本。
关于JavaScript 验证表单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41123441/