[发明专利]基于React的具有自动排列布局渲染和校验的表单创建方法

说明书

一种基于React的具有自动排列布局渲染和校验的表单创建方法，通过配置布局就能渲染出不同的表单布局页面，将表单元素、初始值、校验规则、校验未通过时错误信息显示关联起来，整体表单数据提交和整体表单数据回调函数返回，通过定义React组件就能创建自定义布局的不同表单，使得不同布局的表单页面能快速生成，大大降低代码的重复读，具有很强的维护性和扩展性。

技术领域

本发明涉及表单技术领域，特别是一种基于React的具有自动排列布局渲染和校验的表单创建方法，通过配置布局就能渲染出不同的表单布局页面，将表单元素、初始值、校验规则、校验未通过时错误信息显示关联起来，整体表单数据提交和整体表单数据回调函数返回，通过定义React组件就能创建自定义布局的不同表单，使得不同布局的表单页面能快速生成，大大降低代码的重复读，具有很强的维护性和扩展性。

背景技术

表单作为一个在网站中大量存在而且形式多样的元素，无论是作为多个搜索条件框的表单，还是作为展示以及提交的表单。里面重复的元素是比较多的。应用目前在生成多个表单页面的时候大都是通过编写一个个独立的表单元素，每个表单页面的布局需要单独编写。此时根据不同业务需求渲染出自动排列布局以及具有校验功能的表单控件显得尤为重要。

当前市面上生成表单页面以及校验功能时，具有以下几点不足：1、目前在生成多个表单页面的时候大都是通过编写一个个独立的表单元素，每个表单页面的布局需要单独编写。这样很多时候，有些差异性很小的表单页面，不得不编写多份代码。哪怕是一样的表单，放在不同的页面布局里面时，也得重新编写表单页面。这样不仅代码冗余，而且不便于维护和扩展。2、目前市面上表单的校验大多都是基于jQuery来实现的，jQuery是基于DOM操作，这样需要针对每个独立的表单元素一一进行数据变化时的校验。而且，基于DOM操作对页面的性能和复用性是比较差的。

本发明人基于对React技术和表单技术的理解，将两者结合起来完成了本发明。本发明是基于React来实现的，因为基于React来自定义一个组件时，可以自定义组件需要传入的参数。在React中，自定义组件就和使用普通的html标签一样，可以在页面中任何地方使用自定义的React组件(即React控件)，只需要将自动布局封装在自定义的React组件内部，使用时只需传入对应的配置即可。这样代码复用性很高，而且更加便于维护和扩展。React是基于数据驱动的，将表单组件作为受控组件，表单数据的改变是React自己控制的，当表单元素的输入值改变时，能够对其进行监听，然后进行数据的进一步处理(转义、校验、显示错误提示信息等)，从而可以将校验规则、错误信息显示独立分开。这样就不需要大量的代码来进行处理，而且页面的性能也得到了优化。这样一种基于React的具有自动排列布局渲染和校验的表单创建方法，使得不同的布局的表单页面能快速生成，而且具有高效的校验以及提交功能，能够大大降低代码的重复读，具有很强的维护性和扩展性。

发明内容

本发明针对现有技术中存在的缺陷或不足，提供一种基于React的具有自动排列布局渲染和校验的表单创建方法，通过配置布局就能渲染出不同的表单布局页面，将表单元素、初始值、校验规则、校验未通过时错误信息显示关联起来，整体表单数据提交和整体表单数据回调函数返回，通过定义React组件就能创建自定义布局的不同表单，使得不同布局的表单页面能快速生成，大大降低代码的重复读，具有很强的维护性和扩展性。

本发明的技术解决方案如下：

基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，包括使用React组件，所述React组件包括以下表单功能配置项：预设整体表单元素的默认布局；预设表单元素独占一行的布局；预设表单元素的整体初始值；预设表单元素的独立初始值；预设表单元素的类型和是否可编辑；预设表单元素的校验规则；校验输入值；表单数据提交至后台；获取表单数据。

在表单创建中，通过选择使用所述表单功能配置项中的若干项实现以下整体功能之一：自动排列布局的表单；数据展示；数据校验；表单数据提交；表单数据获取和处理。