js implementiert eine Formularvalidierungsfunktion

js implementiert eine Formularvalidierungsfunktion

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:
  • Detaillierte Erklärung zur Verwendung des JavaScript-Strategiemodus aus der Formularvalidierung
  • Verwenden der Vee-validate-Formularvalidierung im Vue.js + Nuxt.js-Projekt
  • JavaScript-Beispiel zum Abschließen der Formularvalidierung auf der Registrierungsseite
  • Verwenden von JavaScript zur Formularvalidierung
  • So verwenden Sie Angularjs-Anweisungen zur Formularvalidierung
  • Beispielcode für die AngularJs-Formularvalidierungsfunktion
  • AngularJS-Tutorial für die ersten Schritte: Anwendungsbeispiel für die Formularvalidierung
  • Vue.js-Plugin zur Formularvalidierung

<<:  Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux

>>:  Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte

Artikel empfehlen

Klassischer MySQL-High-Level-/Befehlszeilenvorgang (schnell) (empfohlen)

Da ich lernen muss, wie man Server und Datenbanke...

Anwendung von Hadoop-Zählern und Datenbereinigung

Datenbereinigung (ETL) Vor dem Ausführen des MapR...

Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?

Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...

Detaillierte Erläuterung des Vue-Routing-Routers

Inhaltsverzeichnis Routing-Plugins modular nutzen...

So ändern Sie Port 3389 des Remotedesktops von Windows Server 2008 R2

Die Standardportnummer des Remotedesktops des Win...

Beispiele für Clearfix und Clear

In diesem Artikel wird hauptsächlich die Verwendun...

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

Beim Starten von MySQL in einer OS X-Umgebung wir...

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

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

So verwenden Sie die Verlaufsumleitung in React Router

In react-router kann der Sprung in der Komponente...

Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

1. MySQL herunterladen 1.1 Download-Adresse https...