hero

Vue Formulate

使用 Vue 构建表单的最简单方法

开始 →

Jan 21, 2022 With 2.5.3, Vue Formulate is now fully ESM compatible. See the changelog for more details.

Need Vue 3 support? Checkout the Vue Formulate successor FormKit.

😎 开发者的福利

表单无处不在,但对作者来说却很枯燥 —— 好吧,现在不再是了。Vue Formate 为开发人员提供了强大而灵活的 API,使复杂的表单创建变得轻而易举。

☝️ 单一的 input 元素

使用 Vue Formulate,你不需要记住十几个组件的名称—所有表单元素都是用一个组件创建的。非常简单!

💪 成组的表单域

Vue Formulate 提供了现成的可重复的表单域组。轻松创建复杂的 UI,如多人预订表单。

🎯 内置验证器

极度简单的验证器开箱即用,可以处理 95% 的用例。帮助文本、验证规则和验证消息都是简单的 `props`。需要更多吗?你也可以添加自定义验证器。

🔌 插件系统

扩展 Vue Formulate 的功能,或者通过使用插件系统跨项目重用自定义表单、验证规则和验证消息。使你的插件开源与他人共享!

✨ 表单创建器

从 JSON 生成整个表单。Vue Formulate 包含一个模式,允许你使用组、包装器和自定义组件等从 JSON 中渲染出复杂的表单。

🎨 样式控制

使用提供的 class prop,你可以全局或逐个添加自己的样式 class 集合。使用 Tailwind? 没问题. Bootstrap? 想到一块去了. 自己从头来过,是的,支持了

🔍 作用域插槽

需要更多地控制表单的标记吗?Vue Formulate 附带全局插槽支持,以便你可以全局或有选择性地提供自己的标记。

🌐 国际化

感谢 Vue 社区的出色协作,Vue Formulate 支持十多种语言,这些语言可以选择性地导入以保持包的大小。



# 实时代码示例

# 表单验证

Vue Formulate 包含 20 条规则 并支持定义你自己的 规则

# 单个输入框

你可以在这个演示中尝试将 type="radio" 更改为 checkboxselect

# 深度定制的文件表单域

文件域 做得很好,开箱即用。

# 在一个对象中对整个表单进行建模

毫不费力地确保所有字段都已验证,甚至 v-model 字段值都已验证为单个对象。

# 快速实现复杂的可重复字段

添加 分组 and 可重复的 的表单域,不再那么费事。

hero

Vue Formulate

使用 Vue 构建表单的最简单方法

开始 →

MIT Licensed | A product by: