Mönster för manuell validering
Reaktiva felobjekt, validering vid blur kontra vid skickande, matchning av lösenordsbekräftelse.
Mönster för manuell validering är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Validering utan bibliotek
För enkla formulär kan Ni validera manuellt med hjälp av reaktivt tillstånd. Ni spårar fel, kör kontroller vid inskickning eller när fokus lämnar ett fält och visar meddelanden med direktiv. Det här lär ut grunderna som alla bibliotek bygger vidare på.
Ett errors-objekt
Behåll ett reaktivt errors-objekt med fältnamnen som nycklar. En tom sträng (eller en saknad nyckel) betyder att det inte finns något fel.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>En validate-funktion
Skriv en validate-funktion som kontrollerar varje fält och anger meddelanden i errors-objektet. Returnera om formuläret är giltigt.
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>Validering vid inskickning
Anropa validate i början av hanteraren för inskickning och avbryt om valideringen misslyckas. Då säkerställer Ni att inga ogiltiga data skickas.
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>Validering av enskilda fält när fokus lämnar dem
Validering endast vid inskickning kan kännas långsam. Validera ett enskilt fält när användaren lämnar det genom att använda @blur för omedelbar återkoppling.
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>Visa felmeddelanden
Använd v-if för att visa ett meddelande endast när fältet har ett fel. Placera det nära inmatningsfältet.
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>Formatera ogiltiga fält
Bind en klass med objektsyntax för att lägga till en röd kantlinje när ett fel finns. Klassen används bara medan errors.name har ett sant värde.
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>Stilen för error
En liten CSS-regel gör utseendet komplett – en röd kantlinje signalerar att fältet behöver åtgärdas.
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>Beräknad giltighet
Beräkna en övergripande giltighetsflagga med computed för att reaktivt aktivera eller inaktivera knappen för inskickning.
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>Fördelar och begränsningar
Manuell validering är tydlig och kräver inga beroenden, vilket passar utmärkt för små formulär. Men när reglerna växer – med kontroller mellan fält, asynkron validering och många fält – blir den upprepade koden snabbt omfattande. Därför finns det bibliotek.
Sammanfattning av valideringsflödet
Mönstret är: reaktiva fel, en validate-funktion, körning vid inskickning (och eventuellt när fokus lämnar ett fält), visning av meddelanden med v-if och formatering med en villkorlig klass.
Snabbtest
Testa dina kunskaper om manuell validering.
Sammanfattning
Mönster för manuell validering:
- Behåll ett reaktivt
errors-objekt med fälten som nycklar. - En
validate-funktion anger meddelanden och returnerar om formuläret är giltigt. - Validera vid inskickning och per fält med
@blurför snabb återkoppling. - Visa meddelanden med
v-if="errors.x"och formatera med:class="{ error: errors.x }".
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Mönster för manuell validering” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Mönster för manuell validering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Mönster för manuell validering”?
Reaktiva felobjekt, validering vid blur kontra vid skickande, matchning av lösenordsbekräftelse. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Mönster för manuell validering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- v-model på alla formulärelement
- Skicka och återställa formulär
- Mönster för manuell validering
- VeeValidate för schemabaserad validering