So verwenden Sie Javascript für die erweiterte Formularvalidierung mit benutzerdefinierten Regeln

In diesem Handbuch gehen wir durch den Aufbau eines kompletten, fortschrittlichen Validierungssystems mit Vanilla JavaScript. Sie lernen, wie Sie benutzerdefinierte Regeln definieren, dynamische Fehlermeldungen anzeigen, mehrere Felder zusammen validieren und Ihren Code warten können. Jeder Abschnitt enthält produktionsbereite Code-Snippets, die Sie sofort anpassen können.

Die Grenzen der HTML5-Validierung verstehen

HTML5-Attribute wie , und eignen sich hervorragend für einfache Prüfungen, aber es fehlt ihnen an Flexibilität.

• Keine feldübergreifende Validierung – Sie können nicht bestätigen, dass ein Passwort und ein Bestätigungsfeld mit HTML5 übereinstimmen.
• Begrenzte Fehlermeldungen – Die eingebauten Tooltips des Browsers sind inkonsistent und können nicht vollständig gestylt werden.
• Keine Echtzeit-Aktualisierung – Die HTML5-Validierung wird normalerweise nur bei der Einreichung von Formularen ausgelöst, nicht bei jedem Tastendruck.
• Constraint Validation API – Obwohl es leistungsfähig ist, stützt es sich immer noch auf die eingebauten Regeln des Browsers und ist nicht in der Lage, komplexe benutzerdefinierte Logik leicht zu definieren.

JavaScript füllt diese Lücken. Mit Ereignis-Listener und benutzerdefinierten Funktionen können Sie eine Validierung erstellen, die sowohl ausdrucksstark als auch benutzerfreundlich ist.

Einrichten der HTML-Formularstruktur

Beginnen Sie mit einem sauberen semantischen Formular. Hier ist ein Beispiel, das Felder für Benutzername, E-Mail, Passwort und Bestätigungskennwort enthält. Wir haben -Attribute für die Zugänglichkeit hinzugefügt und Elemente leer, die Fehlermeldungen enthalten.

<form id="registrationForm" novalidate>
 <div class="form-group">
 <label for="username">Username</label>
 <input type="text" id="username" name="username" placeholder="e.g. johndoe" required>
 <span id="usernameError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="email">Email address</label>
 <input type="email" id="email" name="email" placeholder="[email protected]" required>
 <span id="emailError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="password">Password</label>
 <input type="password" id="password" name="password" placeholder="At least 8 characters" required>
 <span id="passwordError" class="error-message" role="alert"></span>
 </div>

 <div class="form-group">
 <label for="confirmPassword">Confirm Password</label>
 <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Repeat password" required>
 <span id="confirmPasswordError" class="error-message" role="alert"></span>
 </div>

 <button type="submit">Register</button>
</form>

Beachten Sie das -Attribut auf dem Formular. Dies sagt dem Browser, dass er seine eigene eingebaute Validierung deaktivieren soll, damit wir alles mit JavaScript verarbeiten können. Wir verwenden CSS, um Fehlermeldungen anzuzeigen oder auszublenden und visuelles Feedback (z. B. rote Grenzen) zu ungültigen Feldern hinzuzufügen.

Entwerfen einer zentralen Validierungslogik

Anstatt den Validierungscode über Ereignis-Handler zu verteilen, erstellen wir ein zentrales Objekt, das benutzerdefinierte Regeln enthält. Jede Regel ist eine Funktion, die (gültig) oder (ungültig) zusammen mit einer optionalen Fehlermeldung zurückgibt. Dieser Ansatz macht es einfach, den Code zu erweitern und zu pflegen.

