Implementierung der Benutzerregistrierungsfunktion mit js

Implementierung der Benutzerregistrierungsfunktion mit js

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

1.HTML-Codestruktur

<KÖRPER>
       <FORM Aktion="success.html" Methode="post" Name="myform" onSubmit="return checkForm()">
                <Tabelle border="0" cellpadding="0" cellspacing="0" align="center">
                    <TR>
                        <TD Höhe="108" colspan="2"><IMG Quelle="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Benutzername:</TD>
                        <TD width="524"><INPUT name="txtUser" type="text" maxlength="16">Nur Buchstaben oder Zahlen, 4-16 Zeichen</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Passwort:</TD>
                        <TD width="524"><INPUT name="txtPass" type="password">Passwortlänge 6-12 Zeichen</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Passwort bestätigen:</TD>
                        <TD width="524"><INPUT name="txtRPass" type="password"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Geschlecht:</TD>
                        <TD Breite="524">
                            <INPUT name="gen" type="radio" value="Male" checked>Männlich&nbsp; 
                            <INPUT name="gen" type="radio" value="Quelle" class="input">Quelle</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">E-Mail-Adresse:</TD>
                        <TD Breite="524"><INPUT Name="txtEmail" Typ="text">
                        Geben Sie eine gültige E-Mail-Adresse ein</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">Geburtsdatum:</TD>
                        <TD Breite="524">
                            <INPUT name="year" id="year" size=4 maxlength=4 >&nbsp;Jahr&nbsp;&nbsp;
                                <SELECT name="Monat" >
                                    <OPTION value=1>Januar</OPTION>
                                    <OPTION value=2>Februar</OPTION>
                                    <OPTION value=3>März</OPTION>
                                    <OPTION value=4>April</OPTION>
                                    <OPTION value=5>Mai</OPTION>
                                    <OPTION value=6>Juni</OPTION>
                                    <OPTION value=7>Juli</OPTION>
                                    <OPTION value=8>August</OPTION>
                                    <OPTION value=9>September</OPTION>
                                    <OPTION value=10>Oktober</OPTION>
                                    <OPTION value=11>November</OPTION>
                                    <OPTION value=12>Dezember</OPTION>
                                </SELECT>&nbsp;Monat&nbsp;&nbsp;
                                 <SELECT name="Tag" >
                                    <OPTION Wert=1>1</OPTION><OPTION Wert=2>2</OPTION><OPTION Wert=3>3</OPTION><OPTION Wert=4>4</OPTION>
                                    <OPTION Wert=5>5</OPTION><OPTION Wert=6>6</OPTION><OPTION Wert=7>7</OPTION><OPTION Wert=8>8</OPTION>
                                    <OPTION Wert=9>9</OPTION><OPTION Wert=10>10</OPTION><OPTION Wert=11>11</OPTION><OPTION Wert=12>12 </OPTION>
                                    <OPTION Wert=13>13</OPTION><OPTION Wert=14>14</OPTION><OPTION Wert=15>15</OPTION><OPTION Wert=16>16</OPTION>
                                    <OPTION Wert=17>17</OPTION><OPTION Wert=18>18</OPTION><OPTION Wert=19>19</OPTION><OPTION Wert=20>20</OPTION>
                                    <OPTION Wert=21>21</OPTION><OPTION Wert=22>22</OPTION><OPTION Wert=23>23</OPTION><OPTION Wert=24>24</OPTION>
                                    <OPTION Wert=25>25</OPTION><OPTION Wert=26>26</OPTION><OPTION Wert=27>27</OPTION><OPTION Wert=28>28</OPTION>
                                    <OPTION Wert=29>29</OPTION><OPTION Wert=30>30</OPTION><OPTION Wert=7>31</OPTION>
                                </SELECT>&nbsp;Tag</TD>
                    </TR>
                    <TR>
                      <TD colspan="2" align="center">
                        <INPUT type="submit" value="Stimmen Sie den folgenden Bedingungen zu und senden Sie sie ab">
                      </TD>
                   </TR>
                  <TR>
                     <TD colspan="2">
                        <TEXTAREA Spalten="" Zeilen="" readOnly="true" Stil="Breite:480px;Höhe:110px;Schriftgröße:12px;Farbe: #666">
                            I. Allgemeine Bestimmungen 1.1 Benutzer müssen den Bedingungen dieser Vereinbarung zustimmen und alle Registrierungsverfahren entsprechend den Anweisungen auf der Seite abschließen. Wenn der Benutzer während des Registrierungsvorgangs auf die Schaltfläche „Zustimmen“ klickt, bedeutet dies, dass der Benutzer eine Vereinbarung mit Baidu getroffen hat und alle Bedingungen dieser Vereinbarung vollständig akzeptiert.
                            1.2 Nach der erfolgreichen Registrierung des Benutzers erhält jeder Benutzer von Baidu ein Benutzerkonto und ein entsprechendes Kennwort. Der Benutzer ist für die Aufbewahrung des Benutzerkontos und des Kennworts verantwortlich. Der Benutzer ist rechtlich für alle Aktivitäten und Ereignisse verantwortlich, die mit seinem Benutzerkonto durchgeführt werden.
                            1.3 Benutzer können die einzelnen Dienste der verschiedenen Kanäle von Baidu nutzen. Wenn Benutzer die einzelnen Dienste von Baidu nutzen, gilt ihr Nutzungsverhalten als Zustimmung zu den Nutzungsbedingungen des einzelnen Dienstes und den verschiedenen von Baidu im einzelnen Dienst veröffentlichten Ankündigungen.
                            1.4 Die Baidu-Mitgliedsdienstvereinbarung und die individuellen Dienstbedingungen und Ankündigungen jedes Kanals können von Baidu jederzeit ohne weitere Ankündigung aktualisiert werden. Bei der Nutzung entsprechender Dienste sollten Sie die jeweils geltenden Bestimmungen beachten und einhalten.
                              Bevor Sie die von Baidu bereitgestellten Dienste nutzen, sollten Sie diese Servicevereinbarung sorgfältig lesen. Wenn Sie dieser Servicevereinbarung und/oder einer Änderung derselben zu irgendeinem Zeitpunkt nicht zustimmen, können Sie die von Baidu bereitgestellten Dienste aktiv kündigen. Sobald Sie die Dienste von Baidu nutzen, wird davon ausgegangen, dass Sie den gesamten Inhalt dieser Servicevereinbarung, einschließlich aller jederzeit von Baidu vorgenommenen Änderungen der Servicevereinbarung, verstanden haben und ihnen voll und ganz zustimmen und ein Baidu-Benutzer werden.
                         </TEXTAREA>
                     </TD>
                  </TR>
                </TABLE>
      </FORM>
