js zur Realisierung von Login- und Registrierungsfunktionen

js zur Realisierung von Login- und Registrierungsfunktionen

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung von Anmelde- und Registrierungsfunktionen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Suchen Sie zunächst in der phpstudy-Datei eine Datei mit dem Namen „www“ und erstellen Sie darin HTML-, JS- und PHP-Dateien.

2. Stellen Sie in der Navicat-Software eine Verbindung zu MySQL von phpstudy her.

3. Suchen Sie in der Navicat-Software eine Datenbank und erstellen Sie eine Tabelle;

4. Schreiben Sie HTML-Code (wie in Abbildung 1 unten gezeigt), um eine einfache Registrierungsformularstruktur zu schreiben und das Formular über JS zu überprüfen. Klicken Sie auf „Registrieren“, um zur PHP-Datei zu springen.

5. PHP-Code (siehe Abbildung 2 unten) Holen Sie sich zuerst den Wert des Formulars im HTML-Code und suchen Sie dann nach den Daten im Formular, um eine Beurteilung vorzunehmen. Wenn der Benutzer vorhanden ist, springen Sie zurück zur vorherigen HTML-Seite. Nachdem der Benutzername erfolgreich festgelegt wurde, werden die Daten automatisch in der zuvor erstellten Tabelle in der Navicat-Software gespeichert. Springen Sie nach dem Speichern zur Anmeldeseite.

6. Springen Sie zur Anmeldeseite (siehe Abbildung 3). Nachdem Sie die Anmeldeseite aufgerufen haben, können Sie zur Überprüfung den zuvor registrierten Benutzernamen und das Kennwort eingeben. Der Überprüfungsprozess besteht darin, zunächst zu überprüfen, ob der Benutzername vorhanden ist, und dann zu überprüfen, ob das Kennwort korrekt ist. Wenn der Benutzername nicht vorhanden ist, springen Sie zurück, um das Kennwort erneut einzugeben. Wenn das Kennwort falsch ist, wird der Benutzer aufgefordert, das Kennwort erneut einzugeben. Wenn beide korrekt sind, springen Sie zur PHP-Anmeldedatei.

7. Springen Sie zur PHP-Anmeldedatei (siehe Abbildung 4). Rufen Sie den Anmeldenamen ab und überprüfen Sie ihn in der Datenbank. Wenn bei der Überprüfung ein Problem auftritt, wird ein Popup-Fenster angezeigt. Wenn die Überprüfung erfolgreich ist, wird eine Kopie des Benutzernamens im Browser gespeichert.

8. Nach erfolgreichem Login können Sie auf unsere Homepage springen, um Zugriff zu erhalten

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <form action="register.php" method="POST">
        <Tabelle>
            <caption>Registrieren</caption>
            <tr>
                <td>Benutzername:</td>
                <td><input type="text" name="Benutzername"></td>
            </tr>
            <tr>
                <td>Passwort:</td>
                <td><input type="Passwort" name="Passwort"></td>
            </tr>
            <tr>
                <td>Passwort bestätigen:</td>
                <td><input type="Passwort" name="repass"></td>
            </tr>
            <tr>
                <td>Mobiltelefonnummer:</td>
                <td><input Typ="Text" Name="Tel"></td>
            </tr>
            <tr>
                <td>E-Mail:</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td><input type="submit" value="Registrieren"></td>
            </tr>
        </Tabelle>
    </form>
</body>
<Skript>
    var form = document.querySelector('form');
    var Benutzername = document.querySelector('[name="Benutzername"]');
    var Passwort = document.querySelector('[name="Passwort"]');
    var repass = document.querySelector('[name="repass"]');
    var tel = document.querySelector('[name="tel"]');
    var E-Mail = document.querySelector('[name="E-Mail"]');
    var btn1 = document.querySelector('[Typ="submit"]');
    form.onsubmit = Funktion(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(Benutzername.Wert.trim())){
            alert('Bitte geben Sie den korrekten Benutzernamen ein');
            gibt false zurück;
        }
        var reg = /^\d{6,16}$/;
        wenn(!reg.test(passwort.wert.trim())){
            alert('Bitte geben Sie das richtige Passwort ein');
            gibt false zurück;
        }
        wenn(Passwort.Wert.trim() !== repass.Wert.trim()){
            alert('Zweimal falsches Passwort');
            gibt false zurück;
        }
        var reg = /^1[3-9]\d{9}$/;
        wenn(!reg.test(tel.value.trim())){
            alert('Bitte geben Sie Ihre Telefonnummer korrekt ein');
            gibt false zurück;
        }
        var reg = /^([1-9]\d{4,10}@qq|[a-zA-Z]\w{5,17}@(163|126))\.com$/;
        wenn(!reg.test(email.value.trim())){
            alert('Bitte geben Sie Ihre E-Mail-Adresse korrekt ein');
            gibt false zurück;
        }
    }
