表单组件的操作方法、装置、计算机设备及存储介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种表单组件的操作方法、装置、计算机设备及存储介质。


背景技术：

2.在企业级用户管理系统中，表单是一个随处可见的组件。每当用户在用户管理系统进行输入交互时，表单组件就会被使用到。由于处理表单与处理其他组件不同，需要考虑到表单的状态管理情况、表单的校验逻辑以及表单的提交处理等表单操作。
3.在前端开发过程中，表单处理是一个非常常见的任务。但是，每次编写表单处理逻辑都需要重复编写很多类似的代码，这样会导致代码冗余和可维护性差的问题。同时，当前开发过程需要针对不同业务场景的相同类型的表单处理逻辑重复编写代码，即当前的表单组件的操作代码编写无法适应不同的业务场景，可拓展性和灵活性差。


技术实现要素：

4.本技术实施例的目的在于提出一种表单组件的操作方法、装置、计算机设备及存储介质，以解决当前表单编写代码冗余和灵活性差的问题。
5.为了解决上述技术问题，本技术实施例提供一种表单组件的操作方法，采用了如下的技术方案：
6.获取一一绑定的原始表单操作事件和原始表单处理函数；
7.将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中；其中，钩子函数所属类型与预设表单操作事件类型相关；
8.获取目标表单，其中，目标表单包括目标表单操作事件；
9.从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定。
10.进一步的，获取一一绑定的原始表单操作事件和原始表单处理函数的步骤包括：
11.定义原始表单操作事件的初始状态变量；
12.确定与初始状态变量对应的监听器；
13.获取原始表单操作事件对应的表单处理策略；
14.基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数；
15.将原始表单操作事件与原始表单处理函数进行绑定。
16.进一步的，当原始表单处理函数为表单提交处理函数，初始状态变量包括错误信息和提交状态信息时，基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的步骤包括：
17.获取预设的回调函数；
18.通过监听器获取错误信息的第一变化量和提交状态信息的布尔值；
19.根据第一变化量、布尔值和回调函数，构建表单提交处理函数。
20.进一步的，当原始表单处理函数为表单输入处理函数，初始状态变量包括表单输入信息时，基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的步骤包括：
21.通过监听器获取表单输入信息的第二变化量；
22.根据第二变化量和预设的更新函数式，构建表单输入处理函数。
23.进一步的，当原始表单处理函数为表单校验处理函数时，基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的步骤包括：
24.通过监听器获取新的表单输入信息；
25.获取预设的校验函数；
26.根据校验函数和新的表单输入信息，构建表单校验处理函数。
27.进一步的，在根据校验函数和新的表单输入信息，构建表单校验处理函数之前，还包括：
28.当监听到原始表单操作事件为默认提交事件时，禁止默认提交事件中的默认提交操作。
29.进一步的，从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定的步骤之后，还包括：
30.当监听到用户在目标表单中执行表单提交事件时，获取目标表单输入信息；
31.根据目标钩子函数中的表单校验处理函数，校验目标表单输入信息；
32.根据目标钩子函数中的表单提交处理函数，更新目标表单的目标错误信息和目标提交状态信息；
33.当目标错误信息为空，且目标提交状态信息的布尔值为真时，确定目标表单输入信息通过校验以及目标表单提交成功。
34.为了解决上述技术问题，本技术实施例还提供一种表单组件的操作装置，采用了如下的技术方案：
35.表单获取模块，用于获取一一绑定的原始表单操作事件和原始表单处理函数；
36.函数封装模块，用于将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中；其中，钩子函数所属类型与预设表单操作事件类型相关；
37.表单获取模块，用于获取目标表单，其中，目标表单包括目标表单操作事件；
38.函数调用模块，用于从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定。
39.为了解决上述技术问题，本技术实施例还提供一种计算机设备，其中，计算机设备包括存储器和处理器，存储器中存储有计算机可读指令，处理器执行计算机可读指令时实现如上述的表单组件的操作方法的步骤。
40.为了解决上述技术问题，本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机可读指令，计算机可读指令被处理器执行时实现如上述的表单组件的操作方法的步骤。
41.为了解决上述技术问题，本技术实施例还提供一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的表单组件的操作方法的步骤。
42.为了解决上述技术问题，本技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的表单组件的操作方法的步骤。
43.与现有技术相比，本技术实施例主要有以下有益效果：
44.通过获取一一绑定的原始表单操作事件和原始表单处理函数，将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中，其中，钩子函数所属类型与预设表单操作事件类型相关，获取目标表单的目标表单操作事件，从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定，即通过预先将表单操作事件与表单处理函数进行绑定并封装在钩子函数中，使得在编辑同一表单操作事件时，仅通过调用相同的钩子函数，就可以实现表单组件的操作代码编辑，实现代码复用，解决了代码冗余和可维护性差的问题，同时，不同钩子函数可以适应不同的业务场景，体现其可拓展性和灵活性。
附图说明
45.为了更清楚地说明本技术中的方案，下面将对本技术实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
46.图1是本技术可以应用于其中的示例性系统架构图；
47.图2根据本技术的简化表单操作方法的一个实施例的流程图；
48.图3是图2中步骤s201的一种具体实施方式的流程图；
49.图4是根据本技术的简化表单操作装置的一个实施例的结构示意图；
50.图5是根据本技术的计算机设备的一个实施例的结构示意图。
具体实施方式
51.除非另有定义，本文所使用的所有的技术和科学术语与属于本技术的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本技术；本技术的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本技术的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
52.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
53.为了使本技术领域的人员更好地理解本技术方案，下面将结合附图，对本技术实施例中的技术方案进行清楚、完整地描述。
54.如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
55.用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
56.终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、mp3播放器(moving picture experts group audio layer iii，动态影像专家压缩标准音频层面3)、mp4(moving picture experts group audio layer iv，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
57.服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
58.需要说明的是，本技术实施例所提供的表单组件的操作方法一般由服务器/终端设备执行，相应地，表单组件的操作装置一般设置于服务器/终端设备中。
59.应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
60.继续参考图2，示出了根据本技术的表单组件的操作方法的一个实施例的流程图。所述的表单组件的操作方法，包括以下步骤：
61.步骤s201，获取一一绑定的原始表单操作事件和原始表单处理函数。
62.其中，原始表单操作事件可以包括但不限于表单输入操作事件、表单校验操作事件和表单提交操作事件等，表单输入操作事件指用户在表单的输入框中进行输入信息，表单校验操作事件指基于设定的校验规则对表单的输入信息进行校验，表单提交操作事件是指输入信息提交给后端服务。每一个原始表单操作事件的处理逻辑可以通过设计好的原始表单处理函数来实现，使得当要执行其中一个或多个原始表单操作事件时，仅调用与之对应原始表单处理函数，即可实现表单的输入、校验和提交等操作。其中，原始表单处理函数用于实现表单组件的操作事件是否符合所设定的操作逻辑，例如原始表单处理函数为表单提交处理函数，表单提交处理函数可以用于校验表单提交操作事件的提交状态是否正在提交。步骤s202，将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中；其中，钩子函数所属类型与预设表单操作事件类型相关。
63.在本实施例中，钩子函数(hooks)是用于处理表单的输入、校验和提交的函数，即可以将原始表单操作事件和对应的原始表单处理函数封装在钩子函数中。不同类型的钩子函数表示不同表单类型，即表示不同的原始表单操作事件。
64.在一些实施方式中，可以根据原始表单操作事件所属的预设表单操作事件类型来自定义钩子函数所属类型，基于钩子函数所属类型可以定义钩子行数的命名，例如，定义钩子函数的名称为useform。
65.示例性的，本技术可以采用react(一种用于构建用户界面的、声明式、组件化的javascript库)的钩子函数来编写函数封装成函数组件的方式，即可以通过react中不同类型的钩子函数在函数组件中添加状态和副作用等功能。例如，状态可以是表单的提交状态，提交状态可以是待提交和提交中，副作用是指对表单输入数据的更新，例如输入密码时输入的数据自动变星号。
66.又一示例性的，钩子函数还可以是react中的usestate钩子函数，用于在函数组件
中添加状态，即使用usestate钩子函数可以将状态添加到函数组件中，并提供原始表单处理函数来更新该状态。当状态更新时，react会重新渲染函数组件。
67.另一示例性的，钩子函数还可以是react中的useeffect钩子函数，用于在函数组件中添加副作用。其中，副作用包括对dom(document object model，文档对象模型)进行操作、发起网络请求、订阅事件等操作。使用useeffect钩子函可以在函数组件中添加副作用，并在函数组件渲染后执行。
68.通过将原始表单操作事件的原始表单处理函数封装成一个自定义的钩子函数，使得表单组件的操作代码更加简洁和易于维护。
69.步骤s203，获取目标表单，其中，目标表单包括目标表单操作事件。
70.在本实施例中，目标表单可以是开发人员在电子设备中采用前端框架等创建的表单内容，表单内容包括文本框、下拉列表和复选框等输入元素。
71.需要说明的是，此时的目标表单未对输入元素对应的表单操作事件的逻辑代码进行编写。
72.步骤s204，从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定。
73.基于目标表单中每个输入元素所属的目标表单操作类型，开发人员可以针对该输入元素调用对应的目标钩子函数，通过目标钩子函数中所包括的原始表单处理函数，实现该输入元素对应的原始表单操作事件。
74.通过获取一一绑定的原始表单操作事件和原始表单处理函数，将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中，其中，钩子函数所属类型与预设表单操作事件类型相关，获取目标表单的目标表单操作事件，从钩子函数中调用与目标表单操作事件类型相匹配的目标钩子函数，以使目标钩子函数执行目标表单中的目标表单操作事件，即通过预先将表单操作事件与表单处理函数进行绑定并封装在钩子函数中，使得在编辑同一表单操作事件时，仅通过调用相同的钩子函数，就可以实现表单组件的操作代码编辑，实现代码复用，解决了代码冗余和可维护性差的问题，同时，不同钩子函数可以适应不同的业务场景，体现其可拓展性和灵活性。
75.在本实施例的一些可选的实现方式中，在步骤s201，即获取一一绑定的原始表单操作事件和原始表单处理函数，具体实现包括如下步骤：
76.s2011：定义原始表单操作事件的初始状态变量。
77.具体地，可以使用usestate钩子函数定义初始状态变量。其中，初始状态变量可以包括表单输入信息(即表单数据values)的初始值、错误信息(errors)的初始值和提交状态信息(issubmitting)的初始值，错误信息表示校验错误信息，提交状态信息表示是否正在提交表单的状态。将表单输入信息的初始值和错误信息的初始值设置为空对象，将提交状态信息的初始值设置为否(false)。
78.进一步地，可以使用上述的usestate钩子函数来保存表单输入信息、错误信息和提交状态信息。
79.s2012：确定与初始状态变量对应的监听器。
80.具体地，可以根据初始状态变量的类型来确定对应的监听器，监听器可以是不同类型的钩子函数。例如，监听器可以是useeffect钩子函数，useeffect钩子函数监听错误信
息的变量，并且当错误信息变为空对象且提交状态信息为真(true)时，触发回调函数(callback)。
81.s2013：获取原始表单操作事件对应的表单处理策略。
82.表单处理策略用于定义原始表单操作事件的执行逻辑。例如，表单提交操作事件的表单处理策略是验证表单是否符合提交条件的逻辑策略。
83.s2014：基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数。
84.其中，原始表单处理函数包括但不限于表单提交处理函数、定义表单输入处理函数、定义表单提交处理函数、返回状态和处理函数。
85.示例性的，当原始表单处理函数是表单提交处理函数，监听器是useeffect钩子函数时，useeffect钩子函数监听错误信息的变量，并且当错误信息变为空对象且提交状态信息为真(true)时，触发回调函数(callback)。
86.s2015：将原始表单操作事件与原始表单处理函数进行绑定。
87.通过初始状态变量、监听器和表单处理策略，构建原始表单处理函数，使得通过原始表单处理函数来执行对应的原始表单操作事件的逻辑，这样可以使得编写原始表单操作事件的逻辑代码更加灵活和可扩展，并适应不同的业务场景中。
88.由于每当用户输入进行交互时，表单组件就会被使用到。由于处理表单与处理其他组件不同，需要考虑到以下情况：
89.1)表单的状态管理：表单包含多个输入元素(如文本框、下拉列表、复选框等)，每个元素都有自己的值和验证规则，同时还需要维护表单的整体状态(是否验证通过、是否正在提交等)。
90.2)表单的校验逻辑：表单需要进行校验，根据验证结果更新错误提示信息,以确保收集到的用户数据符合要求。校验逻辑可能涉及到对输入值格式、长度、数值范围等方面的校验判断。
91.3)表单的提交处理：表单需要将用户输入的数据提交给后端服务器进行处理，以完成相应的业务逻辑。表单提交的过程涉及到网络请求、loading状态的显示、错误提示等方面的操作。
92.本技术基于上述表单组件的特点，设计出与原始表单操作事件绑定的原始表单处理函数。
93.在一些可选的实现方式中，当原始表单处理函数为表单提交处理函数，初始状态变量包括错误信息和提交状态信息时，步骤s2014，即基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的实现包括：
94.获取预设的回调函数；
95.通过监听器获取错误信息的第一变化量和提交状态信息的布尔值；
96.根据第一变化量、布尔值和回调函数，构建表单提交处理函数。
97.具体地，钩子函数useform函数包括预设的回调函数(callback)和校验函数(validate)。其中，预设的回调函数是表单提交成功后的回调函数，即回调函数用于在表单通过校验后执行提交操作。校验函数用于校验表单输入信息是否合法。使用监听器useeffect钩子函数监听错误信息的第一变化变量，当错误信息的第一变化变量为空且提交状态信息的布尔值为真时，执行回调函数，以便于表示表单通过校验并提交成功。在本申
请实施例中，可以使用object.keys(errors).length校验函数来判断错误信息的第一变化量是否为空对象，例如当错误信息的长度为0时，说明校验结果为不存在错误信息。
98.在一些可选的实现方式中，当原始表单处理函数为表单输入处理函数，初始状态变量包括表单输入信息时，步骤s2014，即基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的具体实现包括：
99.通过监听器获取表单输入信息的第二变化量；
100.根据第二变化量和预设的更新函数式，构建表单输入处理函数。
101.具体地，监听器handlechange钩子函数用于处理表单输入信息的输入事件，即通过handlechange钩子函数获取表单输入信息的第二变化量，其中，表单输入信息的第二变化量当前表单输入信息，例如当前表单元素的输入值。在本技术实施例中，采用更新函数式更新表单输入信息的第二变化量，即表单输入信息由原来的空对象更新为当前表单输入信息，以避免出现异步更新的问题。其中，更新函数式可以为设定的setvalues函数，以用于更新表单输入信息。
102.进一步地，可以将相同原始表单操作事件的不同表单元素(即输入信息)动态设置相同属性名，例如[event.target.name]，从而实现对不同表单元素的统一处理。
[0103]
在一些可选的实现方式中，当原始表单处理函数为表单校验处理函数时，步骤s2014，即基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数的具体实现包括：
[0104]
通过监听器获取新的表单输入信息；
[0105]
获取预设的校验函数；
[0106]
根据校验函数和新的表单输入信息，构建表单校验处理函数。
[0107]
具体地，通过监听器handlechange钩子函数获新的表单输入信息，根据表单类型的表单输入信息校验规则编辑与新的表单输入信息相符合的下校验函数。例如表单输入信息要求为邮箱时，校验函数为验证邮箱格式的函数；表单输入信息为电话号码时，校验函数为验证数字和数字数量规格的函数，表单输入信息为姓名时，校验函数为验证姓名是否为文字或字母的函数。通过校验函数验证新的表单输入信息，并将校验结果更新到错误信息中，最后将提交状态信息的布尔值设置为真，以表示正在提交表单。
[0108]
在一些可选的实现方式中，在根据校验函数和新的表单输入信息，构建表单校验处理函数之前，还包括：
[0109]
当监听到原始表单操作事件为默认提交事件时，禁止默认提交事件中的默认提交操作。
[0110]
具体地，可以采用钩子函数handlesubmit来处理表单提交事件。可以先使用event.preventdefault()方法来阻止表单默认的提交操作。然后调用校验函数验证表单输入信息，基于验证结果来更新错误信息，最后将提交状态信息设为真。
[0111]
原始表单处理函数还可以是返回状态和处理函数，返回状态和处理函数是将钩子函数handlechange、钩子函数handlesubmit、表单输入信息和错误信息作为对象返回，供外部调用组件使用。
[0112]
通过自定义原始表单处理函数来实现表单操作逻辑、简化表单操作流程、减少重复代码的编写，能够提高表单开发的效率和可维护性。同时，使得react应用中的表单组件
可以更加简洁、易读和易于维护。
[0113]
在本技术实施例中，步骤s2024之后，上述电子设备还可以执行以下步骤：
[0114]
当监听到用户在目标表单中执行表单提交事件时，获取目标表单输入信息；
[0115]
根据目标钩子函数中的表单校验处理函数，校验目标表单输入信息；
[0116]
根据目标钩子函数中的表单提交处理函数，更新目标表单的目标错误信息和目标提交状态信息；
[0117]
当目标错误信息为空，且目标提交状态信息的布尔值为真时，确定目标表单输入信息通过校验以及目标表单提交成功。
[0118]
其中，表单提交事件指用户在目标表单中的目标表单组件中输入目标表单输入信息，并提交目标表单输入信息的事件。根据该目标表单所使用的目标钩子函数，调用与该目标表单组件相关的表单校验处理函数，以用于校验目标表单输入信息是否符合校验规则以及验证目标提交状态信息是否为真，若校验成功则目标错误信息为空对象，说明目标表单输入信息通过校验。当目标提交状态信息的布尔值为真时，说明目标表单输入信息提交成功，使得目标表单的目标表单输入信息的和目标提交状态信息都得到有效的验证。
[0119]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，rom)等非易失性存储介质，或随机存储记忆体(random access memory，ram)等。
[0120]
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
[0121]
进一步参考图4，作为对上述图2所示方法的实现，本技术提供了一种表单组件的操作装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
[0122]
如图4所示，本实施例所述的表单组件的操作装置400包括：表单获取模块401、函数封装模块402、表单获取模块404以及函数调用模块404，其中：
[0123]
表单获取模块401，用于获取一一绑定的原始表单操作事件和原始表单处理函数；
[0124]
函数封装模块402，用于将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中；其中，钩子函数所属类型与预设表单操作事件类型相关；
[0125]
表单获取模块403，用于获取目标表单，其中，目标表单包括目标表单操作事件；
[0126]
函数调用模块404，用于从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定。
[0127]
在本实施例的一些可选的实现方式中，表单获取模块401包括：
[0128]
定义子模块，用于定义原始表单操作事件的初始状态变量；
[0129]
确定子模块，用于确定与初始状态变量对应的监听器；
[0130]
获取子模块，用于获取原始表单操作事件对应的表单处理策略；
[0131]
构建子模块，用于基于初始状态变量、监听器和表单处理策略，构建原始表单处理函数；
[0132]
绑定子模块，用于将原始表单操作事件与原始表单处理函数进行绑定。
[0133]
在本实施例的一些可选的实现方式中，当原始表单处理函数为表单提交处理函数，初始状态变量包括错误信息和提交状态信息时，构建子模块包括：
[0134]
第一获取单元，用于获取预设的回调函数；
[0135]
第二获取单元，用于通过监听器获取错误信息的第一变化量和提交状态信息的布尔值；
[0136]
第一构建单元，用于根据第一变化量、布尔值和回调函数，构建表单提交处理函数。
[0137]
在本实施例的一些可选的实现方式中，当原始表单处理函数为表单输入处理函数，初始状态变量包括表单输入信息时，构建子模块包括：
[0138]
第三获取单元，用于通过监听器获取表单输入信息的第二变化量；
[0139]
第二构建单元，用于根据第二变化量和预设的更新函数式，构建表单输入处理函数。
[0140]
在本实施例的一些可选的实现方式中，当原始表单处理函数为表单校验处理函数时，构建子模块包括：
[0141]
第四获取单元，用于通过监听器获取新的表单输入信息；
[0142]
第五获取单元，用于获取预设的校验函数；
[0143]
第三构建单元，用于根据校验函数和新的表单输入信息，构建表单校验处理函数。
[0144]
在本实施例的一些可选的实现方式中，第三构建单元还包括：
[0145]
禁止提交子单元，用于当监听到原始表单操作事件为默认提交事件时，禁止默认提交事件中的默认提交操作。
[0146]
在本实施例的一些可选的实现方式中，表单组件的操作装置还可以包括：
[0147]
信息获取模块，用于当监听到用户在目标表单中执行表单提交事件时，获取目标表单输入信息；
[0148]
校验模块，用于根据目标钩子函数中的表单校验处理函数，校验目标表单输入信息；
[0149]
更新模块，用于根据目标钩子函数中的表单提交处理函数，更新目标表单的目标错误信息和目标提交状态信息；
[0150]
确定模块，用于当目标错误信息为空，且目标提交状态信息的布尔值为真时，确定目标表单输入信息通过校验以及目标表单提交成功。
[0151]
为解决上述技术问题，本技术实施例还提供计算机设备。具体请参阅图5，图5为本实施例计算机设备基本结构框图。
[0152]
所述计算机设备5包括通过系统总线相互通信连接存储器51、处理器52、网络接口53。需要指出的是，图中仅示出了具有组件51-53的计算机设备5，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算
和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(application specific integrated circuit，asic)、可编程门阵列(field－programmable gate array，fpga)、数字处理器(digital signal processor，dsp)、嵌入式设备等。
[0153]
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
[0154]
所述存储器51至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或d表单组件的操作存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器51可以是所述计算机设备5的内部存储单元，例如该计算机设备5的硬盘或内存。在另一些实施例中，所述存储器51也可以是所述计算机设备5的外部存储设备，例如该计算机设备5上配备的插接式硬盘，智能存储卡(smart media card,smc)，安全数字(secure digital,sd)卡，闪存卡(flash card)等。当然，所述存储器51还可以既包括所述计算机设备5的内部存储单元也包括其外部存储设备。本实施例中，所述存储器51通常用于存储安装于所述计算机设备5的操作系统和各类应用软件，例如表单组件的操作方法的计算机可读指令等。此外，所述存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。
[0155]
所述处理器52在一些实施例中可以是中央处理器(central processing unit，cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制所述计算机设备5的总体操作。本实施例中，所述处理器52用于运行所述存储器51中存储的计算机可读指令或者处理数据，例如运行所述表单组件的操作方法的计算机可读指令。
[0156]
所述网络接口53可包括无线网络接口或有线网络接口，该网络接口53通常用于在所述计算机设备5与其他电子设备之间建立通信连接。
[0157]
本实施例中提供的计算机设备可以执行上述表单组件的操作方法。此处表单组件的操作方法可以是上述各个实施例的表单组件的操作方法。
[0158]
本技术还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的表单组件的操作方法的步骤。
[0159]
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质，所述存储介质可以是非易失性存储介质，也可以是易失性存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本技术各个实施例所述的方法。
[0160]
显然，以上所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例，附图中给出了本技术的较佳实施例，但并不限制本技术的专利范围。本技术可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本技术的公开内容的理解更加透彻全面。尽管参照前述实施例对本技术进行了详细的说明，对于本领域的技术人员来而言，其
依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本技术说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本技术专利保护范围之内。

技术特征：
1.一种表单组件的操作方法，其特征在于，包括下述步骤：获取一一绑定的原始表单操作事件和原始表单处理函数；将所述原始表单操作事件和对应的所述原始表单处理函数封装在同一钩子函数中；其中，所述钩子函数所属类型与预设表单操作事件类型相关；获取目标表单，其中，所述目标表单包括目标表单操作事件；从所述钩子函数中调用与所述目标表单操作事件相匹配的目标钩子函数，以使所述目标钩子函数与所述目标表单操作事件相绑定。2.根据权利要求1所述的表单组件的操作方法，其特征在于，所述获取一一绑定的原始表单操作事件和原始表单处理函数的步骤包括：定义所述原始表单操作事件的初始状态变量；确定与所述初始状态变量对应的监听器；获取所述原始表单操作事件对应的表单处理策略；基于所述初始状态变量、所述监听器和所述表单处理策略，构建所述原始表单处理函数；将所述原始表单操作事件与所述原始表单处理函数进行绑定。3.根据权利要求2所述的表单组件的操作方法，其特征在于，当原始表单处理函数为表单提交处理函数，所述初始状态变量包括错误信息和提交状态信息时，所述基于所述初始状态变量、所述监听器和所述表单处理策略，构建所述原始表单处理函数的步骤包括：获取预设的回调函数；通过所述监听器获取所述错误信息的第一变化量和所述提交状态信息的布尔值；根据所述第一变化量、所述布尔值和所述回调函数，构建所述表单提交处理函数。4.根据权利要求2所述的表单组件的操作方法，其特征在于，当原始表单处理函数为表单输入处理函数，所述初始状态变量包括表单输入信息时，所述基于所述初始状态变量、所述监听器和所述表单处理策略，构建所述原始表单处理函数的步骤包括：通过所述监听器获取所述表单输入信息的第二变化量；根据所述第二变化量和预设的更新函数式，构建所述表单输入处理函数。5.根据权利要求2所述的表单组件的操作方法，其特征在于，当原始表单处理函数为表单校验处理函数时，所述基于所述初始状态变量、所述监听器和所述表单处理策略，构建所述原始表单处理函数的步骤包括：通过所述监听器获取新的表单输入信息；获取预设的校验函数；根据所述校验函数和所述新的表单输入信息，构建所述表单校验处理函数。6.根据权利要求5所述的表单组件的操作方法，其特征在于，在所述根据所述校验函数和所述新的表单输入信息，构建所述表单校验处理函数之前，所述方法还包括：当监听到原始表单操作事件为默认提交事件时，禁止所述默认提交事件中的默认提交操作。7.根据权利要求1-6任意一项所述的表单组件的操作方法，其特征在于，从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定的步骤之后，还包括：
当监听到用户在所述目标表单中执行表单提交事件时，获取目标表单输入信息；根据所述目标钩子函数中的表单校验处理函数，校验所述目标表单输入信息；根据所述目标钩子函数中的表单提交处理函数，更新所述目标表单的目标错误信息和目标提交状态信息；当所述目标错误信息为空，且目标提交状态信息的布尔值为真时，确定所述目标表单输入信息通过校验以及所述目标表单提交成功。8.一种表单组件的操作装置，其特征在于，包括：表单获取模块，用于获取一一绑定的原始表单操作事件和原始表单处理函数；函数封装模块，用于将所述原始表单操作事件和对应的所述原始表单处理函数封装在同一钩子函数中；其中，所述钩子函数所属类型与预设表单操作事件类型相关；表单获取模块，用于获取目标表单，其中，所述目标表单包括目标表单操作事件；函数调用模块，用于从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定。9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的表单组件的操作方法的步骤。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的表单组件的操作方法的步骤。

技术总结
本申请属于计算机技术领域，涉及一种表单组件的操作方法，包括获取一一绑定的原始表单操作事件和原始表单处理函数，将原始表单操作事件和对应的原始表单处理函数封装在同一钩子函数中，其中，钩子函数所属类型与预设表单操作事件类型相关，获取目标表单的目标表单操作事件，从钩子函数中调用与目标表单操作事件相匹配的目标钩子函数，以使目标钩子函数与目标表单操作事件相绑定即通过预先将表单操作事件与表单处理函数进行绑定并封装在钩子函数中，使得在编辑同一表单操作事件时，仅通过调用相同的钩子函数，就可以实现表单组件的操作代码编辑，实现代码复用，同时，不同钩子函数可以适应不同的业务场景，体现其可拓展性和灵活性。活性。活性。


技术研发人员：梁德金 李伟 冯斌
受保护的技术使用者：深圳复临科技有限公司
技术研发日：2023.07.06
技术公布日：2023/10/6