手动验证模式
响应式错误对象、失焦验证与提交验证，以及密码确认匹配。
手动验证模式 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
不使用库进行验证
对于简单的表单，您可以使用响应式状态手动进行验证。您可以跟踪错误，在提交时或失焦时执行检查，并使用指令显示消息。这些内容构成了每个库的基础。
错误对象
请保留一个以字段名称为键的响应式 errors 对象。空字符串（或缺少键）表示没有错误。
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>验证函数
编写一个 validate 函数，检查每个字段并在 errors 对象中设置消息。返回表单是否有效。
<script setup>
function validate() {
errors.name = form.name ? '' : 'Name is required'
errors.email = form.email.includes('@') ? '' : 'Invalid email'
return !errors.name && !errors.email
}
</script>提交时进行验证
在提交处理程序开始时调用 validate，如果验证失败就立即退出。这样可以确保不会发送无效数据。
<script setup>
function onSubmit() {
if (!validate()) return
// proceed to send
}
</script>失焦时验证单个字段
只在提交时验证可能会让人觉得反应迟缓。使用 @blur，在用户离开某个字段时立即验证该字段。
<script setup>
function validateName() {
errors.name = form.name ? '' : 'Name is required'
}
</script>
<template>
<input v-model="form.name" @blur="validateName" />
</template>显示错误消息
使用 v-if，仅在该字段存在错误时显示消息。请将消息放在输入框附近。
<template>
<input v-model="form.name" @blur="validateName" />
<span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>设置无效字段的样式
使用对象语法绑定一个类，在存在错误时添加红色边框。该类仅在 errors.name 为真值时应用。
<input
v-model="form.name"
:class="{ error: errors.name }"
@blur="validateName"
/>错误样式
一条简短的 CSS 规则就能完善外观——红色边框表示该字段需要处理。
<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>计算有效性
使用 computed 派生一个整体有效性标志，以便响应式地启用或禁用提交按钮。
<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>
<template>
<button :disabled="!isValid">Submit</button>
</template>优势与限制
手动验证过程透明且无需依赖，适合小型表单。但随着规则增加——例如跨字段检查、异步验证和大量字段——重复代码会越来越多，这正是库存在的原因。
验证流程总结
该模式是：使用响应式错误对象和一个 validate 函数，在提交时运行它（也可以选择在失焦时运行），使用 v-if 显示消息，并使用条件类设置样式。
快速检查
测试您对手动验证的了解。
回顾
手动验证模式：
- 保留一个以字段为键的响应式
errors对象。 validate函数设置消息并返回有效性。- 在提交时验证，并使用
@blur对单个字段进行验证，以便快速反馈。 - 使用
v-if="errors.x"显示消息，并使用:class="{ error: errors.x }"设置样式。
常见问题解答
「手动验证模式」课时是免费的吗？
是的 — 「手动验证模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「手动验证模式」这节课中我会学到什么？
响应式错误对象、失焦验证与提交验证，以及密码确认匹配。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「手动验证模式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。