Form Generator 扩展子表单组件之表单校验(超详细)

最新推荐文章于 2024-03-03 20:22:51 发布
最新推荐文章于 2024-03-03 20:22:51 发布
阅读量1.6k 收藏 5
点赞数 2
分类专栏： form generator扩展组件系列 (超级详细) 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_19991931/article/details/131854583
版权
本文介绍了如何在基于Element UI的form-generator项目中扩展子表单组件，添加必填项校验。通过修改Parser.vue和子表单组件的源代码，实现了对子表单子项的prop和rules属性设置，确保符合ElementUI的校验规则。文章还提供了相关代码示例和演示数据，帮助读者理解并应用到实际项目中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、form-generator是什么？✨ ⭐️ 🌟 

form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。

扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。

其中不包含子表单、表格布局。因为这两个组件涉及到的代码量实在很大，没办法写博文。感兴趣的小伙伴可以看看大概的效果for

了解本专栏 订阅专栏 解锁全文
Form Generator 扩展子表单组件 编程
PixelInk的博客
09-08 515
在现代的Web开发中，表单是一个常见的元素，用于收集用户的输入数据。Form Generator 是一个强大的工具，可以帮助开发人员快速创建表单，并且它还支持扩展子表单组件。扩展子表单组件是一种自定义的表单控件，它可以嵌套在主表单中，用于收集更复杂的数据或提供更丰富的用户交互。接下来，我们需要在主表单中使用这个扩展子表单组件。通过定义和嵌入自定义的扩展子表单组件，我们可以创建更加灵活和强大的表单，以满足具体的业务需求。可以通过访问主表单的数据和扩展子表单组件的数据来获取完整的表单数据。标签来引用这个组件。
Form Generator 扩展子表单组件(超详细)
Etc.End的博客
04-24 4515
的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。扩展主要包含Element UI中的卡片、步骤条、table列表、折叠面板、树形控件以及自定义组件等等10余个组件的详细扩展方法。因为这两个组件涉及到的代码量实在很大，没办法写博文。感兴趣的小伙伴可以看看大概的效果。但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零开始扩展每一个组件。
form-generator扩展原生表格，element-table，子表单等组件
热门推荐
Etc.End的博客
06-10 2万+
的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。但form-generator提供组件并不能满足我们在项目中的使用，比如表格组件，el-table，子表单等等，在很多项目中会经常使用到。
vue form表单父页面对子组件进行校验
我的博客
11-10 6319
在做vue项目时，pc端经常会有这样的需求：在不页面对多个子组件中的form表单字段进行校验。解决这个需求的方法：在每个子组件中写入form表单的校验方法，在父页面对子页面中的校验方法进行调用。 子组件页面 ...
Form Generator 扩展子表单组件之表单校验
2301_79330511的博客
09-08 238
子表单组件是 Form Generator 的一个扩展，它允许将多个相关的表单字段组合在一起形成一个更复杂的表单。在本文中，我们将探讨如何在 Form Generator 扩展子表单组件中实现表单校验的功能。现在，我们将在子表单组件中添加表单校验的功能。在计算属性中，我们可以根据输入的值来检查是否符合预期的规则，并返回相应的校验结果。通过以上的代码，我们成功地在 Form Generator 扩展的子表单组件中实现了表单校验的功能。现在，我们可以在父组件中使用我们的子表单组件，并检查校验结果。
Form Generator扩展 文本 组件
Etc.End的博客
03-10 1278
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。同时欢迎各位小伙伴一起学习，一起成长👉👉WX:SH--TS。
深入浅出form-generator扩展组件
weixin_44815800的博客
09-01 3501
全文6000字带你深入浅出form-generator扩展组件的思路和方法，绝对干货
Form Generator 组件自定义事件以及表单联动
Etc.End的博客
03-17 3571
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁 我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。同时欢迎各位小伙伴一起学习，一起成长WX:SH--TS❤️ 💓 💗 💖 ✨ ⭐️ 🌟 💥
activiti表单设计器_Form-Generator - Element UI 表单设计与代码生成器
weixin_39715290的博客
10-28 4558
Element UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。ElementUI框架简介...
Form Generator扩展 Element Table 表格组件
Etc.End的博客
03-10 2536
Form Generator扩展 Element Table 表格组件。从拖拽到浏览再到解析器。
form-generator:简单表格生成器
05-21
生成器 ＃在终端中的用法-git clone 表单生成器-nodejs server.js >> 将Form构造函数与您的自定义道具一起使用使用一些公共方法获取Form对象。 var yourForm = new Form（yourprops）; #Example：$ .get（'../ json / response.json'，function（data）{var testForm = new Form（data）; $（'body'）。append（testForm.form.get（））; }）; #Methods：公共：yourForm.fields.get（）-返回包含已创建字段的数组。 yourForm.form.get（）-返回整个表单，您可以追加所需的任何内容； ＃典型结构应如下所示： { "method": "POST", "url": "/f
vue-form-generator：Vue.js的基于模式的表单生成器组件
02-06
Vue形式生成器 Vue.js的基于架构的表单生成器组件。 演示版 产品特点 基于模式的React形式 多对象编辑 21种字段类型 内置验证器 核心和完整捆绑包（压缩后分别为41kb和50kb） 自举友好模板 可定制的样式 可以使用自定义字段轻松扩展 ...等等 文献资料 依存关系 vue-form-generator在内部使用和 。 尽管内置字段不需要外部依赖关系，但可选字段可能需要其他库。 这些依赖关系分为两个阵营：jQuery或Vanilla。 您可以在两种风格中找到几乎相同的功能。 最后，您可以选择是否依赖jQuery。 您可以在每个特定组件下的官方找到有关依赖项的详细信息。
基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）
宁波阿成的博客
02-07 1401
基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）
表单生成器 formGenerator
abook24的专栏
03-27 7632
<!--自定义表单--> <link href="/plugins/formGenerator/formGenerator.css" rel="stylesheet"> <script src="/plugins/formGenerator/formGenerator.js"></script> <script src="/plu...
Form Generator扩展 Element Steps 步骤条
Etc.End的博客
03-15 705
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。同时欢迎各位小伙伴一起学习，一起成长WX:👉SH--TS👈。
Form表单自定义校验
weixin_61721830的博客
11-26 408
验证过后上代码 下面是效果： 在rules里面加validator，值为回调函数，参数必须有，callback必须有
表单设计器2 - form-generator源码学习
最新发布
FL06052146的博客
03-03 1924
form-generator是基于vue框架的Element UI表单设计及代码生成器。表单设计器，常用于需要给用户提供表单定制功能的场景中。例如开发一套工作流系统，工作流中涉及到的请假、出差、审批等页面或表单，HR是可以自己定义和调整的。表单不是固定的，是在需要的时候创建出来的。
使用正则校验表单的输入
weixin_30374009的博客
12-20 111
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="...
form-generator表单生成器使用总结~~
qq_29263331的博客
11-14 1万+
表单设计器中开发自定义组件流程 src\components\generator\config.js 中添加一个json src\compontnes\目录下创建对应的组件 main.js中全局注册刚创建的组件 src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值 详细步骤 步骤一： src\components\generator\config.js 中添加一个json export const layoutComponents = [ {
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wait.End

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值