Heim Web-Frontend js-Tutorial So implementieren Sie eine einfache Anmeldeseite

So implementieren Sie eine einfache Anmeldeseite

Sep 30, 2017 am 09:52 AM
登录 简单 页面


<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
        $(function() {
            $("input[name=&#39;uname&#39;]").blur(function() { //失去焦点
                var namestr = $(this).val();                
                    var regstr = /^[\u4e00-\u9fa5]{2,4}$/;                
                        if(!regstr.test(namestr)) {
                    $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red");                    return false;
                }                return true;
            });
            $("input[name = &#39;uname&#39;]").focus(function() { //获取焦点                
            $(this).val("");
                $(this).parent().next().html("");
            });
            $("input[name=&#39;pwd&#39;]").blur(function() {                
            var pwdstr = $(this).val();                
            var regstr = /^\w{6}$/;                
            if(!regstr.test(pwdstr)) {
                    $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red");                    return false;
                }                return true;
            });
            $("input[name=&#39;pwd&#39;]").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name=&#39;birthday&#39;]").blur(function() {                
            var birthdaystr = $(this).val();                
            var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/;                
            if(!regstr.test(birthdaystr)) {
                    $(this).parent().next().html("日期格式不正确").css("color", "red");                    return false;
                }                
                return true;
            });
            $("input[name=&#39;birthday&#39;]").focus(function() {
                $(this).parent().next().html("");
            });
            $("input[name=&#39;email&#39;]").blur(function(){                
            var emailstr = $(this).val();                
            var regstr = /^[\w\-]+@[a-z0-9A-Z]+(\.[a-zA-Z]{2,3}){1,2}$/;                
            if(!regstr.test(emailstr)){
                    $(this).parent().next().html("邮箱格式不正确").css("color","red");                    return false;
                }                
                return true;
            });
            $("input[name=&#39;email&#39;]").focus(function(){
                $(this).parent().next().html("");
            });
            
        });   
         </script>
    <style>
        body {
            font-size: 12px;
        }
        
        #home {
            background-color: beige;
            border: solid 1px black;
            width: 550px;
            height: 185px;
            margin: auto;
            margin-top: 20px;
        }
        
        #head {
            height: 135px;
        }
        
        #foot {
            text-align: center;
        }
        
        .dl1 {
            clear: both;
            padding-left: 10px;
        }
        
        .dl1 dt {
            float: left;
            height: 30px;
            width: 80px;
            line-height: 30px;
        }
        
        .dl1 dd {
            float: left;
            height: 30px;
            line-height: 30px;
            /*width: 250px;*/
        }
        
        #btn_res {
            background-image: url(img/reset.gif);
            width: 80px;
            height: 34px;
        }
        
        #btn_sub {
            background-image: url(img/submit.gif);
            width: 80px;
            height: 34px;
        }
    </style>

    <body>
        <p id="home">
            <p id="head">
                <form action="" method="post">
                    <dl class="dl1">
                        <dt>用户名 : </dt>
                        <dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd>
                        <dd></dd>
                    </dl>
                    <dl class="dl1">
                        <dt>用户密码 : </dt>
                        <dd class="dd1"><input type="password" name="pwd" /></dd>
                        <dd></dd>
                    </dl>
                    <dl class="dl1">
                        <dt>出生日期 : </dt>
                        <dd class="dd1"><input type="text" name="birthday" /></dd>
                        <dd>yyyy-mm-dd</dd>
                    </dl>
                    <dl class="dl1">
                        <dt>用户邮箱 : </dt>
                        <dd><input type="text" name="email"/></dd>
                        <dd></dd>
                    </dl>
                </form>
            </p>
            <p id="foot">
                <input type="submit" value="" id="btn_sub" />
                <input type="reset" value="" id="btn_res" />
            </p>
        </p>
    </body>
  </html>
Nach dem Login kopieren

Beispiel:

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Mar 19, 2024 pm 02:00 PM

Wenn Sie sich auf Ihrem Computer beim Steam-Konto einer anderen Person anmelden und das Konto dieser anderen Person über eine Hintergrundsoftware verfügt, lädt Steam automatisch die Hintergrundbilder herunter, die für das Konto der anderen Person abonniert wurden, nachdem Sie zu Ihrem eigenen Konto zurückgewechselt haben Deaktivieren der Steam-Cloud-Synchronisierung. Was tun, wenn WallpaperEngine die Hintergrundbilder anderer Personen herunterlädt, nachdem Sie sich bei einem anderen Konto angemeldet haben? 1. Melden Sie sich bei Ihrem eigenen Steam-Konto an, suchen Sie in den Einstellungen nach der Cloud-Synchronisierung und deaktivieren Sie die Steam-Cloud-Synchronisierung. 2. Melden Sie sich bei dem Steam-Konto einer anderen Person an, bei dem Sie sich zuvor angemeldet haben, öffnen Sie den Wallpaper Creative Workshop, suchen Sie nach den Abonnementinhalten und kündigen Sie dann alle Abonnements. (Falls Sie das Hintergrundbild in Zukunft nicht mehr finden, können Sie es zunächst abholen und dann das Abonnement kündigen.) 3. Wechseln Sie zurück zu Ihrem eigenen Steam

