So implementieren Sie die clientseitige Formularvalidierung mit JavaScript
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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="paragraph"></p>
</body>
<script>
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
</script>
</html>Im obigen Code hat das <p> -Tag die ID von Paragraph . Während Sie den JavaScript-Code schreiben, können Sie auf dieses Element zugreifen, indem Sie die Methode document.getElementById('paragraph') aufrufen und ihren Wert manipulieren.
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.
Das HTML-Element <form> 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 einen regulären Ausdruck verwenden .
HTML-Code:
<input type="email" placeholder="[email protected]" id="email" required />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:
<input type="password" placeholder="Enter your password" id="password" required />
<input type="password" placeholder="Enter your password" id="confirm-password" required />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 logischen Operatoren wie dem AND ( && ) und NOT ( ! ) Operator auf folgende Weise erreicht werden:
HTML-Code:
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="others">Others</label>
<input type="radio" id="others" name="gender" value="others" />JavaScript:
const genders = document.getElementsByName("gender");
const validForm = false;
let i = 0;
while (!validForm && i < radios.length) {
if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert("Must check some option!");4. Wählen Sie Eingabevalidierung
Das HTML-Element <select> wird verwendet, um eine Dropdown-Liste zu erstellen. Die <option> -Tags innerhalb des <select> -Elements definieren die verfügbaren Optionen in der Dropdown-Liste. Jedem dieser <option> -Tags ist ein Wertattribut zugeordnet.
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 dafür, wie Sie ein <select> -Eingabeelement validieren können:
HTML-Code:
<select id="title" required>
<option value="">Select One</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>JavaScript:
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 "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:
<input type="checkbox" id="terms">
<label for="terms">I agree to the terms and conditions</label>JavaScript:
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.