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
Linux-Fernsteuerungsprogramm für Windows-System (drei Methoden)
Manchmal müssen wir Programme auf dem Windows-Sys...
IE8 bietet eine gute Erfahrung: Aktivitäten
Heute habe ich einen kleinen Vorgeschmack auf IE8...
Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen
Der Blogger hat MySQL ein oder zwei Monate lang n...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20
Tutorial zum Herunterladen und Installieren von M...
Eine kurze Analyse des Zeitproblems von MySQL
Der Standardzeittyp (Datum/Uhrzeit und Zeitstempe...
So fügen Sie bedingte Ausdrücke zu Aggregatfunktionen in MySql hinzu
MySQL-Filterungs-Timing von Where-Bedingungen und...
MySQL-Dienst und Datenbankverwaltung
Inhaltsverzeichnis 1. Anweisungen zum Starten und...
Vue Router vue-router ausführliche Erklärung Anleitung
Chinesische Dokumentation: https://router.vuejs.o...
CSS3 implementiert fehlendes Eckrechteck, gefaltetes Eckrechteck und fehlenden Eckrand
Vorwort Vor ein paar Tagen bin ich zufällig auf d...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows
In diesem Artikel finden Sie das Installations-Tu...
Probleme bei der Installation von MySQL und mysql.sock unter Linux
Vor kurzem traten bei der Installation von Apache...
Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen
Beeinflusst Farbe die Website-Besucher? Vor einig...
Implementierung der CSS3-Button-Randanimation
Erster Blick auf die Wirkung: html <a href=&qu...
Detaillierte Erklärung und Beispiele der MySQL-Isolationsebene
Inhaltsverzeichnis 4 Isolationsebenen von MySQL E...