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
Detaillierte Erläuterung der perfekten Integrationslösung zwischen Serv-U FTP und AD
Ich habe mich beim Backend angemeldet, um die Lös...
JavaScript-Countdown zum Schließen von Anzeigen
Verwenden von Javascript zum Implementieren eines...
MySQL 8.X Installations-Tutorial unter Windows
Zuvor habe ich MySQL 5.7 verwendet, aber da MySQL...
Verwendung der Linux Dynamic Link Library
Im Vergleich zu gewöhnlichen Programmen haben dyn...
Praktische Aufzeichnung von VUE mithilfe des Wortwolkendiagramms von Echarts
echarts Wortwolke ist eine Erweiterung von echart...
Ausführliches Tutorial zur CentOS-Installation von MySQL5.7
In diesem Artikel werden die detaillierten Schrit...
Ideen und Codes zur Realisierung des Lupeneffekts in js
In diesem Artikelbeispiel wird der spezifische Co...
Implementierungsbeispiel eines Nginx+Tomcat-Load-Balancing-Clusters
Inhaltsverzeichnis Einführung 1. Fallübersicht 2....
So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit
Egal ob Sie Webdesigner oder UI-Designer sind, di...
HTML verwendet reguläre Ausdrücke zum Testen von Tabellenbeispielen
Hier ist ein Beispielcode für die Verwendung regu...
Formel und Berechnungsmethode zur Schätzung der Server-Parallelität
Vor Kurzem musste ich den Server erneut einem Str...
CSS3-Mauszeiger-Übergangszoomeffekt
Das Folgende ist ein Bild-Zoom-Effekt, der in rei...
Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue
Inhaltsverzeichnis Vorwort 1. Mit vue-cli 1. Defi...
Details zur Vue-Vorlagenkompilierung
Inhaltsverzeichnis 1. analysieren 1.1 Regeln für ...
So deinstallieren Sie MySQL 8.0 unter Linux
1. MySQL herunterfahren [root@localhost /]# Diens...