javascript / beginner
Snippet
Validieren numerischer Eingabegrenzen mit Try Catch und benutzerdefinierten Fehlern in Vue
Der JavaScript-Block try...catch in Verbindung mit throw ermöglicht das Durchsetzen von Validierungsregeln, indem die Ausführung bei ungültigen Daten gezielt unterbrochen wird. In Vue ermöglicht das Abfangen von Error-Instanzen das saubere Befüllen von Fehlermeldungen in der UI.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup>import { ref } from 'vue';const ageInput = ref('');const errorMessage = ref('');function validateAge() {errorMessage.value = '';try {const age = Number(ageInput.value);if (Number.isNaN(age) || age < 18) {throw new Error('Age must be a valid number of at least 18.');}} catch (err) {errorMessage.value = err.message;}}</script>
vue
Erklärung
1
errorMessage.value = '';
Löscht vorherige Fehlermeldungen vor Beginn des neuen Validierungsversuchs.
2
throw new Error('Age must be a valid number of at least 18.');
Erzeugt und wirft ein benutzerdefiniertes JavaScript-Error-Objekt, falls die Kriterien nicht erfüllt sind.
3
catch (err) {
errorMessage.value = err.message;
}
Fängt den geworfenen Fehler ab und weist dessen Nachrichtentext dem reaktiven Fehler-Ref zu.