Question

以下程序无法按预期工作。我想检查用户名和密码，如果它们是正确的，那么我需要将我的页面导航到提到的html。即使我提供了正确的用户名和密码，我得到的值也不正确。请更正代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>License Management System-Login</title>
</head>
<body bgcolor="00CCCC">
<h1 style="text-align:center">License Management System</h1>
<h3 style="text-align:center">Login</h3>
<div align="center">
<form method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
</tr>
</table>
</form>
</div>
</body>
<script type="text/javascript">

function validate(){
    var username = document.getElementsByName("username").value;
    var password = document.getElementsByName("password").value;

    if ( username === "admin" && password === "admin"){
        alert ("Login successfully");
        window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
        return true;
    }
    else{
            alert("Enter the correct details");
            return false;
        }
}
</script>
</html>

Answer 1

getElementsByName返回一个集合。您需要添加[0]以获取用户名和密码的值。

var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;

Answer 2

您的getElementsByName systax不正确。使用下面的代码，你会得到适当的价值。：）

<强>解决方案

<!DOCTYPE html>
<html>
    <head>        
        <title>License Management System-Login</title>
        <script type="text/javascript">
            function validate() {
                var username = document.getElementsByName("username")[0].value;
                var password = document.getElementsByName("password")[0].value;

                if (username === "admin" && password === "admin") {
                    alert("Login successfully");
                    window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
                    return true;
                }
                else {
                    alert("Enter the correct details");
                    return false;
                }
            }
        </script>
    </head>
    <body bgcolor="00CCCC">
        <h1 style="text-align:center">License Management System</h1>
        <h3 style="text-align:center">Login</h3>
        <div align="center">
            <form method="post">
                <table>
                    <tr>
                        <td>User Name:</td>
                        <td><input type="text" name="username"></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>    
</html>

Answer 3

使用getElementById("id")

并向控件添加id属性。删除名称属性。

带有Javascript验证的Html

3 个答案: