In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Formularüberprüfungsfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. Drei Ereignisse verwendet: onfocus (Fokusereignis), onblur (Ereignis zum Verlassen des Fokus), onkeyup (Ereignis zum Loslassen der Taste) 2. Verwenden Sie Ereignisse, um Funktionen auszulösen und Überprüfungsinformationen in den Funktionen auszuführen. 3. Verwenden Sie checkform, um festzustellen, ob der Inhalt des Formulars standardisiert ist. Wenn dies der Fall ist, können die Formularinformationen über die Schaltfläche „Senden“ übermittelt werden. Einfache Wirkung: Code in der Form: <form action="demo.html" onsubmit="return checkForm()"> <div> <div Klasse="Text"> <p>Benutzername</p> <input id="value" onfocus="shoeTips('hint','Benutzername darf nicht kürzer als sechs sein')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Benutzername" placeholder="Benutzername" /> <span id="Hinweis"></span> </div> <div Klasse="Text"> <p>Passwort</p> <input id="pass_value" onfocus="shoeTips('pass_hint','Das Passwort darf nicht kürzer als sechs Zeichen sein')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="password" /> <span id="pass_hint"></span> </div> <div Klasse="Text"> <p>Passwort bestätigen</p> <input id="passpass_value" onfocus="shoeTips('passpass_hint','Die beiden Passwörter müssen konsistent sein')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="Passwort bestätigen" /> <span id="passpass_hint"></span> </div> <div Klasse="Text"> <p>E-Mail</p> <input id="email" onfocus="shoeTips('email_hint','Das E-Mail-Format muss korrekt sein')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="E-Mail" /> <span id="email_hint"></span> </div> <div Klasse="Text"> <p>Mobiltelefonnummer</p> <input id="phone" type="text" onfocus="shoeTips('phone_hint','Eine Telefonnummer im Format von elf Ziffern')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="Telefonnummer"> <span id="phone_hint"></span> </div> <div Klasse="Senden"> <input type="submit" value="Senden" /> </div> </div> </form> In js: Funktion Schuhspitzen(spanId, Spitzen) { var span = document.getElementById(spanId); span.innerHTML = Tipps; } /** * Benutzernamen bestätigen */ Funktion Hinweis() { var Wert = document.getElementById("Wert").Wert; var Hinweis = document.getElementById("Hinweis"); wenn(Wert.Länge < 6) { hint.innerHTML = "Benutzername ist zu kurz"; gibt false zurück; } anders { hint.innerHTML = "Qualifizierter Benutzername"; gibt true zurück; } } Funktion Hinweis_ausblenden() { var Hinweis = document.getElementById("Hinweis"); Hinweis.innerHTML = ""; } /** * Passwort bestätigen */ Funktion checkPass() { var Wert = document.getElementById("pass_value").Wert; var Hinweis = document.getElementById("pass_hint"); wenn(Wert.Länge < 6) { hint.innerHTML = "Das Passwort ist zu kurz"; gibt false zurück; } anders { hint.innerHTML = "Das Passwortformat ist qualifiziert"; gibt true zurück; } } Funktion pass_hide() { var Hinweis = document.getElementById("pass_hint"); Hinweis.innerHTML = ""; } /*** * Passwortüberprüfung bestätigen */ Funktion checkPassPass() { var papavalue = document.getElementById("passpass_value").value; var Wert = document.getElementById("pass_value").Wert; var papahint = document.getElementById("passpass_hint"); wenn(papawert != wert) { papahint.innerHTML = "Die beiden Passwörter stimmen nicht überein"; gibt false zurück; } anders { papahint.innerHTML = ""; gibt true zurück; } } Funktion passpass_hide() { var papahint = document.getElementById("passpass_hint"); papahint.innerHTML = ""; } /** * E-Mail-Adresse bestätigen */ Funktion checkEmail(strEmail) { var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; wenn (emailReg.test(strEmail)) { gibt true zurück; } anders { // alert("Die von Ihnen eingegebene E-Mail-Adresse hat nicht das richtige Format!"); gibt false zurück; } }; Funktion emailCheck() { var emailValue = document.getElementById("email").value; var email_hint = document.getElementById("email_hint"); var flag = checkEmail(E-Mail-Wert); wenn(Flagge) { email_hint.innerHTML = "Das E-Mail-Format ist korrekt"; gibt true zurück; } anders { email_hint.innerHTML = "Fehler im E-Mail-Format"; gibt false zurück; } } Funktion emailHide() { var email_hint = document.getElementById("email_hint"); email_hint.innerHTML = ""; } /** * Handynummer bestätigen */ Funktion checkMobile(strMobile) { //13588888888 var regu = /^[1][345678][0-9]{9}$/; var re = neuer RegExp(regu); wenn (re.test(strMobile)) { gibt true zurück; } anders { gibt false zurück; } }; Funktion phoneCheck() { var Telefon = document.getElementById("Telefon").Wert; var Telefonhinweis = document.getElementById("Telefonhinweis"); var flag = checkMobile(Telefon); wenn(Flagge) { phone_hint.innerHTML = "Das Telefonnummernformat ist korrekt"; gibt true zurück; } anders { phone_hint.innerHTML = „Das Telefonnummernformat ist falsch“; gibt false zurück; } } Funktion phoneHide() { var Telefonhinweis = document.getElementById("Telefonhinweis"); phone_hint.innerHTML = ""; } Funktion checkForm() { var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck(); Flagge zurückgeben; } 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:
|
>>: Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte
Da ich lernen muss, wie man Server und Datenbanke...
Inhaltsverzeichnis 1. MySQL-Trigger erstellen: 1....
Umsetzungseffekt: 1. count(1) und count(*) Wenn d...
Datenbereinigung (ETL) Vor dem Ausführen des MapR...
Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...
Problem: Bei Verwendung von JDBC zur Verbindung m...
Inhaltsverzeichnis Routing-Plugins modular nutzen...
Die Standardportnummer des Remotedesktops des Win...
In diesem Artikel wird hauptsächlich die Verwendun...
Beim Starten von MySQL in einer OS X-Umgebung wir...
Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...
In react-router kann der Sprung in der Komponente...
Als ich heute Tomcat für den Zugriff auf die Proj...
1. MySQL herunterladen 1.1 Download-Adresse https...
Das Popup hat nichts damit zu tun, ob Ihr aktuelle...