如何使用FormKit构建Vue.Js表单

187adcd9b9c097535b3457fa9941ddce.jpeg

表单是现代网页开发的重要组成部分,创建表单通常是一项耗时且繁琐的任务。这就是FormKit的用武之地;它是一个功能强大的现代表单构建库,旨在帮助开发人员轻松高效地创建表单。

在本文中,我们将探讨使用FormKit的好处,并提供一个逐步指南,教你如何使用这个强大的工具构建表单。请继续阅读,了解FormKit如何帮助您简化表单构建过程,更快地构建更好的表单!

FormKit是什么?

812e017a7443eaf93068f57da65e810b.png

FormKit是一个免费、开源的框架,仅适用于Vue 3(如果你使用的是Vue 2,请查看Vue Formulate),旨在为您提供创建生产就绪表单所需的所有工具。安装FormKit后,您将立即获得许多输入类型、通过可序列化JSON模式生成表单、广泛的验证规则以及创建自定义表单输入和自定义现有输入行为的能力。

FormKit并不过多关注您构建的表单的布局或美学 - 这取决于您自己。但是,它确实附带了一个最小的样式主题,您可以用于快速而简单的工作。如果您想详细了解FormKit的功能,请阅读它们的文档。

项目设置

如果您想跟随本指南进行操作,您需要先进行一些设置工作。

你的第一个任务是使用Vite创建一个Vue项目。首先,在终端中导航到你想要项目存放的位置。接下来,运行以下命令:

npm create vite@latest

create-vite 命令会向您提出几个问题。请按照下方截图中的示例进行回答:

fc219f2f5498effec313504708e32031.png

然后进入项目文件夹并安装必要的依赖项:

cd formkit-demo
npm install

接下来,通过运行 npm run dev 启动开发服务器,然后访问localhost:5173以查看您的应用程序。

现在您已经设置好了Vue项目,是时候安装FormKit和默认主题了。打开另一个终端窗口并运行以下代码:

npm i @formkit/vue @formkit/themes

你最后的设置任务是清理掉你不需要的样板文件。删除 src/assets 文件夹,
src/components/HelloWorld.vue ,和 src/style.css 。此时,你的项目目录应该有以下结构:

a9014ddf9d40b5eac8026b82b2c92954.png

将 src/App.vue 的内容替换为一个空模板和脚本,如下所示:

<script setup></script><template></template>

然后通过将 src/main.js 的内容替换为以下内容,导入样式并在Vue应用程序中注册Formkit

import { createApp } from "vue";
import { plugin, defaultConfig } from "@formkit/vue";
import "@formkit/themes/genesis";
import App from "./App.vue";createApp(App).use(plugin, defaultConfig).mount("#app");

设置完成。

使用FormKit构建表单

为了展示使用FormKit构建表单的简易性,您将使用它创建一个预约请求表单,该表单如下所示:

d4ebdb3c9642fe1831a180995ab97fba.png

让我们从创建表单容器和标题开始。打开 src/App.vue 并将以下代码放入其中:

<template><FormKittype="form"#default="{ value }"form-class="outer-container":config="{validationVisibility: 'dirty',}"><h1>Appointment Request form</h1><h3>Fill out the form below, and we'll be in touch via email</h3></FormKit>
</template><style>
.outer-container {width: 400px;border: 1px solid #e4e4e4;padding: 1.5em;border-radius: 1em;margin: 0 auto 1em auto;
}.input-group {display: flex;gap: 1em;
}h1,
h3 {text-align: center;
}
</style>

FormKit有一个独特的功能:所有的表单输入都是使用 <FormKit> 组件创建的。您传递给 <FormKit> 组件的props决定了渲染哪个输入,以及标签和样式等内容。让我们更仔细地看一下 <FormKit> 组件。以下是代码:

<FormKittype="form"#default="{ value }"form-class="outer-container":config="{validationVisibility: 'dirty',}"
>

这段代码使用 type 属性来指定组件应该是一个 form 输入框。form-class 属性指定要应用于渲染的输入框的类。validationVisibility: 'dirty' 属性的 config 属性指定当输入值不符合验证规则时,表单输入的任何验证错误都应该立即显示出来。default 插槽非常重要,因为我们稍后可以使用表单输入的值来编写逻辑。

接下来,您将要创建一些表单输入。请在模板中的 <h3> 标签后添加以下代码:

<div class="input-group"><FormKittype="text"label="First name"placeholder="John"validation="required|length:3"></FormKit><FormKittype="text"label="Last name"placeholder="Doe"validation="required|length:3"></FormKit>
</div><FormKittype="date"label="Date of Birth"validation="required|date_before:2023-01-01"
></FormKit><div class="input-group"><FormKittype="text"label="Gender"placeholder="Your gender"validation="required"></FormKit><FormKittype="text"label="Phone number"suffix-icon="telephone"placeholder="555-5555-555"validation="required"></FormKit>
</div>

