CN114548078A - 提交表单时自动触发数据验证的方法、装置及应用 - Google Patents

Abstract

本申请提出了一种提交表单时自动触发数据验证的方法、装置及应用，包括：获取提交的对应至少一表单的表单数据；通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；若所述验证结果为有效验证，则将所述表单数据提交给服务器。

Description

提交表单时自动触发数据验证的方法、装置及应用

技术领域

本申请涉及数据处理领域，特别是涉及提交表单时自动触发数据验证的方法、装置及应用。

背景技术的

表单在网页中主要负责数据采集功能，表单一般由三个基本部分组成：表单标签、表单域和表单按钮。当前各基于VUE的UI组件库提供的表单在触发提交时都需要手动获取表单的实例信息，再调用其内部的方法进行数据验证，在调用验证方法时就存在大量逻辑雷同的代码，导致验证逻辑复杂冗余；且当一个页面需要同时提交多个表单时，由于每个表单的每个实例信息都需要手工调用进行验证，导致整体表单逻辑复杂度呈指数型提升。

发明内容

本申请实施例提供了一种提交表单时自动触发数据验证的方法、装置及应用，可基于VUE实现提交表单时自动触发对应的数据验证，极大地简化了逻辑代码及人工的操作量。

第一方面，本申请实施例提供了一种提交表单时自动触发数据验证的方法，包括：获取提交的对应至少一表单的表单数据；通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；若所述验证结果为有效验证，则将所述表单数据提交给服务器。

第二方面，本申请实施例提供了一种提交表单时自动触发数据验证的装置，包括：

表单获取模块，用于获取提交的对应至少一表单的表单数据；虚拟节点生成模块，用于通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；验证模块，用于基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；表单提交模块，用于在若所述验证结果为有效验证时将所述表单数据提交给服务器。

第三方面，本申请实施例提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述提交表单时自动触发数据验证方法。

第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括上述的提交表单时自动触发数据验证方法。

本发明的主要贡献和创新点如下：收集页面中一定区域内需要触发数据有效性验证的表单，对表单进行自动的数据验证，解决了表单在使用时每一次都需要手动获取表单实例以及触发表单实例中的数据验证文字的问题，省去了在开发阶段开发人员需要手动获取每一个表单的表单实例,并触发其数据有效性验证方法,减少了大量表单数据有效性验证相关的代码重复和冗余和逻辑错误的可能性,提高了效率。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的提交表单时自动触发数据验证的方法的流程图；

图2是根据本申请实施例的提交表单时自动触发数据验证的装置的结构框图；

图3是根据本申请实施例的电子装置的硬件结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

实施例一

本申请旨在提出一种提交表单时自动触发数据验证的方法，收集页面中一定区域内需要触发数据有效性验证的表单，对表单进行自动的数据验证，解决了表单在使用时每一次都需要手动获取表单实例以及触发表单实例中的数据验证文字的问题，省去了在开发阶段开发人员需要手动获取每一个表单的表单实例, 并触发其数据有效性验证方法,减少了大量表单数据有效性验证相关的代码重复和冗余和逻辑错误的可能性,提高了效率。

本申请实施例提供了一种提交表单时自动触发数据验证的方法，具体地，参考图1，所述方法包括：

获取提交的对应至少一表单的表单数据；通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；

基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；

若所述验证结果为有效验证，则将所述表单数据提交给服务器。

在“获取提交的对应至少一表单的表单数据”步骤中，响应于用户的提交指令以获取所述表单数据，所述表单数据至少包括表单识别信息以及提交信息，基于所述表单识别信息获悉需要被提交的表单，基于所述提交信息获悉对所述表单进行提交的提交命令。

在一些具体实施例中，用户在浏览网页页面时通过点击事件来触发提交指令，此时用户的点击事件对应的内容是：触发表单的表单数据提交给服务器。

用户可一对一选取表单以触发表单提交事件，也可同时在一个页面中选取多个表单同时触发表单提交事件。当需要同时对多个表单进行提交时，至少两表单组成表单组，对所述表单组进行后续触发提交操作。

