在現代的web開發領域中，登入介面是一個非常常見的功能。在JavaScript的世界裡，我們可以使用很多函式庫和框架來實現這個功能。本文將透過一個簡單的範例來示範如何使用JavaScript編寫登入介面，並成功進行頁面跳躍。
首先，我們需要在HTML頁面中建立一個登入表單。該表單應包含使用者名稱和密碼字段，還應該有一個提交按鈕。程式碼如下：
<form>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<button type="submit" id="login-button">登录</button>
</div>
</form>這個表單要加一些樣式的話，可以用CSS樣式表來設定。
接下來，我們需要編寫JavaScript程式碼來實作登入驗證和頁面跳轉功能。我們可以使用jQuery函式庫來簡化任務。程式碼如下：
$(document).ready(function() {
$('#login-button').click(function(event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
if (username == 'test' && password == '123') {
window.location.href = 'success.html';
} else {
alert('用户名或密码错误！');
}
});
});上面的程式碼中，我們先在頁面載入完成之後，使用$(document).ready()函數來綁定登入按鈕的點擊事件。在點擊事件處理函數中，我們首先使用event.preventDefault()來阻止表單預設的提交行為。然後，我們從表單中取得使用者名稱和密碼的值，並進行簡單的驗證。如果使用者名稱是test，密碼是123，則我們使用window.location.href將頁面跳到success.html頁面中。如果驗證失敗，則會跳出提示框。
最後，我們還需要在伺服器上建立一個success.html頁面。該頁面可以顯示一些歡迎訊息或其他內容，以表示登入成功。例如：
<html>
<head>
<title>登录成功</title>
</head>
<body>
<h1>欢迎！</h1>
<p>您已成功登录！</p>
</body>
</html>透過上述步驟，我們就可以寫一個使用JavaScript實作登入驗證和頁面跳轉功能的網頁。當然，還有很多細節和擴展部分可以根據實際需求進行調整和補充。
以上是javascript登入介面成功跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