const validators = {
 required: (value) => value.trim() !== '' || 'This field is required.',
 email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || 'Please enter a valid email address.',
 minLength: (min) => (value) => value.length >= min || `Must be at least ${min} characters.`,
 passwordStrength: (value) => {
 const errors = [];
 if (value.length < 8) errors.push('At least 8 characters.');
 if (!/[A-Z]/.test(value)) errors.push('One uppercase letter.');
 if (!/[0-9]/.test(value)) errors.push('One number.');
 if (!/[!@#$%^&*]/.test(value)) errors.push('One special character.');
 return errors.length === 0 || errors.join(' ');
 },
 match: (otherFieldId) => (value, formData) => {
 const otherValue = formData.get(otherFieldId);
 return value === otherValue || 'Passwords do not match.';
 }
};

Beachten Sie, dass Validatoren parametrisiert werden können – gibt eine Funktion zurück, die den Wert erwartet. Der -Validator erhält die ID eines anderen Feldes und verwendet (ein -Objekt), um Werte zu vergleichen. Dieses Muster ist sehr gut wiederverwendbar.

Erstellen von benutzerdefinierten Regeln für jedes Feld

Definieren Sie, welche Validatoren für jedes Feld gelten: Diese Zuordnung ist ein einfaches Objekt, bei dem Schlüssel Feldnamen und Werte Arrays von Validatorfunktionen sind.

const fieldRules = {
 username: [
 validators.required,
 validators.minLength(3),
 (value) => /^[a-zA-Z0-9_]+$/.test(value) || 'Usernames can only contain letters, numbers, and underscores.'
 ],
 email: [
 validators.required,
 validators.email
 ],
 password: [
 validators.required,
 validators.passwordStrength
 ],
 confirmPassword: [
 validators.required,
 validators.match('password')
 ]
};

Sie können ganz einfach eine neue benutzerdefinierte Regel hinzufügen, z. B. eine Überprüfung, ob der Benutzername nicht bereits übernommen wurde (async-Validierung), indem Sie der Liste eine async-Funktion hinzufügen.

Ausführen der Validierung auf Formular Einreichung

Fügen Sie einen Ereignis-Listener an das Formular an, das die Einreichung verhindert, alle Validatoren ausführt und Fehler sammelt.

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
 event.preventDefault();
 const formData = new FormData(form);
 const errors = validateForm(formData);

 if (Object.keys(errors).length === 0) {
 // All valid – you can submit programmatically or send via fetch
 console.log('Form is valid. Submitting...');
 // form.submit();
 } else {
 displayErrors(errors);
 }
});

Die Funktion iteriert über jedes Feld, führt seine Validatoren aus und sammelt Fehlermeldungen.

function validateForm(formData) {
 const errors = {};
 for (const [fieldName, rules] of Object.entries(fieldRules)) {
 const value = formData.get(fieldName) || '';
 for (const rule of rules) {
 const result = rule(value, formData);
 if (result !== true) {
 errors[fieldName] = result; // result is the error string
 break; // stop after first failure for this field
 }
 }
 }
 return errors;
}

Anzeige von Validierungs-Feedback in Echtzeit

Benutzer profitieren davon, Fehler beim Tippen zu sehen, nicht nur beim Einreichen. Fügen Sie Ereignis-Listener für und in jedem Feld hinzu. Um überwältigende Benutzer zu vermeiden, ist es ein gutes Muster, auf Unschärfe zu validieren (wenn sie das Feld verlassen) und dann bei jeder nachfolgenden Eingabe erneut zu validieren, bis der Fehler behoben ist.

document.querySelectorAll('#registrationForm input').forEach((input) => {
 input.addEventListener('blur', () => {
 validateField(input.id, input.value);
 });
 input.addEventListener('input', () => {
 // If the field currently has an error, re-validate on each keystroke
 const errorSpan = document.getElementById(input.id + 'Error');
 if (errorSpan.textContent !== '') {
 validateField(input.id, input.value);
 }
 });
});

Die Funktion überprüft nur die Regeln für ein einzelnes Feld und aktualisiert die entsprechende Fehlerspanne.

function validateField(fieldId, value) {
 const formData = new FormData(form);
 formData.set(fieldId, value);
 const rules = fieldRules[fieldId];
 if (!rules) return;
 for (const rule of rules) {
 const result = rule(value, formData);
 if (result !== true) {
 setFieldError(fieldId, result);
 return;
 }
 }
 clearFieldError(fieldId);
}

