這相當簡單，我正在嘗試使登錄按鈕起作用，如果電子郵件和密碼中的內容與以下內容匹配，則重定向到不同的檔案（placeholder.html）：
登錄：管理員密碼：Password123
我還沒有讓登錄按鈕首先作業以重定向，并且id喜歡通過使用'onlick ='和js中的函式或id現在將其保留為按鈕元素。
非常感謝您的幫助:) 抱歉，如果這有點草率，這是我第一次在這里尋求幫助，哈哈
到目前為止，這是我所擁有的，它可以充分發揮作用：
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
<a href="register.html">Create an account</a>
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("login_button").onclick = function () {
location.href = "#placeholder";
};
</script>
</html>
uj5u.com熱心網友回復：
歡迎來到 StackOverflow，作為答案的一部分，我想在這里介紹一些內容。
該功能正在運行onClick，但您使用的方式location.href無效。您正在重定向到一個錨點（它以 a 開頭#），在瀏覽器中實作的方式是，如果您的頁面上有一個 ID 為placeholder(并且頁面高度超過 100%）它會移動頁面的滾動位置，而不是重定向。
我相信你正在尋找
location.href = "placeholder.html";
您希望根據用戶輸入的用戶名和密碼重定向用戶，我將在下面提供解決方案，但在此之前，我想說這不安全，用戶名和密碼在源代碼中可見，如果你計劃用它來隱藏重要資訊它不起作用，因為任何訪問網頁的人都可以看到代碼，你應該使用 NodeJS 或 PHP 等服務器端語言來隱藏該資訊，我認為這只是練習/學習。
您要做的第一件事是獲取用戶名和密碼。
你<input type="email_" placeholder="email"/>應該是<input type="text" placeholder="email"/>。出于某種原因，您將型別設定為看起來是拼寫錯誤email_，而不是email因為您說用戶名admin是text.
我將首先為用戶名和密碼元素提供一個 ID。
<input type="email" id="username" placeholder="email"/>
<input type="password" id="password" placeholder="password"/>
然后在您的函式中，您可以將其更改為檢查和重定向，如下所示
document.getElementById("login_button").onclick = function () {
const username = document.getElementById("username").value
const password = document.getElementById("password").value
if (username === 'Admin' && password === 'Password123') {
location.href = "placeholder.html";
}
};
這也將區分大小寫。
uj5u.com熱心網友回復：
有幾種方法可以做到這一點，這是一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<link href="style." rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="login-page">
<div name="login" class="form">
<div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
Login Form
</div>
<form class="login-form" action="login.php" method="post">
<input type="email_" placeholder="email"/>
<input type="password" placeholder="password"/>
<button id="login_button" onclick="login()">login</button>
<p class="message" style="font-family: Roboto, sans-serif;">Not registered?
<a href="register.html">Create an account</a>
</p>
</form>
</div>
</div>
</body>
<script type="text/javascript">
function login() {
// Login logic here
if (loginSuccesful) {
window.location.href = "/placeholder.html";
}
}
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424362.html
標籤：javascript html 验证
上一篇：按鈕型別提交-如何首先驗證