javascript / intermediate
Snippet
Strukturierte Formularvalidierung mittels Regex-Mustern und Objektdestrukturierung
Moderne JavaScript-Funktionen wie `Object.entries()`, verschachteltes Destructuring, der Nullish-Coalescing-Operator (`??`) und RegExp-Prüfungen ermöglichen klare und wartbare Datenvalidierungen. Reaktive Fehlerobjekte in Vue spiegeln den Validierungsstatus direkt in den Template-Bindungen wider.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { reactive } from 'vue';export function useFormValidator(rules) {const validationErrors = reactive({});function validatePayload(formData) {Object.keys(validationErrors).forEach(key => delete validationErrors[key]);for (const [field, { pattern, required, minLength }] of Object.entries(rules)) {const value = formData[field] ?? '';const trimmed = typeof value === 'string' ? value.trim() : '';if (required && trimmed.length === 0) {validationErrors[field] = 'Field is required';continue;}if (minLength && trimmed.length < minLength) {validationErrors[field] = `Must be at least ${minLength} characters`;continue;}if (pattern && !pattern.test(trimmed)) {validationErrors[field] = 'Invalid format';}}return Object.keys(validationErrors).length === 0;}return { validationErrors, validatePayload };}
vue
Erklärung
1
for (const [field, { pattern, required, minLength }] of Object.entries(rules)) {
Verwendet Object.entries mit verschachteltem Destructuring, um Regelschlüssel und Validierungskriterien zu extrahieren.
2
const value = formData[field] ?? '';
Nutzt den Nullish-Coalescing-Operator für einen sicheren Fallback, falls ein Feld undefined oder null ist.
3
if (pattern && !pattern.test(trimmed)) {
Führt RegExp.prototype.test auf dem getrimmten String aus, um die Übereinstimmung mit dem Muster zu prüfen.