vue3组件库form表单的使用

原创于 2025-04-18 14:59:01 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。

表单组件中常见的表单项有输入框，单选框，多选框，下拉菜单，开关，时间选择器，上传，按钮等......

<el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
</el-form>

表单常用属性：

model:用于绑定表单数据对象，可以使用v-model绑定表单元素。
rules：表单校验规则。
inline:设置是否为行内表单。
disabled:设置表单项是否禁用。

表单常用方法：

validate：用于触发表单验证，如果验证成功，执行回调函数并传递 true，否则传递 false。
resetFields：用于重置表单数据和验证状态。
clearValidate：用于清除表单验证状态。
validateField：用于触发指定表单元素的验证。
submit：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。

表单项常用属性：

prop:model的键值
label：标签文本

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Demon_and_anger

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用Vue动态生成form表单的实例代码

08-27

3. 在安装FormCreate后，需要引入FormCreate的JS和CSS文件，然后在Vue实例中使用FormCreate来生成动态form表单。 4. 在生成form表单时，可以使用rules参数来指定表单生成规则。rules参数是一个数组，包含多个规则...

精选资源

vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件

05-29

Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...

参与评论您还未登录，请先登录后发表或查看评论

vue3-form-wizard:Vue 3 Form Wizard是一个可配置的，完全可自定义的JSON表单生成器，可让开发人员轻松创建基于步骤的表单

05-11

Vue 3表单向导介绍 Vue 3表单向导是一个JSON可配置，完全可自定义的表单生成器，使开发人员可以轻松创建基于步骤的表单。通过指定JSON配置对象，可以轻松生成表单问题。最终结果是基于步骤的表单，它将一次显示一个问题。支持最常见的输入类型：文字输入文字区下拉菜单（可过滤）单选和多选选项列表能够创建自己的自定义输入类型特征完全可定制的风格逐步验证输入自定义验证消息能够查询API以获取列表选项每个问题后的回调目录文献资料目录贡献准则行为守则错误和功能请求版权和许可入门使用节点程序包管理器安装程序包： npm install @anivive/vue3-form-wizard 导入到您的组件中并添加到components键： import VueFormWizard from '@anivive/vue3-form-wizar

Vue3专栏项目 -- 二、自定义Form组件（上）

m0_64931189的博客

05-09

1929

说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。

vue3一个相对完整的form组件

qq_46617584的博客

04-27

2104

【代码】vue3一个相对完整的form组件。

VUE--Form表单

热门推荐

weixin_43989275的博客

04-18

4万+

表单内容 1、写在data内验证：：代表这是一个表单 -> ref：表单被引用时的名称，标识是我们绑定的对象 -> rules：是动态绑定的rules，表单验证规则 -> model：表单数据对象是绑定我们form表单中需要提交给后台的一个对象 -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 -...

vue表单Form

泗水六年的博客

08-15

769

<template> <main-area :title="title" class="fullfill"> <template v-slot:zh_title> 请填写理财签约表单 </template> <el-form label-width="100px" :model="pageData" :rules="rules" .

使用form-create动态生成vue自定义组件和嵌套表单组件

10-17

在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...

精选资源

vue3-form-usage：使用vue3的表单用法

02-07

6. **表单验证**: Vue3可以通过引入第三方库，如Vuelidate或使用自定义的验证逻辑来实现。使用`ref`和`watch`可以轻松实现对表单字段的实时验证。 7. **UseForm Hook**: 如果你希望进一步抽象表单处理，可以创建一...

精选资源

vue3Util:基于vue3 element-plus form表单二次封装

05-05

Element Plus是流行的Vue2和Vue3兼容的UI组件库，其在Vue3中的使用为开发者提供了丰富的组件和优雅的设计风格。在Vue3Util中，你可以期待以下关键知识点： 1. **Vue3 Composition API**：Vue3引入了Composition ...

vue3-form-validation：Vue 3中的DIY表单验证

02-11

vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置请参阅。

vue form表单提交

︶￣城南花已开

11-22

2538

<el-form ref="dialogForm" :visible.sync="dialog.dialogState" :model="dialog.form" :rules="dialog.rules" > <el-col :span="12"> <el-fomr-item label="编码:" prop="imei"> <el-input> ...

【vue】form表单应用

weixin_39266845的博客

07-27

4681

【vue】form表单应用

Vue基础之表单Form(一)

qq_41720578的博客

04-13

1万+

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子: <div id="app"> <input type="text" v-model="message" placeholder="请输入...."> <p>{{message}}</p> </di

【VForm3】扩展自定义表单组件

weixin_43385060的博客

03-28

5565