这段代码介绍了如何使用FormKit来生成具有 text 和 date 输入的 type 属性。它还展示了验证和图标的工作原理。

当您安装FormKit时,您还会安装一套免费的、MIT许可的图标。您可以通过在输入字段的 prefix-icon 和 suffix-icon 属性中指定图标的名称来在您的表单中使用这些图标。

要对输入应用验证,您需要将一组验证规则(用竖杠“|”分隔)提供给验证属性,并通过冒号(“:”)为每个验证规则提供参数。

添加此代码后,您的表单应该是这样的:

fd4fee42a5a477ebb4c8f3ae54438702.png

当您填写每个字段时,一旦输入违反验证规则,您将看到显示错误。当您尝试提交表单时,所有剩余的错误都将显示,无论输入值是否已被修改。

接下来,您将编写类似的代码来创建地址和电子邮件地址字段。将以下代码添加到您的模板中:

<FormKittype="text"label="Address"placeholder="21st Random Street"validation="required"
></FormKit><FormKittype="email"label="Email address"placeholder="JohnDoe@gmail.com"suffix-icon="email"validation="required|email"
></FormKit>

新字段将显示如下:

1b3d1747d17e3799053dc52002a7cb0a.png

为了你的下一个技巧,你将要构建一些新的东西:一个有条件渲染的输入框。如果用户在询问是否有首选医生的单选按钮上选择了“是”,我们希望出现一个文本输入框,询问你想要选择哪位医生。

将以下代码添加到您的模板末尾:

<FormKittype="radio"label="Do you have a doctor you would prefer to attend to you?"name="preferred":options="['Yes', 'No']"validation="required"
></FormKit><FormKitv-if="value.preferred === 'Yes'"type="text"label="What's the name of this doctor?"validation="required"
></FormKit>

这段代码使用默认插槽的 value 对象来访问每个输入字段的值。因此,在后续的输入中,你只需要使用v-if来根据值对象隐藏输入,直到单选按钮的值为“是”。

只剩下一个 select 和一个 date-time 输入框来完成您的表单。像这样添加它们:

<FormKittype="select"label="Which procedure do you want done?":options="['Check up', 'Result analysis', 'Medical exam']"placeholder="Select a procedure"validation="required"
></FormKit><FormKittype="datetime-local"label="Preferred appointment date and time"validation="required"
></FormKit>

你已经填写完整了!

a70c7a9be190de3e03a80f9517582a38.png

结束

总之,FormKit为现代Web开发提供了一个强大而灵活的构建表单的解决方案。该库使开发人员能够轻松创建复杂的表单,并具有许多功能和工具来简化表单构建过程。

由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115299.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

管理类联考——逻辑——汇总篇——知识点突破——形式逻辑——联言选言——定义

角度——本质定义 联言 联言命题是断定两种或两种以上事物情况同时存在的命题&#xff0c;用“A并且B”表示&#xff0c;逻辑符号为A ∧ B。 若“A ∧ B”为真&#xff0c;表明A是真的&#xff0c;同时B也是真的。 【定义】联言命题是表示若干判断同时成立的命题。 【刻画】…

字符和字符串的库函数模拟与实现

前言&#xff1a; 相信大家平常在写代码的时候&#xff0c;用代码解决实际问题时苦于某种功能的实现&#xff0c;而望而止步&#xff0c;这个时候库函数的好处就体现出来了&#xff0c;当然个人代码编写能力强的可以自己创建一个函数&#xff0c;不过相当于库函数来说却是浪费了…

MVC、MVP、MVVM的成本角度结合业务,如何考虑选型?一文了解方方面面

大家都知道&#xff0c;使用架构的目的是使程序模块化&#xff0c;做到模块内部的高聚合和模块之间的低耦合&#xff0c;使得程序在开发的过程中&#xff0c;开发人员只需要专注于一点&#xff0c;提高程序开发的效率。那么MVC、MVP、MVVM&#xff0c;该怎么选&#xff1f;在什…

飞桨花滑骨骼点动作识别比赛记 2

基于 PaddleVideo 的花滑骨骼点动作识别 2s-AGCN配置文件节点流配置文件 2s-agcn_ntucs_joint_fsd.yamlMODEL 字段DATASET 字段PIPELINE 和 INFERENCE 字段OPTIMIZER 字段 agcn2s.pygraph输入通道数 骨骼流 Dataset 和 Pipeline配置文件DATASETPIPELINE 源码skeleton.pyskeleto…

【python爬虫】5.爬虫实操(歌词爬取)

文章目录 前言项目&#xff1a;寻找周杰伦分析过程代码实现重新分析过程什么是NetworkNetwork怎么用什么是XHR&#xff1f;XHR怎么请求&#xff1f;json是什么&#xff1f;json数据如何解析&#xff1f;实操&#xff1a;完成代码实现 一个总结一个复习 前言 这关让我们一起来寻…

自动化的驱动力,工控机助您实现智能生产!