</BODY>

Beachten Sie, dass Sie die Bilder selbst hinzufügen müssen

2.JS-Codestruktur

<SCRIPT Typ="text/javascript" Sprache="javascript">
                Funktion checkForm(){
                    wenn(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
                        gibt true zurück;
                    }anders{
                        gibt false zurück;
                    }
                }
                //Benutzername nicht leer Überprüfung + Längenüberprüfung + Rechtmäßigkeitsüberprüfung Funktion checkUserName(){
                    var name = dokument.meinform.txtBenutzer;
                    wenn(name.wert==""){
                        alert("Bitte geben Sie Ihren Benutzernamen ein");
                        Name.Fokus();
                        gibt false zurück;
                    }else if(name.value.length<4||name.value.length>16){//Alarm zur Überprüfung der Benutzernamenlänge("Die Länge des eingegebenen Benutzernamens beträgt 4-16 Zeichen");
                        Name.Auswahl();
                        gibt false zurück;
                    }
                    //Legitimitätsprüfung der Benutzernameneingabe für (var i=0;i<name.value.length;i++)
                    {
                        var charTest = name.value.toLowerCase().charAt(i);
                        wenn ((!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_'))
                        {
                        alert("Der Mitgliedsname enthält ungültige Zeichen, er darf nur die Zahlen a–z, 0–9 und den Unterstrich enthalten");
                        Name.Auswahl();
                        gibt false zurück;
                        }
                    }
                    gibt true zurück;
                }
                //Passwort nicht leer überprüfen + Bestätigung überprüfen + Länge überprüfen Funktion checkPass(){
                    var pass=document.meinFormular.txtPass;
                    var rpass=document.meinFormular.txtRPass;
                    wenn(pass.value==""){
                        alert("Das Passwort darf nicht leer sein");
                        pass.fokus();
                        gibt false zurück;
                    }sonst wenn(Passwertlänge<6||Passwertlänge>12){
                        alert("Das Passwort muss 6-12 Zeichen lang sein");
                        übergeben.select();
                        gibt false zurück;
                    }
                    //Überprüfung der Kennwortkonsistenz bestätigen if (rpass.value!=pass.value) {
                        alert("Das Bestätigungskennwort stimmt nicht mit dem eingegebenen Kennwort überein");
                        rpass.select();
                        gibt false zurück;
                    }
                    gibt true zurück;
                }
                
                //E-Mail-Verifizierungsfunktion checkEmail(){
                    var strEmail=document.meinFormular.txtEmail;
                    wenn (strEmail.value.length==0)
                    {
                        alert("E-Mail darf nicht leer sein!");
                        strEmail.focus();
                        gibt false zurück;
                    }sonst wenn (strEmail.value.indexOf("@",0)==-1)
                    {
                        alert("Das E-Mail-Format ist falsch\nMuss das @-Symbol enthalten!");
                        strEmail.select();
                        gibt false zurück;
                    }sonst wenn (strEmail.value.indexOf(".",0)==-1){
                        alert("Das E-Mail-Format ist falsch. Es muss ein .-Symbol enthalten!");
                        strEmail.select();
                        gibt false zurück;
                    } //@- und .-Zeichen können nicht am Satzanfang stehen, sonst wenn (strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
                        alert("Die Symbole @ und . dürfen in der E-Mail-Adresse nicht am Anfang stehen");
                        strEmail.select();
                        gibt false zurück;+
                    } //@ und .-Zeichen können nicht am Ende eines Satzes stehen, sonst wenn (strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
                        alert("Die Symbole @ und . können nicht die letzte Ziffer einer E-Mail-Adresse sein");
                        strEmail.select();
                        gibt false zurück;
                    }
                    gibt true zurück;
                }
                //Überprüfe das Geburtsjahr Funktion checkDate(){
                    var Jahr = Dokument.meinFormular.Jahr;
                    var Zeit = neues Datum();
                    if(year.value==""){//nicht leerer Verifizierungsalarm("Bitte geben Sie Ihr Geburtsjahr ein");
                        jahr.fokus();
                        gibt false zurück;
                    }else if(isNaN(year.value)){//Ist es eine Nummernüberprüfungswarnung("Bitte geben Sie eine Nummer ein");
                        jahr.fokus();
                        gibt false zurück;
                    }else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//Eingabebereichsvalidierungsalarm("Jahresbereich von 1949-"+time.getYear()+"year");
                        jahr.auswahl();
                        gibt false zurück;
                    }anders{
                        gibt true zurück;
                    }
                }
