Question

我正在尝试验证我的表单，以便如果用户没有输入用户名或密码，则不允许他登录该网站。出于某种原因，当我输入用户名和密码字段，然后单击登录时，不会显示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>

Answer 1

您的提交按钮包含在指向a的{{1}}元素中，而不是在提交表单后如何正确重定向。由于event bubbling and/or capturing，这也会导致处理事件的问题。

实际上，您尚未指定表单应将其数据发送到login.html标记的位置：

form

其中（默认情况下）表示表单会将其数据发送到当前页面（导致同一页面重新加载，但在此更新的加载中可以访问表单数据）。

要将数据发送到其他页面/资源，表单需要具有<form id="loginform" name="loginform" method="post">属性，该属性指定目标的路径：

action

有关提交表单的详细信息，请参阅this。

Stack Overflow的代码段环境不允许表单提交，但请查看this Fiddle，其中包含有效代码的更新版本。

JavaScript验证表无效

1 个答案: