javascript / beginner
Snippet
Validieren von ganzzahligen Formulardaten vor der Statusaktualisierung
Das Validieren und Bereinigen von Benutzereingaben anhand erwarteter Datentypen und Grenzwerte schützt den Anwendungszustand vor fehlerhaften Daten. Typüberprüfungen mittels typeof und Number.isInteger stellen sicher, dass nur gültige positive Ganzzahlen den reaktiven Status verändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { ref } from 'vue';const quantity = ref(1);const inputError = ref('');function updateQuantity(rawInput) {const parsedNumber = Number(rawInput);if (typeof rawInput !== 'string' && typeof rawInput !== 'number') {inputError.value = 'Invalid input type provided.';return;}if (!Number.isInteger(parsedNumber) || parsedNumber <= 0) {inputError.value = 'Please provide a positive whole number.';return;}inputError.value = '';quantity.value = parsedNumber;}
vue
Erklärung
1
const parsedNumber = Number(rawInput);
Konvertiert den Rohwert in einen numerischen primitiven Typ zur Validierung.
2
if (typeof rawInput !== 'string' && typeof rawInput !== 'number') {
Schützt vor unerwarteten Datentypen wie Objekten oder Arrays vor der weiteren Verarbeitung.
3
if (!Number.isInteger(parsedNumber) || parsedNumber <= 0) {
Überprüft, ob der Wert eine Ganzzahl und strikt größer als null ist.
4
inputError.value = 'Please provide a positive whole number.';
Setzt eine verständliche Fehlermeldung und bricht die Ausführung vorzeitig ab.
5
quantity.value = parsedNumber;
Aktualisiert den reaktiven Status erst nach erfolgreicher Validierung aller Prüfungen.