Stylingfehler und Erfolgszustände

Verwenden Sie CSS, um das visuelle Erscheinungsbild von gültigen/ungültigen Feldern zu ändern. Die Funktionen und fügen CSS-Klassen hinzu oder entfernen sie und aktualisieren Sie das -Attribut für die Zugänglichkeit.

function setFieldError(fieldId, message) {
 const input = document.getElementById(fieldId);
 const errorSpan = document.getElementById(fieldId + 'Error');
 input.classList.add('is-invalid');
 input.classList.remove('is-valid');
 input.setAttribute('aria-invalid', 'true');
 errorSpan.textContent = message;
}

function clearFieldError(fieldId) {
 const input = document.getElementById(fieldId);
 const errorSpan = document.getElementById(fieldId + 'Error');
 input.classList.remove('is-invalid');
 input.classList.add('is-valid');
 input.setAttribute('aria-invalid', 'false');
 errorSpan.textContent = '';
}

Das entsprechende CSS könnte sein:

.is-invalid {
 border-color: #dc3545;
}
.is-valid {
 border-color: #28a745;
}
.error-message {
 color: #dc3545;
 font-size: 0.875rem;
 min-height: 1.2em;
}

Erstellen eines Passwort-Stärkemessgeräts

Ein Kennwortstärkemesser bietet visuelles Feedback, das Benutzer dazu ermutigt, stärkere Kennwörter zu erstellen. Anstatt ein einfaches Pass/Fail zu erstellen, können Sie eine Punktzahl berechnen und eine Fortschrittsleiste anzeigen.

function passwordStrengthScore(password) {
 let score = 0;
 if (password.length >= 8) score += 1;
 if (password.length >= 12) score += 1;
 if (/[A-Z]/.test(password)) score += 1;
 if (/[a-z]/.test(password)) score += 1;
 if (/[0-9]/.test(password)) score += 1;
 if (/[^A-Za-z0-9]/.test(password)) score += 1;
 return score; // 0-6
}

Fügen Sie ein Ereignis an das Passwortfeld an, das ein Meterelement aktualisiert. Sie können die Punktzahl einem Label wie Weak (0-2), Fair (3-4), Strong (5-6) zuordnen.

const passwordMeter = document.getElementById('passwordStrengthMeter');
const passwordInput = document.getElementById('password');

passwordInput.addEventListener('input', () => {
 const score = passwordStrengthScore(passwordInput.value);
 const percentage = (score / 6) * 100;
 passwordMeter.value = percentage;
 passwordMeter.style.accentColor = score < 3 ? '#dc3545' : score < 5 ? '#ffc107' : '#28a745';
});

Asynchrone Zollvorschriften

Einige Validierungsprüfungen erfordern eine Hin- und Rückfahrt zum Server, z. B. die Überprüfung, ob ein Benutzername oder eine E-Mail bereits registriert ist. Um dies zu bewältigen, ohne die Benutzeroberfläche zu blockieren, können Sie Ihrem Validator eine async-Funktion zuweisen und die Validierungslogik so anpassen, dass das Ergebnis abgewartet wird.

const asyncValidators = {
 uniqueUsername: async (value) => {
 try {
 const response = await fetch(`/api/check-username?username=${encodeURIComponent(value)}`);
 const data = await response.json();
 return data.available || 'Username is already taken.';
 } catch {
 return 'Could not verify username availability.';
 }
 }
};

Aktualisieren Sie dann , um async-Validatoren zu unterstützen.

Best Practices für Produktionsformen