</SCRIPT>

3. Die Auswirkungen werden wie folgt dargestellt:

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

<<:  Docker-Grundlagen

>>:  Analyse der Prinzipien von MySQL Dirty Page Flush und Shrinking Table Space

Artikel empfehlen

Ich zeige Ihnen, wie Sie Schriftsymbole in CSS verwenden

Zunächst einmal: Was ist ein Schriftsymbol? Oberf...

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Inhaltsverzeichnis 1. Standort / Matching 2. Stan...

Zusammenfassung gängiger MySQL-Befehle

Festlegen des MySQL-Root-Passworts Melden Sie sic...

Detaillierte Erläuterung der kombinierten MySQL-Indexmethode

Für jedes DBMS sind die Indizes der wichtigste Op...

Zusammenfassung der MySQL-Datenmigration

Inhaltsverzeichnis Vorwort: 1. Über die Datenmigr...

Umfassender Vergleich und Bewertung des Vue-Code-Hervorhebungs-Plugins

Inhaltsverzeichnis Umfassender Vergleich Aus der ...

So verwenden Sie das Vue-Router-Routing

Inhaltsverzeichnis 1. Beschreibung 2. Installatio...

So konfigurieren Sie den NAT-Modus für virtuelle VMware-Maschinen

In diesem Artikel wird der NAT-Konfigurationsproz...

So entfernen Sie MySQL aus Ubuntu und installieren es neu

Löschen Sie zuerst MySQL: sudo apt-get remove mys...

Verwenden von CSS3 zum Erstellen von Header-Animationseffekten

Die offizielle Website von Netease Kanyouxi (http...

Natives JS zur Implementierung eines einfachen Rechners

In diesem Artikelbeispiel wird der spezifische Co...

Sechs Methoden zur Nginx-Optimierung

1. Optimieren Sie die Nginx-Parallelität [root@pr...