Vue Academy · 课时

使用 VeeValidate 进行基于模式的验证

Q: 「使用 VeeValidate 进行基于模式的验证」这节课中我会学到什么？

useForm()、useField()、yup 模式、错误消息，以及处理异步验证。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

useForm()、useField()、yup 模式、错误消息，以及处理异步验证。

使用 VeeValidate 进行基于模式的验证 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

使用 VeeValidate 扩展验证能力

随着表单变大，手写验证会变得繁琐。VeeValidate 是一个广受欢迎的 Vue 库，它管理表单状态，针对 schema 执行验证，并以响应式方式提供错误信息。

基于 schema 的验证

您不必手动编写检查，而是可以在 schema 中以声明方式描述规则。将 VeeValidate 与 yup 结合，就能流畅地构建这个 schema。

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

使用 useForm 设置表单

useForm 会初始化表单级状态和验证。将 schema 作为 validationSchema 传入，它就会把所有内容连接起来。

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

使用 useField 连接字段

useField 按名称注册一个输入框。它会返回字段的 value、对应的 errorMessage 和 handleBlur 处理程序。

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

在模板中绑定字段

使用 v-model 绑定返回的 value，并将 @blur 连接到 handleBlur，以便在失焦时进行验证。

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

显示错误消息

每个字段都会提供自己的 errorMessage，它是一个响应式字符串。字段有效时该字符串为空，无效时则包含 schema 消息。

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

处理提交

handleSubmit 会包装您的提交函数。它会先运行验证，只有在整个表单有效时，才会使用这些值调用您的回调函数。

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

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

表单级错误

useForm 提供的 errors 对象会将字段名称映射到当前消息，适合用于摘要或条件式界面。

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

为何使用库

声明式规则定义取代重复的手动检查。
内置失焦、变更和提交验证时机。
每个字段都有 errorMessage，表单级别有 errors。
通过 yup 可以轻松实现异步规则和跨字段规则。

组件式 API 与组合式 API

VeeValidate 还提供 <Form> 和 <Field> 组件，适合以模板为主的风格。组合式函数 useForm 和 useField 更适合 <script setup>，也能提供更多控制。

手动验证与基于 schema 的验证

手动验证有助于理解验证机制，适合极小型表单。使用 VeeValidate 和 yup 进行基于 schema 的验证，则可以用少得多的代码和更少的错误应对大型复杂表单。

快速检查

测试您对 VeeValidate 的了解。

回顾

使用 VeeValidate 进行基于 schema 的验证：

在 yup schema 中描述规则，并将其作为 validationSchema 传入。
useForm 管理表单状态、errors 和 handleSubmit。
对于每个输入框，useField 返回 value、errorMessage 和 handleBlur。
对于大型表单，它的扩展性远胜于手动验证。

常见问题解答

「使用 VeeValidate 进行基于模式的验证」课时是免费的吗？

是的 — 「使用 VeeValidate 进行基于模式的验证」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 VeeValidate 进行基于模式的验证」这节课中我会学到什么？

useForm()、useField()、yup 模式、错误消息，以及处理异步验证。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 VeeValidate 进行基于模式的验证」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

所有表单元素上的 v-model
表单提交与重置
手动验证模式
使用 VeeValidate 进行基于模式的验证

← 返回 Vue Academy