</Skript>
</html>
<?php
// Überarbeiten Sie das Kodierungsformat header("content-type:text/html;charset=utf8");
// Extrahieren Sie den Wert des Benutzernamens $username = $_POST['username'];
// Extrahieren Sie den Wert des Passworts $password = $_POST['password'];
// Extrahieren Sie den Wert von tel $tel = $_POST['tel'];
// Extrahieren Sie den Wert der E-Mail $email = $_POST['email'];
// Verbindung zur Datenbank herstellen $con = mysqli_connect("localhost","root","root","test");
// Benutzernamen in der Datenbank suchen $res = mysqli_query($con,"select * from register where username='$username'");
// Datenbankbenutzernamen suchen $row = mysqli_fetch_assoc($res);
// Prüfen, ob der Benutzername existiert if($row){
    echo ("<Skript>
    alert('Benutzername ist bereits vergeben');
    location.href='register.html';</script>");
}anders{
    // Daten zur Datenbank hinzufügen $res = mysqli_query($con,"insert register(username,password,tel,email) values('$username','$password',$tel,'$email')");
    // Beurteilen Sie, ob ($res) {
        echo ("<Skript>
        alert('Registrierung erfolgreich');
        location.href='land.html';</script>");
    }anders{
        echo ("<Skript>
        alert('Registrierung fehlgeschlagen, bitte registrieren Sie sich erneut');
        location.href='register.html';</script>");
    }
}
<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <form action="land.php" method="POST">
        <Tabelle>
            <caption>Anmelden</caption>
            <tr>
                <td>Benutzername:</td>
                <td><input type="text" name="Benutzername"></td>
            </tr>
            <tr>
                <td>Passwort:</td>
                <td><input type="Passwort" name="Passwort"></td>
            </tr>
            <tr>
                <td><input type="submit" value="Anmelden"></td>
            </tr>
        </Tabelle>
    </form>
</body>
<Skript>
    var form = document.querySelector('form');
    var Benutzername = document.querySelector('[name="Benutzername"]');
    var Passwort = document.querySelector('[name="Passwort"]');
    var btn1 = document.querySelector('[Typ="submit"]');
    form.onsubmit = Funktion(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(Benutzername.Wert.trim())){
            alert('Bitte geben Sie den korrekten Benutzernamen ein');
            gibt false zurück;
        }
        var reg = /^\d{6,16}$/;
        wenn(!reg.test(passwort.wert.trim())){
            alert('Bitte geben Sie das richtige Passwort ein');
            gibt false zurück;
        }
    }
</Skript>
</html>
<?php
Header('Inhaltstyp:Text/HTML;Zeichensatz=utf8');
$Benutzername = $_POST['Benutzername'];
$password = $_POST['Passwort'];
 
$con = mysqli_connect("localhost","root","root","test");
 
$res = mysqli_query($con,"Wählen Sie * aus dem Register aus, wo Benutzername = '$username'");
 
$row = mysqli_fetch_assoc($res);
 
wenn($row){
    wenn($row['password'] === $password){
        setcookie('Benutzername',$Benutzername);
        echo ("<Skript>
        alert('Anmeldung erfolgreich');
        location.href='Kommentar.html';</script>");
    }anders{
        echo ("<Skript>
        alert('Falsches Passwort');
        location.href='land.html';</script>");
    }
}anders{
    echo ("<Skript>
    alert('Benutzername existiert nicht');
    location.href='land.html';</script>");
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js implementiert einfach den Bestätigungscode der Benutzerregistrierungsinformationen
  • Gängige Javascript-Codes für die Benutzerregistrierung
  • JS implementiert die Funktion zum Abrufen eines SMS-Bestätigungscodes und eines Countdowns, wenn sich Benutzer registrieren
  • PHP-Benutzerregistrierungsseite verwendet js, um eine Formularüberprüfung durchzuführen (spezifisches Beispiel)
  • JS-Code, der zur Bestimmung der Passwortstärke bei der Benutzerregistrierung verwendet wird
  • Verwenden Sie Beans und Servlets in JSP, um die Benutzerregistrierung und -anmeldung zu implementieren
  • Ein einfaches Beispiel für den Effekt der Benutzerregistrierungsaufforderung in Javascript
  • So erstellen Sie schnell Node.js (Express)-Benutzerregistrierungs-, Anmelde- und Autorisierungsmethoden
  • Nodejs implementiert Benutzerregistrierungsfunktion
  • js implementiert die Countdown-Methode der Benutzerregistrierungsvereinbarung

<<:  MySQL wählt die richtige Speicher-Engine

>>:  Analyse der Prinzipien und der Nutzung von Docker-Container-Datenvolumes

Artikel empfehlen

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

Rendern Häufig verwendete Stile im Blog Garden /*...

Gespeicherte MySQL-Prozeduren und allgemeine Funktionscodeanalyse

Das Konzept der gespeicherten MySQL-Prozedur: Ein...

Erläuterung von JavaScript-Mikrotasks und Makrotasks

Vorwort: js ist eine Single-Thread-Sprache, daher...

Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten

vue+element UI kapselt eine öffentliche Funktion ...

Beispiele für häufige Nginx-Fehlkonfigurationen

Inhaltsverzeichnis Fehlender Stammspeicherort Off...

So fahren Sie nginx herunter/starten es neu

Schließung Dienst Nginx stoppen systemctl stoppt ...

Ausführliche Erklärung der Iteratoren in ECMAScript

Inhaltsverzeichnis Vorwort Frühere Iterationen It...

Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code

Inhaltsverzeichnis Grundlegende Konzepte von Dock...

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

Es gibt zwei Lösungen: Eine Möglichkeit ist CSS, b...

MySQL-Optimierungszusammenfassung – Gesamtzahl der Abfrageeinträge

1. COUNT(*) und COUNT(COL) COUNT(*) führt normale...

Lösungen für Probleme bei der Leistungsoptimierung von MySQL-Indizes

Die von MySQL erstellte Optimierung besteht im Hi...

Vue implementiert den Download von ZIP-Dateien

In diesem Artikelbeispiel wird der spezifische Co...

Datenabfragevorgang im MySQL-JSON-Format

Der Standardtabellenname ist „base_data“ und der ...

N Möglichkeiten, adaptive Teiler geschickt mit CSS zu implementieren

Trennlinien sind eine gängige Gestaltungsart auf ...

So führen Sie eine reibungslose if-Beurteilung in js durch

Inhaltsverzeichnis Vorwort Code-Implementierung I...