一种表单组件的处理方法、系统、存储介质及电子设备技术方案

本申请公开了一种表单组件的处理方法、系统、存储介质及电子设备，可用于大数据领域或金融领域，通过传入参数和动态生成的校验规则对表单对应的表单组件进行渲染，将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件。通过上述方案，当涉及开发表单的页面和组件较多时，无需开发大量重复的代码，只需通过数据驱动配置的方式，即开发人员仅需在编程语言区域配置传入参数，就能生成一个由多种输入控件组成，用以收集、校验、提交数据的表单组件，减少开发人员重复的开发工作量，降低重复代码量和冗余度，提高开发表单组件的效率。此外，不同的页面只需配置不同的传入参数，提高页面的可维护性和复用性。护性和复用性。护性和复用性。

【技术实现步骤摘要】
一种表单组件的处理方法、系统、存储介质及电子设备


[0001]本申请涉及数据处理
，更具体地说，涉及一种表单组件的处理方法、系统、存储介质及电子设备。

技术介绍

[0002]组件库(BFE UI)是一套基于渐进式JavaScript框架(vue.js)的界面设计(User Interface Design，UI)组件库，其包含了表单(Form)组件。
[0003]开发人员可通过该表单组件对每一项表单项进行开发，最终呈现给用户用以收集、校验、提交数据的页面。
[0004]由于开发人员在框架vue.js的每个组件对应的模板(template)区域和即时编译型的编程语言(JS)区域中开发每个表单项，当涉及开发表单的页面和组件较多时，需要开发大量重复的代码，从而造成开发表单组件的效率低，且不易维护。

技术实现思路

