时间戳

首页 > 解决方案 > 为什么 `return()` 和 `onsubmit()` 在 html 中创建登录表单以欢迎页面时不起作用

javascript - 为什么 `return()` 和 `onsubmit()` 在 html 中创建登录表单以欢迎页面时不起作用

问题描述

在 HTML、CSS、js 中创建欢迎页面的登录表单时，面临的问题是返回语句不起作用。

为 HTML 内置 javascript 创建代码。

<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>
	<div class="loginbox">
	<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
	<h1>Login Here</h1><br>
		<form action="loginbox.html" method="post" onsubmit="return validate()">
			<div>
			<p>user name</p>
			<input type="text" name="" placeholder="Enter User name" id="user name">
			</div><br>
			<div>
			<p>password</p>
			<input type="password" name="" placeholder="Enter password" id="password">
			</div><br>
            <input type="submit" name="" value="login"><br>
			<a href="#">Lost your pasword??</a><br>
			<a href="#">don't have an account??</a>
		</form>
	</div>
    
    <script type="text/javascript">
    var attempt = 3;
	function validate()
	{
        var user name= document.getElementById("user name").value;
        var password= document.getElementById("password").Value;

		if(user name.value=="dr" && password.value=="8428")
		{      
             
            return true;
        }
		else{
			attempt --;// Decrementing by one.
            alert("You have left "+attempt+" attempt;");
            // Disabling fields after 3 attempts.
            if( attempt == 0){
            document.getElementById("username").disabled = true;
            document.getElementById("password").disabled = true;
            document.getElementById("submit").disabled = true;
            return false;
		}
	}
	</script>
   
</body>
</html>

使用 return false 语句它应该停止进入欢迎页面，但在这段代码中它不起作用，它会进入下一页。

尝试onsubmit="return false; validate();"在使用此代码时整个块停止并且不会进入欢迎页面。

标签： javascripthtmlcss

解决方案

您在 id 属性中使用了不正确的空格，id 属性不能有任何空格。另外，您在提交按钮上缺少 id="submit" 。在您的代码中，JS 无法执行此行

            document.getElementById("submit").disabled = true;

因为提交按钮没有任何 ID。以下已修复错误。这应该工作

<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div class="loginbox">
    <img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
    <h1>Login Here</h1><br>
        <form action="loginbox.html" method="post" onsubmit="return validate()">
            <div>
            <p>user name</p>
            <input type="text" name="" placeholder="Enter User name" id="username">
            </div><br>
            <div>
            <p>password</p>
            <input type="password" name="" placeholder="Enter password" id="password">
            </div><br>
            <input type="submit" name="" value="login" id="submit"><br>
            <a href="#">Lost your pasword??</a><br>
            <a href="#">don't have an account??</a>
        </form>
    </div>

    <script type="text/javascript">
    var attempt = 3;
    function validate()
    {
        var username= document.getElementById("username").value;
        var password= document.getElementById("password").Value;

        if(username == "dr" && password == "8428")
        {      

            return true;
        }
        else{
            attempt --;// Decrementing by one.
            alert("You have left "+attempt+" attempt;");
            // Disabling fields after 3 attempts.
            if( attempt == 0){
            document.getElementById("username").disabled = true;
            document.getElementById("password").disabled = true;
            document.getElementById("submit").disabled = true;
            return false;
        }
    }
    </script>

</body>
</html>

推荐阅读