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

权利要求书

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

2.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，在表单创建中，通过选择使用所述表单功能配置项中的若干项实现以下整体功能之一：自动排列布局的表单；数据展示；数据校验；表单数据提交；表单数据获取和处理。

3.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，在表单创建中，通过将表单元素、初始值、校验规则、校验未通过时错误信息显示关联起来，渲染出不同的表单布局页面。

4.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述表单数据提交至后台包括将所述React组件的submitUrl属性值配置为后台的url地址以进行直接提交的方式。

5.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述表单数据提交至后台包括触发回调函数将整体表单数据返回。

6.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述获取表单数据包括将所述React组件的onSubmit属性配置为一个传入函数以使表单数据作为该函数的参数传入。

7.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述校验输入值这一表单功能配置项中包括自动触发校验流程的以下步骤：步骤A1，判断表单元素输入值是否发生变化，如果是，则自动触发校验；步骤A2，将表单元素输入值按照预设表单元素的校验规则进行校验；步骤A3，判断校验是否通过，如果否，则在表单元素上显示校验未通过的错误信息。

8.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述表单创建方法包括以下步骤：步骤B1，创建表单的React组件；步骤B2，预设布局，设置默认每行几个表单元素以及某表单是否独占一行；步骤B3，预设每个表单的校验规则以及初始值，包括设置一个整体对象对应整个表单的初始值或每个表单元素独立的初始值；步骤B4，自动渲染出整体布局表单以及必填标志；步骤B5，当一表单元素的输入值发生改变，则自动触发校验，将该表单输入的值与对应的校验规则进行校验，若校验未通过则显示错误信息；步骤B6，当表单提交时，对所有表单全部的元素与其对应的校验规则进行校验，并在所有未校验通过的表单元素上显示出其错误信息，若全部校验通过则提交到配置的后台地址并触发回调函数将整体表单数据返回。

9.根据权利要求1所述的基于React的具有自动排列布局渲染和校验的表单创建方法，其特征在于，所述校验规则中有个必填的属性单独设置，并自动生成必填标志以及与其配置的表单元素里的默认提示信息匹配的错误提示。