[0005]有鉴于此，本申请公开了一种表单组件的处理方法、系统、存储介质及电子设备，旨在减少开发人员重复的开发工作量，降低重复代码量和冗余度，提高开发表单组件的效率、页面的可维护性和复用性。
[0006]为了实现上述目的，其公开的技术方案如下：
[0007]本申请第一方面公开了一种表单组件的处理方法，所述方法包括：
[0008]获取定义后的传入参数；所述传入参数用于表征数据结构为对象数组的数据；
[0009]根据预设循环算法和所述定义后的传入参数，动态生成表单的校验规则；所述校验规则用于约束用户输入表单的数值，以使所述用户输入表单的数值符合预设约束条件；
[0010]通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染；
[0011]将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件；所述全局组件由多种输入控件组成；所述全局组件为收集数据、校验数据和提交数据的表单组件。
[0012]优选的，所述获取定义后的传入参数，包括：
[0013]定义数据结构为对象数组的传入数据；所述传入数据至少包括标签名、标识字段名、输入长度、输入框类型、表单类型、下拉框下拉列表取值、表单项禁用标识和表单项必输标识；
[0014]获取定义后的传入参数。
[0015]优选的，所述通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染，包括：
[0016]获取所述定义后的传入参数的预设属性取值；所述预设属性取值用于表征表单控件的属性取值；
[0017]通过循环渲染方法和所述预设属性取值，对所述表单对应的表单组件进行渲染。
[0018]优选的，在将渲染后的表单对应的组件注册为全局表单组件之后，还包括：
[0019]通过所述全局组件中的预设模板区域，使用渲染后的表单对应的表单组件的文件。
[0020]优选的，还包括：
[0021]实时监听所述表单的配置数据，当所述配置数据发生变化时，将发生变化的配置数据同步更新所述校验规则和表单渲染项。
[0022]优选的，在所述获取定义后的传入参数之前，还包括：
[0023]安装环境变量；
[0024]通过所述环境变量及组件库进行本地项目的初始化操作。
[0025]本申请第二方面公开了一种表单组件的处理系统，所述系统包括：
[0026]获取单元，用于获取定义后的传入参数；所述传入参数用于表征数据结构为对象数组的数据；
[0027]生成单元，用于根据预设循环算法和所述定义后的传入参数，动态生成表单的校验规则；所述校验规则用于约束用户输入表单的数值，以使所述用户输入表单的数值符合预设约束条件；
[0028]渲染单元，用于通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染；
[0029]注册单元，用于将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件；所述全局组件由多种输入控件组成；所述全局组件为收集数据、校验数据和提交数据的表单组件。
[0030]优选的，所述获取单元，包括：
[0031]定义模块，用于定义数据结构为对象数组的传入数据；所述传入数据至少包括标签名、标识字段名、输入长度、输入框类型、表单类型、下拉框下拉列表取值、表单项禁用标识和表单项必输标识；
[0032]第一获取模块，用于获取定义后的传入参数。
[0033]本申请第三方面公开了一种存储介质，所述存储介质包括存储的指令，其中，在所述指令运行时控制所述存储介质所在的设备执行如第一方面任意一项所述的表单组件的处理方法。
[0034]本申请第四方面公开了一种电子设备，包括存储器，以及一个或者一个以上的指令，其中一个或者一个以上指令存储于存储器中，且经配置以由一个或者一个以上处理器执行如第一方面任意一项所述的表单组件的处理方法。
[0035]经由上述技术方案可知，本申请公开了一种表单组件的处理方法、系统、存储介质及电子设备，获取定义后的传入参数；所述传入参数用于表征数据结构为对象数组的数据，根据预设循环算法和定义后的传入参数，动态生成表单的校验规则，校验规则用于约束用户输入表单的数值，以使用户输入表单的数值符合预设约束条件，通过传入参数和校验规则对表单对应的表单组件进行渲染，将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件，全局组件由多种输入控件组成，全局组件为收集数据、校验数据和提交数据的表单组件。通过上述方案，当涉及开发表单的页面和组件较多时，无需开发大量重复的代码，只需通过数据驱动配置的方式，即开发人员仅需在
编程语言区域配置传入参数，就能生成一个由多种输入控件组成，用以收集、校验、提交数据的表单组件，减少开发人员重复的开发工作量，降低重复代码量和冗余度，提高开发表单组件的效率。此外，不同的页面只需配置不同的传入参数，提高页面的可维护性和复用性。
附图说明
[0036]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0037]图1为本申请实施例公开的一种表单组件的处理方法的流程示意图；
[0038]图2为本申请实施例公开的表单页面示意图；
[0039]图3为本申请实施例公开的一种表单组件的处理系统的结构示意图；
[0040]图4为本申请实施例公开的一种电子设备的结构示意图。
具体实施方式
[0041]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0042]在本申请中本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表单组件的处理方法，其特征在于，所述方法包括：获取定义后的传入参数；所述传入参数用于表征数据结构为对象数组的数据；根据预设循环算法和所述定义后的传入参数，动态生成表单的校验规则；所述校验规则用于约束用户输入表单的数值，以使所述用户输入表单的数值符合预设约束条件；通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染；将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件；所述全局组件由多种输入控件组成；所述全局组件为收集数据、校验数据和提交数据的表单组件。2.根据权利要求1所述的方法，其特征在于，所述获取定义后的传入参数，包括：定义数据结构为对象数组的传入数据；所述传入数据至少包括标签名、标识字段名、输入长度、输入框类型、表单类型、下拉框下拉列表取值、表单项禁用标识和表单项必输标识；获取定义后的传入参数。3.根据权利要求2所述的方法，其特征在于，所述通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染，包括：获取所述定义后的传入参数的预设属性取值；所述预设属性取值用于表征表单控件的属性取值；通过循环渲染方法和所述预设属性取值，对所述表单对应的表单组件进行渲染。4.根据权利要求3所述的方法，其特征在于，在将渲染后的表单对应的组件注册为全局表单组件之后，还包括：通过所述全局组件中的预设模板区域，使用渲染后的表单对应的表单组件的文件。5.根据权利要求1所述的方法，其特征在于，还包括：实时监听所述表单的配置数据，当所述配置数据发生变化时，将发生变化的配置数据同步更新所述校验规则和表单渲染项。6....

【专利技术属性】
技术研发人员：马正华，
申请(专利权)人：中国银行股份有限公司，
类型：发明
国别省市：