JS, CSS und HTML zur Implementierung der Registrierungsseite

Eine mit HTML und CSS implementierte Registrierungsseitenvorlage. Ohne weitere Umschweife hier der Code!

Update: Verwenden Sie JavaScript, um die Validierung von Benutzernamen- und Kennwortformularen zu implementieren.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Registrierungsseite</title>
    <Stil>
        *{
            Rand: 0px;
            Polsterung: 0px;
            Box-Größe: Rahmenbox;
        }
        Körper{
            Hintergrund: URL("img/register_bg.png") No-Repeat-Center;
            Polsterung oben: 25px;
        }

        .rg_layout{
            Breite: 900px;
            Höhe: 500px;
            Rand: 8px durchgezogen #EEEEEE;
            Hintergrundfarbe: weiß;
            /* Div horizontal zentrieren */
            Rand: automatisch;
        }

        .rg_left{
            /*Rand: 1px durchgehend rot;*/
            schweben: links;
            Rand: 15px;
        }
        .rg_left > p:erstes-Kind{
            Farbe: #FFD026;
            Schriftgröße: 20px;
        }

        .rg_left > p:letztes-Kind{
            Farbe: #A6A6A6;
            Schriftgröße: 20px;

        }
        .rg_center{
            schweben: links;
            /* Rand: 1px durchgehend rot;*/

        }

        .rg_right{
            /*Rand: 1px durchgehend rot;*/
            schweben: rechts;
            Rand: 15px;
        }

        .rg_right > p:erstes-Kind{
            Schriftgröße: 15px;

        }
        .rg_right pa {
            Farbe: rosa;
        }

        .td_left{
            Breite: 100px;
            Textausrichtung: rechts;
            Höhe: 45px;
        }
        .td_right{
            Polsterung links: 50px;
        }

        #Benutzername,#Passwort,#E-Mail,#Name,#Tel.,#Geburtstag,#Prüfcode{
            Breite: 251px;
            Höhe: 32px;
            Rand: 1px durchgezogen #A6A6A6;
            /*Randradius festlegen*/
            Rahmenradius: 5px;
            Polsterung links: 10px;
        }
        #Prüfcode{
            Breite: 110px;
        }

        #img_check{
            Höhe: 32px;
            vertikale Ausrichtung: Mitte;
        }

        #btn_sub{
            Breite: 150px;
            Höhe: 40px;
            Hintergrundfarbe: #FFD026;
            Rand: 1px durchgezogen #FFD026;
        }
        .Fehler {
            Farbe: rot;
        }
        #td_sub {
            Polsterung links: 150px;
        }

    </Stil>

    <Skript>
        //Implementierung der Überprüfung des Kontokennwortformulars window.onload = function () {
            //Binde das Onsubmit-Ereignis an das Formular //Das heißt, durch Klicken auf die Schaltfläche „Registrieren“ wird überprüft, ob Benutzername und Kennwort korrekt sind. document.getElementById("form").onsubmit = function () {
                //Rufen Sie die Benutzerverifizierungsmethode auf checkUsername();
                //Rufen Sie die Methode zur Kennwortüberprüfung auf checkPassword();
                returniere checkUsername() und checkPassword();
            }

            //Binden Sie das Defokussierungsereignis jeweils an den Benutzernamen und das Passwort //Wenn der Fokus ausgeschaltet ist, wird geprüft, ob Benutzername und Passwort korrekt sind //Beachten Sie, dass die Methode hier keine Klammern enthält document.getElementById("username").onblur = checkUsername;
            document.getElementById("Passwort").onblur = checkPassword;
        }

        //Benutzernamen prüfen Funktion checkUsername() {
            //1. Holen Sie sich den Wert des Benutzernamens var username = document.getElementById("username").value;
            //2. Definieren Sie den regulären Ausdruck var reg_username = /^\w{6,12}$/;
            //3. Bestimmen Sie, ob der Wert der regulären Regel entspricht var flag = reg_username.test(username);
            //4. Informationen zur Eingabeaufforderung var s_username = document.getElementById("s_username");

            wenn (Flagge) {
                //Eingabeaufforderung mit grünem Häkchen s_username.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
            } anders {
                //Hinweis, dass der rote Benutzername falsch ist s_username.innerHTML = "Das Benutzernamenformat ist falsch";
            }
            Flagge zurückgeben;
        }

        //Passwort prüfen Funktion checkPassword() {
            //1. Holen Sie sich den Wert des Benutzernamens var password = document.getElementById("password").value;
            //2. Definieren Sie den regulären Ausdruck var reg_password = /^\w{6,12}$/;
            // 3. Bestimmen Sie, ob der Wert der regulären Regel entspricht var flag = reg_password.test(password);
            //4. Informationen zur Eingabeaufforderung var s_password = document.getElementById("s_password");

            wenn (Flagge) {
                //Eingabeaufforderung mit grünem Häkchen s_password.innerHTML = "<img width='35' height='25' src='img/gou.png' />";
            } anders {
                //Meldung, dass der rote Benutzername falsch ist s_password.innerHTML = "Das Passwortformat ist falsch";
            }
            Flagge zurückgeben;
        }


    </Skript>
</Kopf>
<Text>

<div Klasse="rg_layout">
    <div Klasse="rg_left">
        <p>Neue Benutzerregistrierung</p>
        <p>BENUTZERREGISTRIERUNG</p>

    </div>

    <div Klasse="rg_center">
        <div Klasse="rg_form">
            <!--Definieren Sie das Formular-->
            <form action="#" id="form" method="get">
                <Tabelle>
                    <tr>
                        <td class="td_left"><label for="username">Benutzername</label></td>
                        <td Klasse="td_right">
                            <input type="text" name="username" id="username" placeholder="Bitte geben Sie Ihren Benutzernamen ein">
                            <span id="s_benutzername" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">Passwort</label></td>
                        <td Klasse="td_right">
                            <input type="password" name="password" id="password" placeholder="Bitte geben Sie Ihr Passwort ein">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">E-Mail</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label für="name">Name</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="Bitte geben Sie Ihren Namen ein"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">Mobiltelefonnummer</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="Bitte geben Sie Ihre Telefonnummer ein"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>Geschlecht</label></td>
                        <td Klasse="td_right">
                            <input type="radio" name="gender" value="male"> Männlich<input type="radio" name="gender" value="female"> Weiblich</td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">Geburtsdatum</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="Bitte geben Sie Ihr Geburtsdatum ein"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >Bestätigungscode</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="Bitte geben Sie den Bestätigungscode ein">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="Registrieren"></td>
                    </tr>
                </Tabelle>

            </form>

        </div>

    </div>

    <div Klasse="rg_right">
        <p>Sie haben bereits ein Konto?<a href="#" >Jetzt anmelden</a></p>
    </div>

</div>
</body>
</html>

Wirkung der Operation:

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:

HTML plus CSS-Stil zum Erreichen des Beispielcodes für die Homepage eines JS-Food-Projekts
HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)
Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript
SpringMVC @RequestBody Datumstyp Json-Konvertierungsmethode
C# sendet eine POST-Anfrage mit JSON-Body über HttpWebRequest
Lösen Sie das Problem, dass @RequestBody ein JSON-Objekt empfängt und Fehler 415 meldet.
Lassen Sie uns über die Beziehung zwischen @RequestBody und Json sprechen
Ändern Sie den Stil des HTML-Textkörpers in JS

<<: Detailliertes Tutorial zur Installation von Centos8 auf VMware

>>: Tutorial zur Installation von htop unter CentOS 8