本方案为了避免重复提交同一表单的情况，本方案对收集至少一表单数据的表单收集器设置触发状态标识。表单或者表单组被收集在表单收集器中以被触发提交。所述触发状态标识可区分为：允许触发提交标识和禁止触发表单提交标识两个状态，当所述触发状态标识为允许触发提交标识时，所述表单收集器内的表单数据可被触发提交；而当所述触发状态标识为禁止触发表单提交标识时，所述表单收集器内的表单数据不可被触发提交。

表单收集器为VUE的内部组件，这样设置的好处在于保证：在上一次表单数据提交未完成时,不允许再次数据提交。值得说明的是：表单数据提交失败或者成功都视为完成，只有表单数据提交中这个状态视为未完成。也就是说：上一组表单数据提交失败或者提交成功，所述表单收集器设置为允许触发提交标识；当上一组表单数据正在提交中，所述表单收集器设置为禁止触发表单提交标识。

在“获取提交的对应至少一表单的表单数据”步骤之后，将收集表单数据的收集器的触发状态标识设置为禁止触发表单提交标识。

在一些特殊场景中需要将表单的表单数据进行处理才可进行数据有效性验证。此时，在“通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中”步骤之前对表单的表单数据进行处理。对应的，包括步骤：对所述表单的表单数据变更处理，其中变更后的表单数据符合数据验证的要求。本方案通过回调方法对表单数据进行变更处理，所有的回调方法都是本方案提供的一个入口, 里面的操作和逻辑由开发时进行编写。

示例性，数据有效性校验要求的是姓+名的长度不超过10，而表单数据中的姓和名是分开的，此时就需要通过数据处理回调方法将“姓”和“名”两个数据进行合并得到统一的姓名。

在“通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中”步骤中，本方案利用vue的插槽功能来实现表单数据的收集，所述虚拟节点树呈现梳树状结构，本方案通过插槽遍历表单，将表单的表单数据对应填到对应的虚拟节点上。

在“遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点”步骤中，遍历所述虚拟节点树获取到虚拟节点属性值为form的虚拟节点。这些虚拟节点对应表单的表单数据。此时，属性值为form的虚拟节点为表单的虚拟dom 节点。

在本方案中，所述虚拟节点根据类型不同被区分为包括但不限于：注释节点、文本节点、元素节点、组件节点、函数式节点以及克隆节点，所述表单的表单数据根据数据类型被自动回填至对应的虚拟节点内。

在“基于所述虚拟节点的节点属性获取对应的数据有效性验证方法”，对应每种类型的虚拟节点配置验证标识，获取虚拟节点的验证标识，调取对应所述验证标识的数据有效性验证方法。数据有效性验证方法可为人为配置，包括但不限于必填项、数据长度、数据类型、正则规则、邮箱、类型复杂度等校验方式。

在本方案中，表单数据作为插值插入虚拟节点树后通过判断虚拟节点的属性值是否为form，自动触发对应这些虚拟节点的数据有效性验证方法。

若需要同时提交多个表单时，对每个所述表单都回填至虚拟节点树中并进行数据有效性验证。这样的方式可避免对应同一类表单数据进行多次验证代码的编写。

在“得到对应所述表单数据的验证结果”中，将每个表单数据的验证结果存储在有效结果组中。遍历所述有效结果组，若存在数据有效性验证失败的情况则判断不符合发送要求，将所述收集器的触发状态标识设置为修改为触发表单提交标识。

当将表单数据发送给服务器后等待服务器返回响应结果，若响应成功只执行成功后的逻辑，若响应失败则执行失败后的逻辑。

实施例二

基于相同的构思，参考图2，本申请还提出了一种提交表单时自动触发数据验证的装置，包括：

表单获取模块301，用于得到对应所述表单数据的验证结果；

虚拟节点生成模块302，用于通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；

验证模块303，用于基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；

