Frage: So überprüfen Sie das Formular unmittelbar nach der Eingabe, anstatt es nach der Übermittlung zu überprüfen, dass es so unpraktisch ist (die Online -Suchanfragen sind entweder mehrdeutig oder unvollständig ...)
Methode: In Anbetracht dessen vervollständigen Xiaoke, Shuishanqi den Code und fügen Sie das persönliche Verständnis (Notationen) von Xiaoke hinzu. Es ist nur für Nachzüge, Umwege zu vermeiden. Bitte kritisieren und korrigieren Sie alle Arten von Helden ... (Bitte beachten Sie die Autorin Xiexie) - - Tabelle Formularversion, und es wird in Zukunft eine JQuery -Version geben ...
Wenn es Ihnen hilft, probieren Sie es bitte aus (o) 〃ao ~
Screenshot:
Code:
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <title> Benutzerregistrierung </title> <!-Der externe CSSS-Stil wird hier referenziert-> <link rel = "stylesheet" href = href = href type = "text/javaScript"> // zeitnahe Überprüfung der Benutzernamenfunktion Checkuse () {// Definieren der Überprüfungsvariablen in jeder Funktion besteht darin, zu überprüfen, ob jede Funktion nach dem einzigen nach dem Formular übermittelt wird, was sehr gut ist. (Wie folgt wie folgt) var check; var userername = document.getElementById ("Benutzername"). Wert; if (userername.length> 18 || username.length <6) {alert ("Der Benutzername-Eingang ist illegal, bitte treten Sie wieder ein!"); // Das ist sehr wunderbar. Da Sie hier in den falschen Ort eingetreten sind, müssen Sie theoretisch theoretisch weiter hier eintreten. (Nehmen Sie hier weiter in den Fokus!) Dokument.GetElementById ("Benutzername"). Focus (); check = false; } else {document.getElementById ("checkText1"). Innerhtml = "* Der Benutzername besteht aus 6-18-Bit-Zeichen √"; check = true; } Rückgabeprüfung; } // Verwenden Sie reguläre Ausdrücke, um festzustellen, ob das Kennwort die Funktion checkPWD () {var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var password = document.getElementById ("Passwort"). Wert; if (password.length <6 || password.length> 18 || regs.test (Passwort)) {alert ("Kennworteingabe ist illegal, bitte wieder eingeben!"); document.getElementById ("Passwort"). Focus (); check = false; } else {document.getElementById ("checkText2"). Innerhtml = "* Passwort besteht aus 6-18 Zeichen und muss Buchstaben, Zahlen und Interpunktionsmarken enthalten √"; check = true; } Rückgabeprüfung; } // Überprüfen Sie, ob das Passwort inkonsistent ist! Funktion checkpwdc () {var check; var password = document.getElementById ("Passwort"). Wert; var pwdc = document.getElementById ("pwdc"). Wert; if (password! document.getElementById ("pwdc"). Focus (); check = false; } else {document.getElementById ("checkText3"). Innerhtml = "* Bitte geben Sie Ihr Passwort erneut ein √"; check = true; } Rückgabeprüfung; } // Benutzerkategorienfunktion prüfen () {var check; if (document.getElementById ("seluser"). selectedIndex == 0) {alert ("Bitte Benutzertyp auswählen!"); document.getElementById ("seluser"). focus (); check = false; } else {document.getElementById ("checkText4"). InnerHtml = "* Bitte den Benutzertyp √"; check = true; } Rückgabeprüfung; } // Überprüfung der Funktion der Benutzergeschlechtsfunktion {) {var check; var Gender = ""; // Alle Tags mit dem Namen Sex var sex = document.GetElementsByName ("Sex") erhalten; // Übertragen Sie diese Tags mit dem Namen Sex für (var i = 0; i <sex.length; ++ i) {// Wenn ein Geschlecht ausgewählt ist, zeichnen Sie auf, wenn (Sex [i]. } if (gender == "") {alert ("Bitte wählen Sie Geschlecht!"); check = false; } else {document.getElementById ("checkText5"). Innerhtml = "* Bitte wählen Sie Ihr Geschlecht aus"; check = true; } Rückgabeprüfung; } // rechtzeitig das Datum der Geburtsfunktion überprüfen checkDate () {var check; if (document.getElementById ("txtdate"). value == "") {alert ("Bitte füllen Sie das Geburtsdatum aus!"); document.getElementById ("txtdate"). Focus (); check = false; } else {document.getElementById ("checkText6"). Innerhtml = "* Bitte wählen Sie Ihr Geburtsdatum aus"; check = true; } Rückgabeprüfung; } // Überprüfen Sie rechtzeitig die Funktion der Interessen und Hobbys checkHobby () {var check; var hobby = 0; // objnum ist alle Eingabetags mit dem Namen Hobby var objnum = document.getElementsByName ("Hobby"); // Alle Hobby -Tags für (var i = 0; i <objnum.length; ++ i) {// beurteilen, ob ein Hobby -Tag ausgewählt wird, wenn (objnum [i]. Checked == True) Hobby ++; } // Wenn es ein ausgewähltes Hobby -Tag gibt, if (Hobby> = 1) {document.getElementById ("checkText7"). InnerHtml = "* Wählen Sie Ihr Hobby √"; check = true; } else {alert ("Bitte füllen Sie das Hobby aus!"); check = false; } Rückgabeprüfung; } // regelmäßige Ausdrucksüberprüfung E -Mail (zeitnah) function checkmail () {var check; // Regelmäßiger Ausdruck von E -Mail var e1 = document.getElementById ("E -Mail"). value.indexof ("@", 0); var e2 = document.getElementById ("E -Mail"). value.indexof (".", 0); if (E-Mail == "" || (e1 ==-1 || e2 ==-1) || e2 <e1) {alert ("e_mail Eingabefehler!"); document.getElementById ("E -Mail"). Focus (); check = false; } else {document.getElementById ("checkText8"). InnerHtml = "* Bitte füllen Sie die häufig verwendete E -Mail aus, mit der das Passwort abgerufen wird." check = true; } Rückgabeprüfung; } // zeitnahe Überprüfung der Selbsteinführung Funktion checkinTro () {var check; var intro = document.getElementById ("Einführung"). Wert; if (intro.length> 100) {alert ("Wortzahl überschreitet die Grenze!"); check = false; } else {document.getElementById ("checkText9"). Innerhtml = "* Limited auf 100 Wörter"; document.getElementById ("checkText9"). Focus (); check = true; } Rückgabeprüfung; } //All verifications are performed when submitting the form (if any verification fails, it will be returned to false to prevent the form submission) function check() { var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby() && checkmail() &&checkintro(); Rückgabeprüfung; } </script> </head> <body> <!-<Form Action = "Jump Page" method = "get" | "post" name = "Form name" target = "öffnen mit" engTepe = "MultiPart/Form-Data">-> <!-OnSubmit () -Funktion legt eine Form ein Form, wenn der Rückgabewert wahr ist. -> <form action = "#" method = "get" onsubmit = "return check ()"> <fieldset> <legend> Kleines Beispiel für die rechtzeitige Überprüfung der Form </legend> <table align = "links" style = "Hintergrund-Image: url ('img/4.jpg');" > <tr> <td> Benutzername: </td> <td> <Eingabe type = "text" name = "userername" id = "userername" onchange = "checkuse ()"/> </td> <td id = "checkText1">* username besteht aus 6-18 Zeichen </td> </tr> <! OnChange-Ereignishandler: Ausgelöst, wenn ein Formularelement den Fokus erhält und der Inhalt ändert-> <!-Das Folgende ist das gleiche-> <tr> <Td> Kennwort: </td> <td> <Eingabe type = "password" name = "password" id = "passwart" passchange = "checkpwd ()"/> </td> <td id = "passtext2". Markierungen </td> </tr> <tr> <td> Kennwort bestätigen: </td> <td> <Eingabe type = "password" name = "pwdc" id = "pwdc" onchange = "checkpwdc ()"/> </td> <td id = "checkText3">* Bitte geben Sie Ihr Passwort erneut ein. <td> <select id="selUser" onblur="checkut()"> <option name="selUser" value="0">Please select</option> <option name="selUser" value="1">Admin</option> <option name="selUser" value="2">Ordinary user</option> </select> </td> <td id="checktext4">* Please select user type</td> </tr> <tr> <td> Geschlecht: </td> <td> <Eingabe type = "radio" value = "1" name = "sex" onchange = "checkGender ()"/> männlich <input type = "radio" value = "2" name = "sex" onchange = "checkgender ()"/> weiblich </td> <td id = "td> <td> <td id =" yoktex "> y/td> <td> <td> <td id =" <tr> <td> Geburtsdatum: </td> <td> <Eingabe type = "date" name = "date" id = "txtdate" onblur = "checkDate ()"/> </td> <td id = "checkText6">* Wählen Sie Ihr Geburtsdatum </td> </tr> <tr> <td> upd> upd> </td> </tdd> </ttrd> </td> hosts: </td> </td> </tr> <TD>. name="hobby" value="reading" onchange="checkHobby()">Reading<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">Music<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">Sports</td> <td id="checktext7">* Please select your Hobbys </td> </tr> <ttr> <td> E-Mail: </td> <td> <Eingabe type = "text" name = "E-Mail" id = "E-Mail" onChange = "checkemail ()"/> </td> <td id = "checkText8">* Bitte füllen Sie die häufig verwendete E-Mail aus, die zur Passwortwiederherstellung verwendet wird. </td> <td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">This is a self-introduction...</textarea></td> <td id="checktext9">* Limited to 100 words</td> </tr> <tr> <td colspan="2" align="center"> <input type = "surug" name = "surug" value = "suruging"/> <Eingabe type = "reset" name = "reset" value = "reset"/> </td> </tr> </table> </fieldset> </form> </body> </html>CSS -Stil:
Eingabe: Fokus, TextArea: Focus {Border: 1PX Solid #f00; Hintergrund: #fcc; } textArea {width: 230px; Höhe: 50px; } Body {Schriftgröße: 15px; /* Schriftstil*/ Schriftfamilie: Microsoft Yahei; } Option auswählen {Schriftgröße: 10px; Schriftfamilie: Microsoft Yahei; }Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.