Die JavaScript-Anmeldeschnittstelle springt erfolgreich-Front-End-Fragen und Antworten-php.cn

Die JavaScript-Anmeldeschnittstelle springt erfolgreich

WBOY

Freigeben： 2023-05-09 22:46:08

Original

2836 Leute haben es durchsucht

Im modernen Webentwicklungsbereich ist die Login-Schnittstelle ein sehr verbreitetes Feature. In der Welt von JavaScript können wir viele Bibliotheken und Frameworks verwenden, um diese Funktion zu erreichen. In diesem Artikel wird anhand eines einfachen Beispiels gezeigt, wie Sie mit JavaScript eine Anmeldeschnittstelle schreiben und erfolgreich zur Seite springen.

Zuerst müssen wir ein Anmeldeformular in einer HTML-Seite erstellen. Das Formular sollte Felder für Benutzername und Passwort sowie eine Schaltfläche zum Senden enthalten. Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Wenn Sie diesem Formular einige Stile hinzufügen müssen, können Sie diese mithilfe eines CSS-Stylesheets festlegen.

Als nächstes müssen wir JavaScript-Code schreiben, um die Anmeldeüberprüfungs- und Seitensprungfunktionen zu implementieren. Wir können die jQuery-Bibliothek verwenden, um die Aufgabe zu vereinfachen. Der Code lautet wie folgt:

$(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('用户名或密码错误！');
    }
  });
});

Nach dem Login kopieren

Im obigen Code verwenden wir zunächst die Funktion $(document).ready(), um das Klickereignis der Anmeldeschaltfläche nach dem Laden der Seite zu binden. In der Click-Event-Handler-Funktion verwenden wir zunächst event.preventDefault(), um das standardmäßige Übermittlungsverhalten des Formulars zu verhindern. Anschließend erhalten wir die Werte für Benutzername und Passwort aus dem Formular und führen eine einfache Validierung durch. Wenn der Benutzername test und das Passwort 123 ist, dann verwenden wir window.location.href, um zur Seite success zu springen. HTML--Seite. Wenn die Überprüfung fehlschlägt, wird ein Eingabeaufforderungsfenster angezeigt. $(document).ready()函数来绑定登录按钮的点击事件。在点击事件处理函数中，我们首先使用event.preventDefault()来阻止表单默认的提交行为。然后，我们从表单中获取用户名和密码的值，并进行简单的验证。如果用户名是test，密码是123，则我们使用window.location.href将页面跳转到success.html页面中。如果验证失败，则会弹出一个提示框。

最后，我们还需要在服务器上创建一个success.html

Schließlich müssen wir auch eine success.html-Seite auf dem Server erstellen. Auf dieser Seite können einige Willkommensinformationen oder andere Inhalte angezeigt werden, um eine erfolgreiche Anmeldung anzuzeigen. Zum Beispiel:

<html>
  <head>
    <title>登录成功</title>
  </head>
  <body>
    <h1>欢迎！</h1>
    <p>您已成功登录！</p>
  </body>
</html>

Nach dem Login kopieren

Durch die obigen Schritte können wir eine Webseite schreiben, die JavaScript verwendet, um Anmeldeüberprüfungs- und Seitensprungfunktionen zu implementieren. Natürlich gibt es viele Details und Erweiterungen, die je nach tatsächlichem Bedarf angepasst und hinzugefügt werden können. 🎜

Das obige ist der detaillierte Inhalt vonDie JavaScript-Anmeldeschnittstelle springt erfolgreich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!