Einführung in Formulare in JavaScript

JavaScript ist eine Programmiersprache, die häufig in Webanwendungen zum Berechnen, Bearbeiten und Validieren von Daten, Erstellen dynamischer Seiten und Interagieren mit dem Benutzer verwendet wird. Da JavaScript viele Anwendungsfälle aufweist, lernen wir in diesem Artikel Formulare und die Formularüberprüfung mithilfe von JavaScript kennen.

Mit Hilfe von JavaScript können wir das HTML-Formular und seine Elemente clientseitig verbessern, validieren, ohne den Server aufzurufen. JavaScript kann sicherstellen, dass alle Anforderungen vom Benutzer erfüllt werden, bevor das Formular an das Anwendungsprogramm gesendet wird.

Da wir das Formular clientseitig validieren können, wird die Datenverarbeitung im Vergleich zur serverseitigen Validierung schneller. Die meisten Webentwickler verwenden die Validierung von JavaScript-Formularen.

Formular und Formularvalidierung in JavaScript

Formulare sind ein wichtiger Teil jeder Webanwendung, um Benutzerinformationen, Feedback oder Fragen zu sammeln. Durch JavaScript können wir eine bessere Benutzererfahrung bieten, indem wir dem Benutzer die Ergebnisse auf effiziente Weise anzeigen.

In Formularen zum Erfassen von Daten am häufigsten verwendete Elemente sind:

  • Textfeld: Um einen Text einzugeben
  • Druckknopf: Eine Aktion ausführen
  • Optionsfelder: Zum Auswählen einer Option aus einer Gruppe von Optionen
  • Kontrollkästchen: Zum Aktivieren oder Deaktivieren einer einzelnen, unabhängigen Option

Bei der Implementierung von Formularen müssen wir unserem Formular und den Elementen, die wir in unserem Formular verwendet haben, einen Namen geben, da uns die von uns zugewiesenen Namen dabei helfen, auf dieses Objekt (Formular und sein Element) in unserem JavaScript zu verweisen.

Ein typisches Formular sieht wie folgt aus:

Code:



Hinweis: Ich habe NAME = -Attribute für alle Formularelemente angegeben, einschließlich des Formulars selbst.

JavaScript-Formular verwendet Ereignishandler wie onClick oder onSubmit, um eine JavaScript-Aktion aufzurufen, wenn der Benutzer eine Aktion im Formular ausführt, z. B. das Klicken auf eine Schaltfläche.

Beispiel zum Sammeln und Überprüfen von Benutzerinformationen in JavaScript

Die Code-Implementierung zum Sammeln und Validieren von Benutzerinformationen ist unten angegeben.

1. index.html

Code:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Code:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Code:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Ausgabe 1: Benutzereingabe korrigieren

Ausgabe 2: Falsche / fehlende Benutzeranmeldeinformationen

  • index.html: Erstellt das Formular.
  • validate.js: Überprüft das Formular.
  • form-style.css: Entwirft das Layout des Formulars.

Die in das Formular eingegebenen Daten müssen im richtigen Format vorliegen, wie es für den Antrag erforderlich ist, und bestimmte Felder müssen zwingend ausgefüllt werden, damit das Formular gesendet werden kann.

Fazit

In diesem Artikel haben wir uns mit Formularen und den verschiedenen Elementen oder Steuerelementen in Formularen sowie mit der Rolle von JavaScript bei der Formularvalidierung, der Überprüfung der vom Benutzer eingegebenen Daten und den Ereignisbehandlungsfunktionen beim Ausführen einer Aktion wie Klicken auf eine Schaltfläche und befasst seine Vorteile.

Empfohlene Artikel

Dies ist eine Anleitung zu Formularen in JavaScript. Hier erläutern wir anhand geeigneter Beispiele, wie Benutzerinformationen gesammelt und validiert werden. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren.

  1. Kapselung in JavaScript (Funktionieren, Vorteile)
  2. Schritte zum Erstellen von Objekten in JavaScript
  3. Logik zur Suche nach Reverse in JavaScript mit Beispielen
  4. Top 6 Compiler in JavaScript
  5. Vollständige Anleitung zum Kontrollkästchen in Bootstrap
  6. Arten von Formen reagieren mit Beispielen
  7. Leitfaden zur Validierung von HTML-Formularen mit Beispielen

Kategorie:

Software-Entwicklung