Der einfachste Weg, die Seriennummer der Festplatte abzufragen Der einfachste Weg, die Seriennummer der Festplatte abzufragen Feb 26, 2024 pm 02:24 PM

Die Seriennummer der Festplatte ist eine wichtige Kennung der Festplatte und dient in der Regel zur eindeutigen Identifizierung der Festplatte und zur Identifizierung der Hardware. In einigen Fällen müssen wir möglicherweise die Seriennummer der Festplatte abfragen, beispielsweise bei der Installation eines Betriebssystems, der Suche nach dem richtigen Gerätetreiber oder der Durchführung von Festplattenreparaturen. In diesem Artikel werden einige einfache Methoden vorgestellt, mit denen Sie die Seriennummer der Festplatte überprüfen können. Methode 1: Verwenden Sie die Windows-Eingabeaufforderung, um die Eingabeaufforderung zu öffnen. Drücken Sie im Windows-System die Tasten Win+R, geben Sie „cmd“ ein und drücken Sie die Eingabetaste, um den Befehl zu öffnen

Wie melde ich mich bei meinem vorherigen Konto auf Xiaohongshu an? Was soll ich tun, wenn die ursprüngliche Nummer nach der erneuten Verbindung verloren geht? Wie melde ich mich bei meinem vorherigen Konto auf Xiaohongshu an? Was soll ich tun, wenn die ursprüngliche Nummer nach der erneuten Verbindung verloren geht? Mar 21, 2024 pm 09:41 PM

Mit der rasanten Entwicklung der sozialen Medien ist Xiaohongshu für viele junge Menschen zu einer beliebten Plattform geworden, auf der sie ihr Leben teilen und neue Produkte entdecken können. Während der Nutzung können Benutzer manchmal auf Schwierigkeiten stoßen, sich bei früheren Konten anzumelden. In diesem Artikel wird ausführlich erläutert, wie das Problem der Anmeldung beim alten Konto auf Xiaohongshu gelöst werden kann und wie mit der Möglichkeit umgegangen werden kann, dass das ursprüngliche Konto nach dem Ändern der Bindung verloren geht. 1. Wie melde ich mich bei Xiaohongshus vorherigem Konto an? 1. Rufen Sie das Passwort ab und melden Sie sich an. Wenn Sie sich längere Zeit nicht bei Xiaohongshu anmelden, wird Ihr Konto möglicherweise vom System recycelt. Um die Zugriffsrechte wiederherzustellen, können Sie versuchen, sich erneut bei Ihrem Konto anzumelden, indem Sie Ihr Passwort abrufen. Die Bedienungsschritte sind wie folgt: (1) Öffnen Sie die Xiaohongshu-App oder die offizielle Website und klicken Sie auf die Schaltfläche „Anmelden“. (2) Wählen Sie „Passwort abrufen“. (3) Geben Sie die Mobiltelefonnummer ein, die Sie bei der Registrierung Ihres Kontos verwendet haben

Der Kollektions-Skin „Onmyoji' Ibaraki Doji ist erhältlich, sobald Sie sich anmelden, und der neue Zen Heart Cloud Mirror-Skin wird bald veröffentlicht! Der Kollektions-Skin „Onmyoji' Ibaraki Doji ist erhältlich, sobald Sie sich anmelden, und der neue Zen Heart Cloud Mirror-Skin wird bald veröffentlicht! Jan 05, 2024 am 10:42 AM

Tausende von Geistern schrien in den Bergen und auf den Feldern, und das Geräusch des Waffenwechsels verschwand. Die Geistergeneräle, die mit wütendem Kampfgeist im Herzen über die Berge stürmten, nutzten das Feuer als Trompete, um Hunderte von Geistern zum Angriff zu verleiten in die Schlacht. [Blazing Flame Bairen·Ibaraki Doji Collection Skin ist jetzt online] Die Geisterhörner lodern vor Flammen, die vergoldeten Augen strotzen vor widerspenstigem Kampfgeist und die weißen Jade-Rüstungsteile zieren das Hemd und zeigen den widerspenstigen und wilden Schwung der Großen Dämon. Auf den schneeweißen, flatternden Ärmeln hingen rote Flammen und verschränkten sich, und auf ihnen waren goldene Muster eingeprägt, die eine purpurrote und magische Farbe entzündeten. Die durch die verdichtete Dämonenkraft geformten Irrlichter brüllten und die wilden Flammen erschütterten die Berge. Dämonen und Geister, die aus dem Fegefeuer zurückgekehrt waren, bestrafen wir gemeinsam die Eindringlinge. [Exklusiver dynamischer Avatar-Rahmen·Blazing Flame Bailian] [Exklusive Illustration·Firework General Soul] [Biografie-Wertschätzung] [So erhalten Sie] Ibaraki Dojis Kollektions-Skin·Blazing Flame Bailian wird nach der Wartung am 28. Dezember im Skin-Shop erhältlich sein.

