[发明专利]一种表单组件的处理方法、系统、存储介质及电子设备

说明书

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

技术领域

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

背景技术

组件库(BFE UI)是一套基于渐进式JavaScript框架(vue.js)的界面设计(UserInterface Design，UI)组件库，其包含了表单(Form)组件。

开发人员可通过该表单组件对每一项表单项进行开发，最终呈现给用户用以收集、校验、提交数据的页面。

由于开发人员在框架vue.js的每个组件对应的模板(template)区域和即时编译型的编程语言(JS)区域中开发每个表单项，当涉及开发表单的页面和组件较多时，需要开发大量重复的代码，从而造成开发表单组件的效率低，且不易维护。

发明内容

有鉴于此，本申请公开了一种表单组件的处理方法、系统、存储介质及电子设备，旨在减少开发人员重复的开发工作量，降低重复代码量和冗余度，提高开发表单组件的效率、页面的可维护性和复用性。

为了实现上述目的，其公开的技术方案如下：

本申请第一方面公开了一种表单组件的处理方法，所述方法包括：

获取定义后的传入参数；所述传入参数用于表征数据结构为对象数组的数据；

根据预设循环算法和所述定义后的传入参数，动态生成表单的校验规则；所述校验规则用于约束用户输入表单的数值，以使所述用户输入表单的数值符合预设约束条件；

通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染；

将渲染后的表单对应的表单组件注册为全局组件，方便项目中直接调用，无需页面中单独引用组件文件；所述全局组件由多种输入控件组成；所述全局组件为收集数据、校验数据和提交数据的表单组件。

优选的，所述获取定义后的传入参数，包括：

定义数据结构为对象数组的传入数据；所述传入数据至少包括标签名、标识字段名、输入长度、输入框类型、表单类型、下拉框下拉列表取值、表单项禁用标识和表单项必输标识；

获取定义后的传入参数。

优选的，所述通过所述传入参数和所述校验规则对所述表单对应的表单组件进行渲染，包括：

获取所述定义后的传入参数的预设属性取值；所述预设属性取值用于表征表单控件的属性取值；

通过循环渲染方法和所述预设属性取值，对所述表单对应的表单组件进行渲染。

优选的，在将渲染后的表单对应的组件注册为全局表单组件之后，还包括：

通过所述全局组件中的预设模板区域，使用渲染后的表单对应的表单组件的文件。

优选的，还包括：

实时监听所述表单的配置数据，当所述配置数据发生变化时，将发生变化的配置数据同步更新所述校验规则和表单渲染项。

优选的，在所述获取定义后的传入参数之前，还包括：