Manuaaliset validointimallit
Reaktiiviset virheoliot, validointi blur-tapahtuman yhteydessä tai lähetettäessä, salasanan vahvistuksen täsmäytys.
Manuaaliset validointimallit on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Validointi ilman kirjastoa
Yksinkertaiset lomakkeet voi validoida itse reaktiivisen tilan avulla. Seuraa virheitä, suorita tarkistukset lähetyksen yhteydessä tai kentästä poistuttaessa ja näytä viestit direktiivien avulla. Näin opit perusteet, joiden varaan jokainen kirjasto rakentuu.
errors-objekti
Säilytä reaktiivinen errors-objekti, jonka avaimet ovat kenttien nimiä. Tyhjä merkkijono (tai puuttuva avain) tarkoittaa, ettei virhettä ole.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>validate-funktio
Kirjoita validate-funktio, joka tarkistaa jokaisen kentän ja asettaa viestit errors-objektiin. Palauta tieto siitä, onko lomake kelvollinen.
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>Validointi lähetyksen yhteydessä
Kutsu validate-funktiota lähetyskäsittelijän alussa ja lopeta käsittely, jos validointi epäonnistuu. Näin varmistat, ettei virheellisiä tietoja lähetetä.
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>Kenttäkohtainen validointi blur-tapahtumassa
Pelkkä lähetyksen yhteydessä tehtävä validointi voi tuntua hitaalta. Validoi yksittäinen kenttä, kun käyttäjä poistuu siitä, käyttämällä @blur-tapahtumaa välitöntä palautetta varten.
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>Virheviestien näyttäminen
Käytä v-if-direktiiviä näyttääksesi viestin vain silloin, kun kyseisessä kentässä on virhe. Sijoita viesti syöttökentän lähelle.
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>Virheellisten kenttien tyylittely
Sido luokka objektilausekkeen avulla ja lisää punainen reunus, kun kentässä on virhe. Luokkaa käytetään vain, kun errors.name on totuusarvoltaan tosi.
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>error-tyyli
Pieni CSS-sääntö viimeistelee ulkoasun — punainen reunus kertoo, että kenttä vaatii huomiota.
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>Laskettu kelvollisuus
Muodosta yleinen kelvollisuuslippu computed-funktion avulla, jotta voit ottaa lähetyspainikkeen käyttöön tai poistaa sen käytöstä reaktiivisesti.
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>Vahvuudet ja rajoitukset
Manuaalinen validointi on läpinäkyvää eikä vaadi riippuvuuksia, joten se sopii hyvin pieniin lomakkeisiin. Kun sääntöjä kuitenkin kertyy — esimerkiksi kenttien välisiä tarkistuksia, asynkronista validointia ja paljon kenttiä — toistuva oheiskoodi lisääntyy. Siksi kirjastot ovat olemassa.
Validointikulun yhteenveto
Toimintamalli on seuraava: reaktiiviset virheet, validate-funktio, sen suorittaminen lähetyksen yhteydessä (ja haluttaessa blur-tapahtumassa), viestien näyttäminen v-if-direktiivillä ja tyylittely ehdollisella luokalla.
Pikatarkistus
Testaa, mitä tiedät manuaalisesta validoinnista.
Kertaus
Manuaalisen validoinnin toimintamallit:
- Säilytä kenttien mukaan avaimet sisältävä reaktiivinen
errors-objekti. validate-funktio asettaa viestit ja palauttaa tiedon kelvollisuudesta.- Validoi lähetyksen yhteydessä ja kenttäkohtaisesti
@blur-tapahtumassa nopean palautteen saamiseksi. - Näytä viestit muodolla
v-if="errors.x"ja tyylittele muodolla:class="{ error: errors.x }".
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Manuaaliset validointimallit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Manuaaliset validointimallit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Manuaaliset validointimallit”?
Reaktiiviset virheoliot, validointi blur-tapahtuman yhteydessä tai lähetettäessä, salasanan vahvistuksen täsmäytys. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Manuaaliset validointimallit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- v-model kaikissa lomake-elementeissä
- Lomakkeen lähetys ja nollaus
- Manuaaliset validointimallit
- VeeValidate skeemapohjaiseen validointiin