以下步骤均在extension文件夹中进行，新增完成后，Steps控件在自定义扩展字段中出现。配置属性扩展，extension-schema.js中，根据组件属性进行配置字段组件的类型名称，必须唯一，不能跟已有组件重复；且必须是新建组件的名称，例如组件名为steps-widget.vue，type必须为steps。i18通过type显示容器名称。需要在lang的en-US_extension.js和zh-CN_extension.js的widgetLabel中配置type对应的名称。

vue简单封装form表单

weixin_72915158的博客

08-14

821

在vue2中使用的：使用的是 :visible.sync=“dialogVisible”里面包含了input 、select、普通时间、年、文本域等。在vue3中使用：是使用的v-model="dialogVisible"

Vue 学习随笔系列四 -- form 表单封装

mm_0123456789的博客

04-10

2555

此案例包含 input 输入框， select 选择框等，根据实际需求使用。

Vue业务组件封装（二）Form表单

郊眠寺

06-27

1万+

封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。Form表单包含输入框, 单选框, 下拉选择, 多选框等用户输入的组件。使用表单，可以收集、验证和提交数据。表单常用的地方是在搜索、信息提交、内容编辑以及新增。搜索表单编辑表单这里以最基本的Form代码为例进行分析：基本表单根据基本的Form代码，我们可以知道：通过分析Form代码我们可以通过一个配置文件去遍历得到el-form-item，然后在el-form-item上面绑定我们需要的

Vue ElementPlus Form、Form-item 表单

小楼一夜听春雨，深巷明朝卖杏花

03-31

9808

每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。属性传入约定的验证规则，并将 Form-Item 的。Form 组件提供了表单验证的功能，只需要通过。

vue-mod-form表单组件库

最新发布

08-15

在基于 Vue 的模块化表单组件库中，有以下几个推荐的库，它们在实际开发中被广泛使用，并支持模块化构建，能够满足复杂的表单交互需求。 ### 表单组件库推荐 1. **Vuelidate** - Vuelidate 是一个轻量级的表单验证库，专注于提供基于模型的验证机制，支持 Vue 2 和 Vue 3。 - 它通过响应式数据模型实现验证逻辑，无需依赖 DOM 操作，非常适合模块化开发场景。 - 示例代码： ```javascript import useVuelidate from '@vuelidate/core' import { required, email } from '@vuelidate/validators' export default { setup () { const state = reactive({ form: { email: '', } }) const rules = { email: { required, email } } const v$ = useVuelidate(rules, state.form) return { state, v$ } } } ``` 2. **VeeValidate** - VeeValidate 是一个功能强大的表单验证库，支持字段级别的验证、异步验证、多语言支持等。 - 它提供了与 Vue 模板高度集成的 API，适合需要复杂验证逻辑的项目。 - 示例代码： ```vue <template> <Form @submit="onSubmit"> <Field name="email" type="email" rules="required|email" /> <ErrorMessage name="email" /> <button type="submit">Submit</button> </Form> </template> <script> import { Form, Field, ErrorMessage } from 'vee-validate' export default { components: { Form, Field, ErrorMessage }, methods: { onSubmit(values) { console.log(values) } } } </script> ``` 3. **Element Plus** - Element Plus 是 Element UI 的 Vue 3 版本，提供了一整套 UI 组件，其中包含功能完善的表单组件。 - 它内置了表单验证功能，支持自定义验证规则，适合快速构建企业级管理系统。 - 示例代码： ```vue <template> <el-form :model="form" :rules="rules" label-width="120px"> <el-form-item label="Email" prop="email"> <el-input v-model="form.email" /> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { email: '' }, rules: { email: [ { required: true, message: 'Please input email address', trigger: 'blur' }, { type: 'email', message: 'Please input a valid email', trigger: ['blur', 'change'] } ] } } } } </script> ``` 4. **Vue Formulate** - Vue Formulate 是一个高度模块化的表单构建库，专注于提供可定制的表单字段和验证机制。 - 它支持字段类型扩展、主题定制、多语言支持等功能，适合需要高度定制化的项目。 - 示例代码： ```vue <template> <FormulateForm v-model="formValues"> <FormulateInput type="email" label="Email address" validation="required|email" /> <FormulateInput type="submit" label="Create account" /> </FormulateForm> </template> <script> export default { data() { return { formValues: {} } } } </script> ``` ### 总结 - 如果需要轻量且高效的验证库，推荐使用 **Vuelidate** 或 **VeeValidate**。 - 如果希望快速构建企业级管理系统，推荐使用 **Element Plus**。 - 如果需要高度定制化的表单解决方案，推荐使用 **Vue Formulate**。以上库均支持模块化开发，能够很好地集成到 Vue 项目中[^2]。