• Immer serverseitige validieren. Clientseitige Validierung ist eine Bequemlichkeit, niemals eine Sicherheitsschicht. Verwenden Sie die gleichen Regeln im Backend, um bösartige oder fehlerhafte Daten abzulehnen.
• Debounce async checks Wenn Sie bei Tastendruck für Serveraufrufe validieren, verwenden Sie einen Debounce-Timer (z. B. 300 ms), um ein Hämmern des Servers zu vermeiden.
• Verwenden Sie die Constraint Validation API, wenn möglich. Sie können benutzerdefiniertes JavaScript mit den eingebauten - und -Methoden für einen hybriden Ansatz mischen. Dies ist nützlich für Felder, die Standardeinschränkungen haben, aber benutzerdefinierte Nachrichten benötigen.
• Validierung zugänglich machen Verwenden Sie , um Fehlermeldungen mit Eingaben zu verknüpfen.
• Testen Sie über Browser und Geräte hinweg. Touch-Events, virtuelle Tastaturen und unterschiedliche Bildschirmgrößen sind unerlässlich. Testen Sie auch mit Browser-Autofill, das Ereignisse in unerwarteter Reihenfolge auslösen kann.
• Die Leistung im Auge behalten Für komplexe Formulare mit vielen Feldern kann die Batch-Validierung oder die Verwendung von für UI-Updates Jank verhindern.
• Stellen Sie klare, konstruktive Fehlermeldungen bereit. Sagen Sie dem Benutzer genau, was falsch ist und wie er es beheben kann. Vermeiden Sie generische Nachrichten wie "Ungültige Eingaben." Sagen Sie stattdessen "Passwort muss mindestens eine Zahl enthalten."

Weiter gehen: Modulare Validierung mit Bibliotheken

Wenn Ihr Projekt ein hohes Maß an benutzerdefinierten Regeln und Echtzeit-Validierung erfordert, können Sie eine leichte Bibliothek wie Validate.js oder die integrierte Constraint Validation API in Betracht ziehen. Der in diesem Artikel gezeigte Vanilla-Javascript-Ansatz gibt Ihnen jedoch die volle Kontrolle und Null-Abhängigkeiten, was ideal für leistungssensitive Anwendungen ist oder wenn Sie bestimmten Designrichtlinien folgen müssen.

Sie können auch benutzerdefinierte Validierung mit modernen Frameworks wie React oder Vue kombinieren, aber die Kernkonzepte der Trennung von Regeln und Präsentation bleiben gleich.

Häufige Fallstricke zu vermeiden

• Validieren nur bei submit Benutzer bevorzugen sofortiges Feedback.
• Keine Fehler zurücksetzen, wenn Felder gültig werden. Sobald ein Benutzer einen Fehler behebt, löschen Sie die Nachricht. Die Echtzeitlogik in diesem Artikel behandelt dies automatisch.
• Angenommen, der Benutzer befolgt die Validierung. JavaScript kann vollständig deaktiviert werden.
• Überkomplizierende Regeln Validatoren einfach und fokussiert halten. Eine Funktion sollte ein Anliegen testen. Kombinieren Sie sie, um mehrere Kriterien durchzusetzen.

Schlussfolgerung

Die Erstellung von benutzerdefinierten JavaScript-Formularvalidierung ist eine wesentliche Fähigkeit für die Erstellung von polierten, benutzerfreundlichen Webanwendungen. Durch die Strukturierung Ihres Codes um wiederverwendbare Validatorfunktionen und Echtzeit-Feedback können Sie alles von grundlegenden erforderlichen Feldern bis hin zu komplexen Kennwortstärkemessern und Feldvergleichen verarbeiten. Die Beispiele in diesem Artikel geben Ihnen eine solide Grundlage, um sich an Ihre eigenen Projekte anzupassen.

Denken Sie daran, dass die Validierung ein wichtiger Teil der Benutzererfahrung ist. Testen Sie Ihre Formulare gründlich, hören Sie auf das Feedback der Benutzer und koppeln Sie die clientseitige Validierung immer mit robusten serverseitigen Prüfungen. Für weitere Informationen lesen Sie den Leitfaden der W3C Web Accessibility Initiative zur Formularvalidierung und den MDN-Artikel zur Formularvalidierung.

Indem Sie die hier beschriebenen Muster und Best Practices befolgen, erstellen Sie Formulare, die sowohl sicher als auch angenehm zu verwenden sind. Beginnen Sie mit dem Experimentieren mit den Code-Schnipseln, passen Sie die Regeln an Ihre Geschäftslogik an und iterieren Sie basierend auf echten Benutzerinteraktionen.