So kopieren Sie eine Seite in Word So kopieren Sie eine Seite in Word Feb 20, 2024 am 10:09 AM

Möchten Sie eine Seite in Microsoft Word kopieren und die Formatierung beibehalten? Dies ist eine kluge Idee, da das Duplizieren von Seiten in Word eine nützliche zeitsparende Technik sein kann, wenn Sie mehrere Kopien eines bestimmten Dokumentlayouts oder -formats erstellen möchten. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess des Kopierens von Seiten in Word, unabhängig davon, ob Sie eine Vorlage erstellen oder eine bestimmte Seite in einem Dokument kopieren. Diese einfachen Anweisungen sollen Ihnen dabei helfen, Ihre Seite einfach neu zu erstellen, ohne bei Null anfangen zu müssen. Warum Seiten in Microsoft Word kopieren? Es gibt mehrere Gründe, warum das Kopieren von Seiten in Word sehr vorteilhaft ist: Wenn Sie ein Dokument mit einem bestimmten Layout oder Format kopieren möchten. Im Gegensatz dazu, die gesamte Seite von Grund auf neu zu erstellen

Discuz-Lösung für das Anmeldeproblem im Hintergrund enthüllt Discuz-Lösung für das Anmeldeproblem im Hintergrund enthüllt Mar 03, 2024 am 08:57 AM

Die Lösung für das Discuz-Hintergrund-Login-Problem wird aufgezeigt. Mit der rasanten Entwicklung des Internets ist die Website-Erstellung immer häufiger geworden, und Discuz wurde als häufig verwendetes Forum-Website-Erstellungssystem bevorzugt viele Webmaster. Gerade aufgrund seiner leistungsstarken Funktionen stoßen wir jedoch manchmal auf Probleme bei der Verwendung von Discuz, wie z. B. Probleme bei der Anmeldung im Hintergrund. Heute werden wir die Lösung für das Discuz-Hintergrund-Login-Problem enthüllen und konkrete Codebeispiele bereitstellen. Wir hoffen, den Bedürftigen zu helfen.

So melden Sie sich bei der Kuaishou-PC-Version an - So melden Sie sich bei der Kuaishou-PC-Version an So melden Sie sich bei der Kuaishou-PC-Version an - So melden Sie sich bei der Kuaishou-PC-Version an Mar 04, 2024 pm 03:30 PM

Kürzlich haben mich einige Freunde gefragt, wie man sich bei der Kuaishou-Computerversion anmeldet. Hier ist die Anmeldemethode für die Kuaishou-Computerversion. Schritt 1: Suchen Sie zunächst im Browser Ihres Computers nach der offiziellen Website von Kuaishou auf Baidu. Schritt 2: Wählen Sie das erste Element in der Suchergebnisliste aus. Schritt 3: Nachdem Sie die Hauptseite der offiziellen Website von Kuaishou aufgerufen haben, klicken Sie auf die Videooption. Schritt 4: Klicken Sie oben rechts auf den Benutzer-Avatar. Schritt 5: Klicken Sie auf den QR-Code, um sich im Popup-Anmeldemenü anzumelden. Schritt 6: Öffnen Sie dann Kuaishou auf Ihrem Telefon und klicken Sie auf das Symbol in der oberen linken Ecke. Schritt 7: Klicken Sie auf das QR-Code-Logo. Schritt 8: Nachdem Sie auf das Scan-Symbol in der oberen rechten Ecke der Benutzeroberfläche „Mein QR-Code“ geklickt haben, scannen Sie den QR-Code auf Ihrem Computer. Schritt 9: Melden Sie sich abschließend bei der Computerversion von Kuaishou an

So melden Sie sich bei Quark bei zwei Geräten an So melden Sie sich bei Quark bei zwei Geräten an Feb 23, 2024 pm 10:55 PM

Wie melde ich mich mit Quark bei zwei Geräten an? Quark Browser unterstützt die gleichzeitige Anmeldung bei zwei Geräten, aber die meisten Freunde wissen nicht, wie sie sich mit Quark Browser bei zwei Geräten anmelden können zu zwei Geräten. Interessierte Benutzer kommen vorbei und schauen sich die grafischen Tutorials an! Tutorial zur Quark Browser-Nutzung Quark, wie man sich bei zwei Geräten anmeldet 1. Öffnen Sie zunächst die Quark Browser-APP und klicken Sie auf der Hauptseite auf [Quark Network Disk] 2. Rufen Sie dann die Quark Network Disk-Benutzeroberfläche auf und wählen Sie die Dienstfunktion [Mein Backup]. 3. Wählen Sie abschließend [Gerät wechseln], um sich bei zwei neuen Geräten anzumelden.

See all articles