Home-theater-designers
JavaScript ist eine der beliebtesten und vielseitigsten Programmiersprachen, mit der Sie heute loslegen können. Diese Programmiersprache wird zu Recht als die Sprache des Webs bezeichnet und ist unerlässlich, um Ihren Websites Interaktivität zu verleihen.
Das Formularelement ist eines der am häufigsten verwendeten HTML-Elemente auf Websites. Diese Formulare nehmen Eingaben des Benutzers entgegen und verarbeiten diese im Browser oder Server. Es ist jedoch wichtig, diese Eingaben zu validieren, um Sicherheitsprobleme und unerwünschte Fehler zu beheben.
DOM-Manipulation verstehen
Bevor wir mit der Implementierung der clientseitigen Formularvalidierung mit JavaScript fortfahren, ist es wichtig, das Document Object Model, allgemein als 'DOM' bekannt, zu verstehen. Das DOM ist eine standardisierte API, die es JavaScript ermöglicht, mit Elementen auf einer HTML-Webseite zu interagieren.
Erfahren Sie mehr: Der versteckte Held der Websites: Das DOM verstehen
Um Ereignis-Listener hinzuzufügen und Benutzereingaben abzurufen, müssen Sie die Grundlagen der DOM-Manipulation verstehen. Hier ist ein Beispiel, das erklärt, wie Sie den Inhalt der Webseite mit der DOM-API und JavaScript ändern können:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Im obigen Code ist die
Nachdem Sie nun die Grundlagen der DOM-Manipulation verstanden haben, können wir die Formularvalidierung implementieren.
Formularvalidierung mit JavaScript
Es gibt verschiedene Arten von Eingaben, die Sie von einem Benutzer übernehmen können. Texttyp, E-Mail-Typ, Passworttyp, Optionsfelder und Kontrollkästchen sind einige der häufigsten, auf die Sie stoßen können. Aufgrund dieser großen Mehrheit der Eingabetypen müssen Sie unterschiedliche Logiken verwenden, um jeden von ihnen zu validieren.
Bevor wir uns mit der Validierung befassen, nehmen wir uns einen Moment Zeit, um HTML-Formulare und ihre Bedeutung zu verstehen. HTML-Formulare sind eine der wichtigsten Möglichkeiten, mit der Website zu interagieren, da Sie Ihre Daten eingeben, Änderungen anwenden, Popups aufrufen, Informationen an einen Server senden und vieles mehr.
lokales admin-passwort zurücksetzen windows 10
Der HTML-Code -Element wird verwendet, um diese benutzerorientierten Formulare zu erstellen. So können Sie die Eingaben eines HTML-Formulars validieren:
1. E-Mail-Validierung
Unabhängig davon, ob Sie ein Authentifizierungssystem erstellen oder nur Benutzer-E-Mails für Ihren Newsletter sammeln, ist es wichtig, die E-Mail zu validieren, bevor Sie sie in Ihrer Datenbank speichern oder verarbeiten können. Um zu überprüfen, ob eine E-Mail alle erforderlichen Bedingungen erfüllt, können Sie a regulären Ausdruck .
HTML-Code:
JavaScript:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Passwortvalidierung
Passwörter sind ein wichtiges Datenelement, das eine besondere Art der Validierung erfordert, um seine Sicherheit zu gewährleisten. Betrachten Sie ein Anmeldeformular mit zwei Feldern: Passwort- und Passwort-Bestätigungsfelder. Um dieses Eingabepaar zu validieren, müssen Sie Folgendes beachten:
- Das Passwort muss mehr als 6 Zeichen lang sein.
- Der Wert des Kennworts und des Felds zum Bestätigen des Kennworts müssen gleich sein.
HTML-Code:
JavaScript:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. Validierung der Funkeingabe
Die HTML-Radioeingabe ist eine spezielle Art von grafischen Steuerelementen, die es dem Benutzer ermöglicht, nur eine aus einem vordefinierten Satz sich gegenseitig ausschließender Optionen auszuwählen. Ein häufiger Anwendungsfall einer solchen Eingabe wäre die Auswahl des Geschlechts. Um eine solche Eingabe zu validieren, müssen Sie überprüfen, ob mindestens eine davon ausgewählt ist.
Dies kann mit dem logische Operatoren wie das UND ( && ) und nicht ( ! ) Operator auf diese Weise:
HTML-Code:
Male
Female
Others
JavaScript:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. Wählen Sie Eingabevalidierung
Die HTML-Element wird verwendet, um eine Dropdown-Liste zu erstellen. Die Tags innerhalb der -Element definieren die verfügbaren Optionen in der Dropdown-Liste. Jedes von diesen Tags sind mit einem Wertattribut verknüpft.
So schauen Sie sich altersbeschränkte YouTube-Videos an
Für die Standard- oder Anfangsoption können Sie ihren Wert auf eine leere Zeichenfolge setzen, damit sie als ungültige Option betrachtet wird. Legen Sie für alle anderen Optionen ein entsprechendes Wertattribut fest. Hier ist ein Beispiel, wie Sie a validate validieren können Eingabeelement:
HTML-Code:
Select One
Mr
Mrs
Ms
JavaScript:
So laden Sie Linux auf Chromebook herunter
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Checkbox-Validierung
Eingabeelemente vom Typ Checkbox werden standardmäßig als Checkboxen dargestellt, die bei Aktivierung markiert oder angekreuzt sind. Über eine Checkbox können Sie einzelne Werte für die Übermittlung in ein Formular auswählen. Kontrollkästchen sind eine beliebte Option für die Eingabe von 'AGB akzeptieren'.
Um herauszufinden, ob ein Kontrollkästchen aktiviert ist oder nicht, können Sie auf das markierte Attribut am Kontrollkästcheneingang zugreifen. Hier ist ein Beispiel:
HTML-Code:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Vorbeugung ist besser als Heilung
Es wird immer empfohlen, alle Eingaben, die Sie von einem Besucher erhalten, zu validieren, um ein sicheres Erlebnis zu gewährleisten. Hacker versuchen ständig, schädliche Daten in die Eingabefelder einzugeben, um Cross-Site-Scripting-Angriffe und SQL-Injections durchzuführen.
Jetzt, da Sie wissen, wie Sie Ihre HTML-Eingaben validieren, versuchen Sie es doch einmal, indem Sie ein Formular erstellen und die oben beschriebenen Strategien implementieren.
Teilen Teilen Tweet Email So erstellen Sie ein Formular in HTMLErmöglichen Sie Ihren Benutzern, Daten auf Ihren Websites mit HTML-Formularen einzugeben.
Weiter lesen Verwandte Themen- Programmierung
- HTML
- JavaScript
- Web Entwicklung
- Codierungs-Tutorials
Nitin ist ein begeisterter Softwareentwickler und Student der Computertechnik, der Webanwendungen mit JavaScript-Technologien entwickelt. Er arbeitet als freiberuflicher Webentwickler und schreibt in seiner Freizeit gerne für Linux und Programmierung.
Mehr von Nitin RanganathAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren