Vue Academy · Oppitunti

VeeValidate skeemapohjaiseen validointiin

useForm(), useField(), yup-skeemat, virheilmoitukset, asynkronisen validoinnin käsittely.

Oppitunti 4/413 vaihetta

VeeValidate skeemapohjaiseen validointiin on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Validoinnin laajentaminen VeeValidatella

Lomakkeiden kasvaessa itse kirjoitetusta validoinnista tulee työlästä. VeeValidate on suosittu Vue-kirjasto, joka hallinnoi lomakkeen tilaa, suorittaa validoinnin skeemaa vasten ja tarjoaa virheet — kaiken tämän reaktiivisesti.

Skeemaperustainen validointi

Tarkistusten kirjoittamisen sijaan kuvaat säännöt deklaratiivisesti skeemassa. Kun yhdistät VeeValidaten ja yup-kirjaston, voit rakentaa skeeman sujuvasti.

<script setup>
import * as yup from 'yup'
const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required()
})
</script>

Lomakkeen alustaminen useForm-funktiolla

useForm alustaa lomaketason tilan ja validoinnin. Välitä skeemasi validationSchema-ominaisuutena, niin kaikki kytkeytyy automaattisesti yhteen.

<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
  validationSchema: schema
})
</script>

Kentän yhdistäminen useField-funktiolla

useField rekisteröi yhden syöttökentän nimen perusteella. Se palauttaa kentän value-arvon, sen errorMessage-viestin ja handleBlur-käsittelijän.

<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>

Kentän sitominen templatessa

Sido palautettu value v-model-direktiivillä ja yhdistä @blur handleBlur-käsittelijään blur-tapahtumassa tehtävää validointia varten.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span>{{ errorMessage }}</span>
</template>

Virheviestin näyttäminen

Jokainen kenttä tarjoaa oman errorMessage-arvonsa, joka on reaktiivinen merkkijono. Se on tyhjä, kun kenttä on kelvollinen, ja sisältää skeeman määrittämän viestin, kun kenttä ei ole kelvollinen.

<template>
  <input v-model="name" @blur="handleBlur" />
  <span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>

Lähetyksen käsittely

handleSubmit käärii lähetysfunktiosi. Se suorittaa ensin validoinnin ja kutsuu palautefunktiotasi arvoilla vain, jos koko lomake on kelvollinen.

<script setup>
const onSubmit = handleSubmit((values) => {
  console.log('valid form', values)
})
</script>

<template>
  <form @submit="onSubmit">...</form>
</template>

Lomaketason virheet

useForm-funktion palauttama errors-objekti yhdistää kenttien nimet niiden nykyisiin viesteihin. Se on kätevä esimerkiksi yhteenvedossa tai ehdollisessa käyttöliittymässä.

<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>

Miksi käyttää kirjastoa

Deklaratiiviset skeemat korvaavat toistuvat manuaaliset tarkistukset.
Sisäänrakennetut ajankohdat blur-, muutos- ja lähetysvalidoinnille.
Kenttäkohtainen errorMessage ja lomaketason errors.
Asynkroniset ja kenttien väliset säännöt on helppo toteuttaa yup-kirjaston avulla.

Komponentit ja Composition API

VeeValidate tarjoaa myös <Form>- ja <Field>-komponentit template-keskeiseen tyyliin. Composition API -funktiot useForm ja useField sopivat paremmin yhteen <script setup>-syntaksin kanssa ja antavat enemmän hallintaa.

Manuaalinen ja skeemaperustainen validointi

Manuaalinen validointi opettaa toimintaperiaatteen ja sopii pieniin lomakkeisiin. VeeValidaten ja yup-kirjaston skeemaperustainen validointi skaalautuu suuriin ja monimutkaisiin lomakkeisiin huomattavasti pienemmällä koodimäärällä ja vähäisemmällä virheiden määrällä.

Pikatarkistus

Testaa, mitä tiedät VeeValidatesta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Skeemaperustainen validointi VeeValidatella:

Kuvaa säännöt yup-skeemassa ja välitä se validationSchema-ominaisuutena.
useForm hallinnoi lomakkeen tilaa, errors-objektia ja handleSubmit-funktiota.
useField palauttaa jokaiselle syöttökentälle value-, errorMessage- ja handleBlur-arvot.
Se skaalautuu suurissa lomakkeissa huomattavasti paremmin kuin manuaalinen validointi.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”VeeValidate skeemapohjaiseen validointiin” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “VeeValidate skeemapohjaiseen validointiin”. 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 ”VeeValidate skeemapohjaiseen validointiin”?

useForm(), useField(), yup-skeemat, virheilmoitukset, asynkronisen validoinnin käsittely. 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 4/4.

Kuinka kauan ”VeeValidate skeemapohjaiseen validointiin”-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

← Takaisin: Vue Academy