本文介绍在 vue 3 + formkit 项目中，如何为大型表单同时支持「完整提交（含 required 校验）」和「暂存草稿（跳过 required 校验）」两种行为，核心在于分离原生表单提交与自定义数据提交逻辑。
本文介绍在 vue 3 + formkit 项目中，如何为大型表单同时支持「完整提交（含 required 校验）」和「暂存草稿（跳过 required 校验）」两种行为，核心在于分离原生表单提交与自定义数据提交逻辑。
在使用 FormKit 构建复杂表单时，一个常见需求是：既需要严格校验（如 required、email 等）以确保最终提交数据的完整性，又需支持用户中途「暂存草稿」——此时不应触发必填字段校验，仅将当前已填写的字段值（无论是否完整）安全保存至后端或本地缓存。
FormKit 默认的
✅ 正确实现方式
- 禁用 FormKit 自带的提交动作：设置 :actions="false"，避免内置按钮干扰布局与逻辑；
- 使用 type="button" 替代 type="submit"：防止点击时触发表单原生提交及关联校验；
- 通过 v-model 或 ref 获取实时表单数据：推荐使用 v-model 双向绑定的响应式对象（如 form），它始终反映用户当前输入状态，不受校验规则影响；
- 手动触发业务提交逻辑：在 @click 中调用 $emit('submit-form', form) 或直接调用 API 保存数据。
以下是完整、可复用的代码示例：
<template><formkit id="myForm" type="form" v-model="form" :actions="false" form>
>
<!-- 表单项（含 required 等校验规则） -->
<formkit name="name" label="姓名" type="text" validation="required|length:2,20"></formkit><formkit name="email" label="邮箱" type="email" validation="required|email"></formkit><formkit name="notes" label="备注（选填）" type="textarea"></formkit><div class="mt-6">
<p class="text-sm text-gray-600">
您可随时点击「暂存草稿」保存当前进度，后续继续填写；确认信息无误后，请点击「提交程序」完成终审。
</p>
</div>
<div class="flex items-center gap-4 mt-4">
<!-- ⚠️ 关键：type="button" —— 不触发校验，不提交表单 -->
<button type="button" class="px-4 py-2 bg-amber-50 text-amber-700 rounded-lg hover:bg-amber-100 transition" form>
暂存草稿
</button>
<div class="flex-1"></div>
<!-- ✅ type="submit" —— 触发 FormKit 全量校验与提交 -->
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
提交程序
</button>
</div>
</formkit></template><script setup>
import { ref } from 'vue'
const form = ref({
name: '',
email: '',
notes: ''
})
</script>
? 注意事项与最佳实践
- 数据一致性保障：v-model 绑定的对象（如 form）始终同步用户输入，即使字段未通过 required 校验，其值仍会被准确捕获，无需额外处理；
- 校验提示保留：暂存操作不影响 FormKit 的实时校验反馈（如红色边框、错误消息），用户仍能清晰识别待完善项；
- 服务端兜底：前端跳过校验仅用于用户体验优化，后端接口仍应按业务规则进行二次校验（例如「正式提交」时校验必填字段，「暂存」时允许部分字段为空）；
- 避免误用 @invalid 或 validate()：不要在暂存逻辑中主动调用 formKitNode.validate()，否则会强制触发校验并可能阻塞流程；
- 可扩展性建议：若需区分「暂存」与「提交」的数据结构（如添加 status: 'draft' | 'submitted' 字段），可在 $emit 前对 form 对象做轻量增强。
通过上述方案，你既能享受 FormKit 强大的声明式验证能力，又能灵活支持多阶段表单交互，兼顾严谨性与用户体验。
