JavaScript ログインインターフェイスは正常にジャンプします-フロントエンドQ&A-php.cn

JavaScript ログインインターフェイスは正常にジャンプします

WBOY

リリース： 2023-05-09 22:46:08

オリジナル

2873 人が閲覧しました

現代の 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 サイトの他の関連記事を参照してください。

JavaScript ログイン インターフェイスは正常にジャンプします

JavaScript ログインインターフェイスは正常にジャンプします