预置表单元素
Vueform 包含一组丰富的现成元素，例如文件上传、日期选择器、标签、滑块、电话输入、复选框、列表、对象和多文件上传。主页将这些展示为内置组件，而不是需要从别处获取的附加组件。
Vueform 是什么
Vueform 是适用于 Vue.js 3 的开源表单框架，专注于从标准化 schema 中构建、验证和处理表单。首页将其定位为一个全面的框架，在一个系统中同时负责渲染、验证和数据处理。
它既面向直接构建表单的开发者，也面向构建动态表单工具的团队。网站重点介绍了拖放式构建器、基于 JSON 的表单，以及涵盖安装、条件渲染、步骤、验证、事件、样式和国际化的文档。
核心能力
验证规则与自定义检查
文档描述了 50 多条内置验证规则，并支持自定义规则、异步检查、条件验证以及可监视其他字段值的规则。这让验证更贴近表单 schema，而不是放到独立代码中处理。
数据驱动的条件逻辑
条件渲染可在元素级别和表单步骤级别工作，并支持简单比较、数组、嵌套路径、列表路径、表达式和函数条件。产品还说明，被隐藏的元素会从提交的请求数据中排除。
多步骤表单工作流
Vueform 支持使用 `FormSteps`、`FormStep` 和 `FormStepsControls` 将长表单拆分为多个步骤。文档将这视为一种将较长流程拆分成更小部分、方便用户填写的方法。
JSON schema 存储与渲染
表单、元素、验证规则和步骤都可以存储为 JSON，并从 JSON 重新渲染。主页说明这可用于构建动态表单，甚至构建表单生成器工具。
国际化表单内容
网站强调 i18n 支持，并说明 Vueform 提供 19 种语言版本。它还支持可翻译输入字段，可为多语言内容生成多个输出。
实际使用场景
快速构建功能丰富的表单
当你需要快速组装标准的、输入项较多的表单，并使用文件上传、日期选择器、标签、滑块和电话输入等内置字段，而无需另外寻找组件时，可以使用 Vueform。
创建条件式应用流程
当表单需要根据之前的回答进行分支时，可以使用该框架；它支持嵌套字段、基于列表的条件，以及按步骤级别控制可见性的规则，从而隐藏无关问题并将隐藏数据排除在提交之外。
将长表单拆分为多个步骤
对于更长的注册、引导或调研流程，当向导式布局比单页长表单更易于用户填写时，可以使用 Vueform 将表单拆分为多个步骤。
从数据存储并生成表单
当表单定义需要存储在数据库中、动态生成或复用来驱动自定义表单构建器时，可以使用基于 JSON 的 schema 支持。
本地化表单内容
对于需要以多种语言呈现或收集内容的表单，可以使用多语言字段和 19 种语言支持。
Pros and Cons
Pros
- 将表单渲染、验证和处理整合在一个框架中。
- 提供丰富的内置元素，减少了从不同包中拼装常见输入项的需要。
- 支持条件表单、嵌套数据和多步骤流程，适用于更复杂的工作流。
- 可以将表单定义存储为 JSON，这对数据库驱动的表单和构建器式工具很有用。
- 包含多语言支持和可翻译字段，适用于国际化内容。
Cons
- 定价页面返回 404，因此无法从所提供的来源验证价格和套餐结构。
- 文档主要围绕 Vue.js 3 和基于 Vue 的环境展开，因此并未将其呈现为跨框架表单库。
FAQ
如何安装 Vueform？
是。安装文档说明可以使用 `npm create vueform@latest`、`yarn create vueform`、`pnpm create vueform` 或 `bun create vueform` 添加 Vueform。安装流程可将 Vueform 安装到 Vite、Nuxt、Astro 或 Laravel 环境中。
Vueform 面向哪个框架？
Vueform 专为 Vue.js 3 构建，安装文档将其描述为面向 Vue.js 3 项目的表单构建器。文档也提到了适用于现有 Vue.js 环境的手动安装路径。
Vueform 可以处理哪些类型的表单？
文档涵盖表单渲染、样式与布局、数据处理、验证、条件渲染、事件、表单步骤和 i18n。主页还展示了文本、选择框、复选框、日期、标签、滑块、电话、列表、对象和多文件上传等元素类型。
Vueform 支持条件逻辑吗？
Vueform 通过元素条件支持条件渲染，包括嵌套路径、列表引用、函数条件以及表单步骤上的条件。如果条件不满足，元素会被隐藏，其数据也会从请求数据中排除。
Vueform 支持多语言或基于 JSON 的工作流吗？
来源说明 Vueform 支持 19 种语言的翻译内容，并且表单内容可以存储为 JSON 且从 JSON 渲染。这使它适合多语言表单和基于数据库的表单构建器。
Quick Facts
- 类别
- 开发者工具
- 平台
- Vue.js 3
- 来源域名
- vueform.com
- 主要用途
- 构建、验证和处理表单
- 主要工作流
- JSON 表单、条件渲染、多步骤表单、i18n
- 定价
- 未验证；定价页面返回 404