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

WBOY

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

オリジナル

2709 人が閲覧しました

現代の Web 開発分野では、ログインインターフェイスは非常に一般的な機能です。 JavaScript の世界では、この機能を実現するために多くのライブラリとフレームワークを使用できます。この記事では、簡単な例を使用して、JavaScript を使用してログインインターフェイスを作成し、ページに正常にジャンプする方法を示します。

まず、HTML ページにログインフォームを作成する必要があります。フォームにはユーザー名とパスワードのフィールドが含まれ、送信ボタンも必要です。コードは次のとおりです。


  
    用户名：
    
  
  
    密码：

ログイン後にコピー

このフォームにスタイルを追加する必要がある場合は、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 ページを作成する必要もあります。このページには、ログインが成功したことを示すウェルカム情報やその他のコンテンツが表示されます。例:

登录成功