ホームページ > 記事 > ウェブフロントエンド > JavaScript ログイン インターフェイスは正常にジャンプします
JavaScript ログイン インターフェイスは正常にジャンプします
- WBOYオリジナル
- 2023-05-09 22:46:082816ブラウズ
現代の 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 を使用してログイン検証とページ ジャンプ機能を実装する Web ページを作成できます。もちろん、実際のニーズに応じて調整したり追加したりできる詳細や拡張機能は数多くあります。 以上がJavaScript ログイン インターフェイスは正常にジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。