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

So erreichen Sie die maximale Anzahl von Verbindungen in MySQL

Inhaltsverzeichnis Was ist der Grund für den plöt...

CSS3 erzielt einen coolen 3D-Rotationsperspektiveneffekt

CSS3 erreicht coole 3D-Rotationsperspektive 3D-An...

Beispiel für die Konfiguration von nginx zur Implementierung von SSL

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Postfix ist ein kostenloser und quelloffener MTA ...

React-Internationalisierung – Verwendung von react-intl

Wie erreicht man Internationalisierung in React? ...

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Inhaltsverzeichnis 1. Schreiben Sie Webshell in d...

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Inhaltsverzeichnis Vorwort wissen Übung macht den...

Beispiel für die Konfiguration mehrerer virtueller Hosts in nginx

Es ist sehr praktisch, den virtuellen Host vhost ...

Lösung für VMware Workstation Pro, das unter Windows nicht läuft

Hat jemand von Ihnen nach dem Nationalfeiertag fe...

JS realisiert die automatische Wiedergabe der Timeline

Vor kurzem habe ich einen solchen Effekt implemen...

Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker

1. Einleitung Ich werde hier nicht näher auf Apol...