“智能工厂建设如火如荼&#xff0c;部分成果已经落地&#xff0c;在大规模资金投入的市场催化下&#xff0c;海尔、海信等制造企业通过智能工厂手段推进生产效率成倍增长的新闻层出不穷。在工业4.0时代&#xff0c;“中国制造2025”战略中&#xff0c;智能工厂构建都是其中不可…

python评分卡模型

信用风险计量模型可以包括跟个人信用评级&#xff0c;企业信用评级和国家信用评级。人信用评级有一系列评级模型组成&#xff0c;常见是A卡&#xff08;申请评分卡&#xff09;、B卡&#xff08;行为模型&#xff09;、C卡&#xff08;催收模型&#xff09;和F卡&#xff08;反…

Kubernetes(K8s 1.28.x)部署---超详细

目录 一、基础环境配置&#xff08;所有主机均要配置&#xff09; 1、配置IP地址和主机名、hosts解析 2、关闭防火墙、禁用SELinux 3、安装常用软件 4、配置时间同步 5、禁用Swap分区 6、修改linux的内核参数 7、配置ipvs功能 二、容器环境操作 1、定制软件源 2、安…

项目-IM

tim-server tim-server启动类实现CommandLineRunner接口&#xff0c;重写run()方法 run()方法开启一个线程&#xff0c;创建zk持久父节点&#xff0c;创建临时顺序子节点&#xff0c;将netty-server信息写入 1.1 用户登录 1.2 gateway向认证授权中心请求token 1.3 从zookee…

完整开发实现公众号主动消息推送,精彩内容即刻到达

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

Java小项目|拼图小游戏|黑马

项目技术需求 Java基础 基本if、forio流File集合JFrame【看得懂就行】 项目素材以及打包exe&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rPazJezTwS9O6e8BoYNIYA?pwd6666 项目运行截图 项目来源 哔哩哔哩-黑马程序员上 哔哩哔哩-黑马程序员下 项目介绍&…

SQLPro Studio for Mac:强大的SQL开发和管理工具

SQLPro Studio for Mac是一款强大的Mac上使用的SQL开发和管理工具&#xff0c;它支持各种数据库&#xff0c;包括MySQL&#xff0c;PostgreSQL&#xff0c;SQLite等。使用 SQLPro Studio&#xff0c;您可以轻松地连接和管理您的数据库&#xff0c;执行SQL查询和脚本&#xff0c…

机器学习——KNN回归

1、前提知识&#xff1a; 回归&#xff1a;可以理解为拟合&#xff0c;就是根据训练数据的趋势&#xff0c;对输入数据进行预测。KNN回归&#xff1a;是一种有监督学习&#xff0c;因为需要提供目标数据&#xff08;target&#xff09; 2、案例&#xff1a; 用KNN回归拟合sin…

如何让ESP8266恢复出厂设置

1&#xff0c;安装python&#xff0c;2.7或者更高版本 2&#xff0c;运行&#xff1a;get-pip.py 3&#xff0c;运行&#xff1a;pip install esptool 4&#xff0c;运行的指令&#xff1a;esptool.exe --port COM3 erase_flash&#xff0c; 如果报错 就改成这样的命令试试&am…

【业务功能篇90】微服务-springcloud-检索服务-ElasticSearch实战运用-DSL语句

商城检索服务 1.检索页面的搭建 商品检索页面我们放在search服务中处理&#xff0c;首页我们需要在mall-search服务中支持Thymeleaf。添加对应的依赖 <!-- 添加Thymeleaf的依赖 --><dependency><groupId>org.springframework.boot</groupId><artifa…

QSqlDatabase(2)实例,QTableView显示数据库表数据

目录 前言 1、实现的功能 2、具体的代码实现 前言 想了解QSqlDatabase基本知识的&#xff0c;以及增删改查的用法&#xff0c;可以浏览上一篇文章&#xff1a; QSqlDatabase&#xff08;1&#xff09;基本接口&#xff0c;以及(增删改除)的简单实例_Ivy_belief的博客-CSDN…

从钉钉到金蝶云星空通过接口配置打通数据

从钉钉到金蝶云星空通过接口配置打通数据 对接系统钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能…

Java String类(1)

String类的重要性 我们之前在C语言中已经涉及到字符串了&#xff0c;但是在C语言中要表示字符串只能使用字符数组或者字符指针&#xff0c;可以使用标准库提供的字符串系列函数完成大部分操作&#xff0c;但是这种将数据和操作数据的方法分离开的方式不符合面向对象的思想&…

MySQL----索引

一、索引的概念 索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于c语言的链表通过指针指向数据记录的内存地址&#xff09;。使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先通过索引表找到该…

06.DenseCap

目录 前言泛读摘要IntroductionRelated Work小结 精读模型模型构架全卷积定位层卷积锚点边界回归边界采样双线性插值 识别网络RNN 损失函数训练与优化 实验数据集&#xff0c;预处理DenseCap评价标准基线区域和图像级统计之间的差异RPN vs EdgeBoxesQualitative results 区域ca…