Beispiel für die Validierung eines JavaScript-Formulars
|
HTML-Formulare werden häufig verwendet, um Benutzerinformationen wie Name, E-Mail-Adresse, Standort, Alter usw. zu erfassen. Es ist jedoch wahrscheinlich, dass einige Benutzer nicht die erwarteten Daten eingeben. Die Validierung von HTML-Formularen kann über JavaScript erfolgen. Um unnötige Belastung der Serverressourcen zu vermeiden, können Sie JavaScript verwenden, um die Formulardaten auf dem Client (Benutzersystem) zu validieren. Falsche Informationen werden nicht an den Backend-Server übermittelt - dies wird als clientseitige Validierung bezeichnet. Dieser Artikel stellt diese Überprüfung vor Die Formularvalidierung wird im Allgemeinen in zwei Methoden unterteilt. Clientseitige Validierung: Führen Sie JS direkt auf dem Client aus, um die Validierung durchzuführen. Während des Validierungsprozesses erfolgt keine Interaktion mit dem Server. Serverseitige Überprüfung: Die Seite sendet die Überprüfungsinformationen zurück an den Server, der die Überprüfung durchführt und das Überprüfungsergebnis an den Client zurücksendet. Beide Überprüfungen sind notwendig, da die clientseitige Überprüfungssicherheit nicht sehr hoch ist. Sie können jedoch über 80 % der Benutzerfehler verhindern, den Druck auf den Server verringern und sind sehr schnell, was zu einem hohen Benutzererlebnis führt. Denken Sie nicht, dass Sie keine serverseitige Verifizierung benötigen, wenn Sie eine clientseitige Verifizierung haben. Die clientseitige Verifizierung kann sehr leicht umgangen werden. Die serverseitige Verifizierung ist sicherer, daher müssen im Allgemeinen beide Verifizierungen geschrieben werden. 】 Beispiel 1: Ein einfaches Beispiel
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Einfaches Beispiel für eine Formularvalidierung</title>
</Kopf>
<Kopf>
<Skript>
Funktion validateForm(){
var x=document.forms["myForm"]["fname"].value;
wenn (x==null || x==""){
//alert("Name muss ausgefüllt werden");
usernameerror.innerHTML="<font color='red'>Name ist erforderlich</font>";
gibt false zurück;
}
anders{
usernameerror.innerHTML="korrekt";
gibt true zurück;
}
}
</Skript>
</Kopf>
<Text>
<!--
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
-->
<Formularname="MeinFormular" onsubmit="return validateForm()" >
Name: <input type="text" name="fname" id="benutzername">
<span id="Benutzernameerror"></span>
<br>
<input type="submit" value="Senden">
<input type="reset" value="Zurücksetzen">
</form>
</body>
</html>Speichern Sie den Dateinamen: Formularüberprüfungsbeispiel 1.html Führen Sie den Test mit einem Browser aus. Die Ergebnisse sind wie folgt:
Beispiel 2: Ein komplexeres Beispiel
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Beispiel zur Formularvalidierung: Benutzer registrieren</title>
<style type="text/css">
</Stil>
<Skript>
Funktion checkusername()
{
var myform = document.getElementById("form1");
var Benutzername = myform.Benutzername.Wert.Länge;
if(Benutzername < 1||Benutzername>12)
{
errusername.innerHTML = "<font color='red'>Benutzername erfüllt nicht die Anforderungen</font>";
gibt false zurück;
}anders{
errusername.innerHTML = "<font color='green'>Benutzername erfüllt die Anforderungen</font>";
gibt true zurück;
}
}
Funktion checkage()
{
var myform = document.getElementById("form1");
var Alter = meinFormular.Alter.Wert;
wenn(Alter != parseInt(Alter))
{
errage.innerHTML = "<font color='red'>Alter entspricht nicht den Anforderungen</font>";
gibt false zurück;
}anders{
errage.innerHTML = "<font color='green'>Alter erfüllt die Anforderungen</font>";
gibt true zurück;
}
}
Funktion checkemail()
{
var myform = document.getElementById("form1");
var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
wenn(!mail.test(meinformular.email.wert))
{
erremail.innerHTML = "<font color='red'>E-Mail erfüllt nicht die Anforderungen</font>";
gibt false zurück;
}anders{
erremail.innerHTML = "<font color='green'>E-Mail erfüllt die Anforderungen</font>";
gibt true zurück;
}
}
Funktion checkform()
{
Benutzername prüfen(); Alter prüfen(); E-Mail prüfen();
wenn(checkusername()&&checkage()&&checkemail())
{
gibt true zurück;
}anders{
gibt false zurück;
}
}
</Skript>
</Kopf>
<Text>
<!--
<form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
-->
<form id="form1" name="form1" method="post" onsubmit="return checkform()">
<Tabellenbreite="777" Grenze="0" Zellpadding="1" Zellabstand="1">
<tr>
<td colspan="3" ><div align="center">Bitte geben Sie Ihre Registrierungsdaten ein</div></td>
</tr>
<tr>
<td width="250" ><div align="right" >Bitte geben Sie Ihren Benutzernamen ein: </div></td>
<td Breite="250"><div Ausrichtung="Mitte">
<input type="text" name="Benutzername" onblur="checkusername()" />
</div></td>
<td><div id="errusername" align="center"></div></td>
</tr>
<tr>
<td width="250"><div align="right">Bitte geben Sie Ihr Alter ein:</div></td>
<td Breite="250"><div Ausrichtung="Mitte" >
<Bezeichnung>
<input type="text" name="Alter" onblur="checkage()"/>
</Bezeichnung>
</div></td>
<td><div align="center" id="errage"></div></td>
</tr>
<tr>
<td width="250"><div align="right" >Bitte geben Sie Ihre E-MAIL ein:</div></td>
<td Breite="250"><div Ausrichtung="Mitte" >
<Bezeichnung>
<input type="text" name="email" onblur="checkemail()" />
</Bezeichnung>
</div></td>
<td><div align="center" id="erremail"></div></td>
</tr>
<tr>
<td><div align="rechts">
<Bezeichnung>
<input type="submit" name="Senden" value="Senden" />
</Bezeichnung>
</div></td>
<td><div ausrichten="zentrieren">
<Bezeichnung>
<input type="reset" name="Submit2" value="Zurücksetzen" />
</Bezeichnung>
</div></td>
<td><div align="center"></div></td>
</tr>
</Tabelle>
</form>
</body>
</html>Speichern Sie den Dateinamen: Formularüberprüfungsbeispiel 1.html Führen Sie den Test mit einem Browser aus. Die Ergebnisse sind wie folgt:
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:
|
<<: Lösung für IDEA, das keine Verbindung zur MySQL-Portnummernbelegung herstellen kann
>>: Tutorial zur Verwendung des Frameset-Tags in HTML
Artikel empfehlen
So konfigurieren Sie geplante MySQL-Aufgaben (EVENT-Ereignisse) im Detail
Inhaltsverzeichnis 1. Was ist eine Veranstaltung?...
Detaillierte Einführung und Verwendungsbeispiele für Map-Tag-Parameter
Karten-Tags müssen paarweise vorkommen, d. h. <...
Ein praktischer Bericht über einen durch den MySQL-Start verursachten Unfall
Inhaltsverzeichnis Hintergrund So ermitteln Sie, ...
CSS+HTML zur Implementierung des Platzhalter-Animationseffekts beim Laden des Skeleton-Bildschirms (mit Animation)
Wirkung Von oben nach unten verblassen Quellcode ...
So beheben Sie Dateisystemfehler in Linux mit „fsck“
Vorwort Das Dateisystem ist für die Organisation ...
So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense
Inhaltsverzeichnis Vorwort Komponenten erstellen ...
Lösung zum Vergessen des Passworts des Pagodenpanels in Linux 3.X/4.x/5.x
Geben Sie ssh ein und geben Sie den folgenden Bef...
Fallstudie zur Übermittlung von HTML-Formularen
Um die Methode zur Formularübermittlung zusammenz...
Häufige Fehler bei der Verwendung von React Hooks
React Hooks ist eine neue Funktion, die in React ...
Lösen Sie das Problem des unzureichenden Docker-Festplattenspeichers
Nachdem der Server, auf dem sich Docker befindet,...
URL-Darstellung in HTML-Webseiten
In HTML werden gängige URLs auf verschiedene Arten...
Lösen Sie das Problem des Zeilenumbruchs in der Scroll-Ansicht des WeChat-Applets
Als ich heute ein kleines Programm schrieb, benut...
18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie
Designer müssen Psychologie verstehen, indem sie ...
Detaillierte Erklärung der benutzerdefinierten Ereignisse von Vue-Komponenten
Inhaltsverzeichnis Zusammenfassen <Vorlage>...
Hyperlink-Tag für HTML-Webseiten
Lernprogramm zum Hyperlink-Tag einer HTML-Webseit...