表单提交模块304，用于在若所述验证结果为有效验证时将所述表单数据提交给服务器。

实施例三

本实施例还提供了一种电子装置，参考图2，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项提交表单时自动触发数据验证方法实施例中的步骤。

具体地，上述处理器402可以包括中央处理器(CPU)，或者特定集成电路 (ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(HardDiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(Non-Volatile)存储器。在特定实施例中，存储器404包括只读存储器(Read-OnlyMemory，简称为ROM) 和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemory，简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(ElectricallyErasableProgrammableRead- OnlyMemory，简称为EEPROM)、电可改写ROM(ElectricallyAlterableRead- OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(StaticRandom-AccessMemory，简称为SRAM)或动态随机存取存储器 (DynamicRandomAccessMemory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器404(FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器 (ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM)、同步动态随机存取内存(SynchronousDynamicRandom-AccessMemory，简称SDRAM) 等。

存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种提交表单时自动触发数据验证方法。

可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：

S101、获取提交的对应至少一表单的表单数据；

S102、通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；

S103、遍历所述虚拟节点树获取所述表单的表单数据对应的虚拟节点，得到对应所述表单数据的验证结果；

S104、若所述验证结果为有效验证时将所述表单数据提交给服务器。

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、 CD等光学介质上。物理介质是非瞬态介质。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种提交表单时自动触发数据验证的方法，其特征在于，包括：

获取提交的对应至少一表单的表单数据；

通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；

基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；

若所述验证结果为有效验证，则将所述表单数据提交给服务器。

2.根据权利要求1所述的提交表单时自动触发数据验证的方法，其特征在于，在“获取提交的对应至少一表单的表单数据”之后包括步骤：将收集所述表单数据的收集器的触发状态标识设置为禁止触发表单提交标识。

3.根据权利要求1所述的提交表单时自动触发数据验证的方法，其特征在于，在“通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中”之前包括步骤：对所述表单数据变更处理，其中变更后的表单数据符合数据验证的要求。

4.根据权利要求1所述的提交表单时自动触发数据验证的方法，其特征在于，在“遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点”步骤中，遍历所述虚拟节点树获取到所述虚拟节点的节点属性为form的虚拟节点。

5.根据权利要求1所述的提交表单时自动触发数据验证的方法，其特征在于，在“基于所述虚拟节点的节点属性获取对应的数据有效性验证方法”，对应每种类型的虚拟节点配置验证标识，获取虚拟节点的所述验证标识，调取对应所述验证标识的数据有效性验证方法。

6.根据权利要求1所述的提交表单时自动触发数据验证的方法，其特征在于，在“得到对应所述表单数据的验证结果”中，将每个所述表单数据的所述验证结果存储在有效结果组中，遍历所述有效结果组，若存在数据有效性验证失败的情况，将所述收集器的触发状态标识设置为修改为触发表单提交标识。

7.根据权利要求2所述的提交表单时自动触发数据验证的方法，其特征在于，所述触发状态标识可区分为：允许触发提交标识和禁止触发表单提交标识，当所述触发状态标识为允许触发提交标识时，所述收集器内的表单数据可被触发提交；而当所述触发状态标识为禁止触发表单提交标识时，所述收集器内的表单数据不可被触发提交。

8.一种提交表单时自动触发数据验证的装置，其特征在于，包括：

表单获取模块，用于获取提交的对应至少一表单的表单数据息；

虚拟节点生成模块，用于通过vue的插槽将每一所述表单对应填充至所述vue的虚拟节点树中，遍历所述虚拟节点树获取每一所述表单的表单数据对应的虚拟节点；

验证模块，用于基于所述虚拟节点的节点属性获取对应的数据有效性验证方法，得到对应所述表单数据的验证结果；

表单提交模块，用于在若所述验证结果为有效验证时将所述表单数据提交给服务器。

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1到7任一所述的提交表单时自动触发数据验证方法。

10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至7任一项所述的提交表单时自动触发数据验证方法。

Images