CN105426183A - 一种表单验证方法 - Google Patents

Abstract

本发明公开了一种表单验证方法，涉及表单验证技术领域。该方法通过简单配置即实现了对各种表单项进行验证、收集数据、并通过异步请求把数据发送到服务器端的整个过程，简化了开发及测试工作量，保持了代码规范化和一致性，降低了出错机率，提高了开发效率及代码可靠性，从而降低了团队维护成本。

Description

一种表单验证方法

技术领域

本发明涉及表单验证技术领域，尤其涉及一种表单验证方法。

背景技术

目前，对于表单数据，一般需要技术人员根据需求对所有表单项进行验证，然后收集数据，包装数据，再发送请求把数据提交到服务端收集保存。

采用上述方法对表单数据进行验证，具有以下缺点：工作内容重复性高，针对不同的数据收集业务每次都需要单独开发验证方法，包括表单验证，收集数据，包装数据，发送请求把数据提交到服务器端收集保存，不仅开发任务量大，而且容易出错，需要花费大量时间测试代码正确性，及其它BUG；另外，由于习惯的特点，不同的开发人员编写的代码风格规范也有较大的差异，从而增加了团队维护成本。

发明内容

本发明的目的在于提供一种表单验证方法，从而解决现有技术中存在的前述问题。

为了实现上述目的，本发明采用的技术方案如下：

一种表单验证方法，包括如下步骤：

S1，检索页面上所有名称属性为自定义表单的原始表单；

S2，根据所述原始表单创建对应的自定义表单对像；

S3，根据所述原始表单的每个表单项元素，封装成对应的所述自定义表单对像的自定义子元素；

S4，将所有封装好的所述自定义表单的自定义子元素存放到所述自定义表单对像的子元素数组列表里，组合成所述自定义表单对像；

S5，监听所述原始表单的提交事件，当所述原始表单发生提交事件时，调用所述自定义表单对像的提交方法。

优选地，S2中，所述自定义表单对像的数据结构包括：自定义子元素、提交事件、验证通过事件、提交成功事件和提交方法。

优选地，S2和S3之间还包括步骤，遍历所述原始表单中的所有子元素，查找表单类元素。

优选地，所述表单类元素包括输入、选择和文本区域。

优选地，S3中，所述封装成对应的所述自定义表单对像的自定义子元素中，如果所述表单类元素带有自定义属性，就把所述自定义属性的值解析为验证器，并附加封装在所述自定义子元素中。

优选地，S4中，所述组合成所述自定义表单对像中，所述自定义表单对像包括自定义表单对像和带有验证器的自定义子元素。

优选地，所述自定义子元素的数据结构包括：表单项名称属性、对应原始表单项和验证器列表。

优选地，所述验证器列表的结构包括：验证器名和错误提示信息。

优选地，S5中，所述调用所述自定义表单对像的提交方法，采用如下方法进行实施：

S501，判断提交事件的属性是否为空，如果是，则进入下一个循环；否则，调用该事件激发所述自定义表单对像的提交事件；

S502，遍历所述自定义子元素，依据所述原始表单的元素获取数据值，再将所述数据值与所述验证器列表进行验证匹配，如果验证失败，则把验证信息加入失败列表，否则，把所述数据值存入数据列表；

S503，判断所述失败列表是否有失败项，如果有失败项，则通过失败信息提示验证失败原因，并停止提交，否则，继续；

S504，通过验证后，判断通过验证事件的属性是否为空，如果为空，则进入下一个循环，否则，调用该事件激发所述自定义表单对像的验证通过事件；

S505，异步请求服务器端，把所述数据列表发送给服务器端；

S506，服务器端返回结果，判断提交成功事件的属性是否为空，如果不为空，则调用该事件激发所述自定义表单对像的提交成功事件，否则，直接提示返回结果。

本发明的有益效果是：本发明实施例提供的表单验证方法，通过简单配置即实现了对各种表单项进行验证、收集数据、并通过异步请求把数据发送到服务器端的整个过程，简化了开发及测试工作量，保持了代码规范化和一致性，降低了出错机率，提高了开发效率及代码可靠性，从而降低了团队维护成本。

附图说明

图1是本发明实施例提供的表单验证方法的流程示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明实施例提供了一种表单验证方法，包括如下步骤：

S1，检索页面上所有名称属性为自定义表单的原始表单；

S2，根据所述原始表单创建对应的自定义表单对像；

S3，根据所述原始表单的每个表单项元素，封装成对应的所述自定义表单对像的自定义子元素；

S4，将所有封装好的所述自定义表单的自定义子元素存放到所述自定义表单对像的子元素数组列表里，组合成所述自定义表单对像；

S5，监听所述原始表单的提交事件，当所述原始表单发生提交事件时，调用所述自定义表单对像的提交方法。

自定义表单需要在原始表单发生提交事件时，阻止原始表单提交，并调用自身提交方法，才能实现对自身子元素进行取值，验证，错误反馈，及把收集的表单值异步发送到服务器的整个过程。

采用上述方法，可以通过自定义表单的简单配置实现对各种表单项进行验证、收集数据、并通过异步请求把数据发送到服务器端的整个过程，简化了开发及测试工作量，保持了代码规范化和一致性，降低了出错机率，提高了开发效率及代码可靠性，从而降低了团队维护成本。

其中，S2中，所述自定义表单对像的数据结构包括：自定义子元素、提交事件、验证通过事件、提交成功事件和提交方法。

自定义子元素通过遍历表单子元素得来，为提交时取值验证使用。

提交事件、验证通过事件、提交成功事件初次设置时为null，用于在开发人员特殊情况下便于扩展使用，例如：在表单验证通过后，需要做某些操作再请求服务器，那么可以通过设置验证通过事件去实现。

在本发明的一个优选实施例中，S2和S3之间还包括步骤，遍历所述原始表单中的所有子元素，查找表单类元素。

表单提交时，需要通过先后顺序，对表单类元素进行取值，验证，最后把表单值发送到服务器端。所以通过遍历原始表单子元素，能够有序的得到所有表单类元素并封装为自定义元素待提交时取值验证。

在本发明的一个优选实施例中，所述表单类元素包括输入、选择和文本区域。

如本领域技术人员可以理解的，本实施例中提供的表单类元素为目前常用的表单元素，因此，可以对应原始表单的操作。

在本发明的一个优选实施例中，S3中，所述封装成对应的所述自定义表单对像的自定义子元素中，如果所述表单类元素带有自定义属性，就把所述自定义属性的值解析为验证器，并附加封装在所述自定义子元素中。

采用上述方法，如果有配置自定义属性(valid)，则代表该表单项是需要作验证处理的，并且通过解析该自定义属性值，得到验证器名及错误提示信息，待提交时做验证及错误反馈操作。

在本发明的一个优选实施例中，S4中，所述组合成所述自定义表单对像中，所述自定义表单对像包括自定义表单对像和带有验证器的自定义子元素。

采用上述自定义表单对像，在表单提交操作时，能够对相应自定义表单子元素进行遍历取值，验证。

在本发明的一个优选实施例中，所述自定义子元素的数据结构包括：表单项名称属性、对应原始表单项和验证器列表。

其中，表单项名称属性在提交时做为数据key传给服务器端。

原始表单项用于在提交时取值、验证。

验证器列表在提交时对该表单值做验证及错误反馈处理。

在本发明的一个优选实施例中，所述验证器列表的结构包括：验证器名和错误提示信息。

采用上述结构的验证器列表，通过读取验证器名可实现对当前表单值进行相应验证操作，如验证未通过则把配置的错误提示信息加入错误信息列表产生错误信息。从而使得开发人员通过配置即可对表单项进行相应验证及错误反馈工作。

在本发明的一个优选实施例中，S5中，所述调用所述自定义表单对像的提交方法，采用如下方法进行实施：

S501，判断提交事件的属性是否为空，如果是，则进入下一个循环；否则，调用该事件激发所述自定义表单对像的提交事件；

S502，遍历所述自定义子元素，依据所述原始表单的元素获取数据值，再将所述数据值与所述验证器列表进行验证匹配，如果验证失败，则把验证信息加入失败列表，否则，把所述数据值存入数据列表；

S503，判断所述失败列表是否有失败项，如果有失败项，则通过失败信息提示验证失败原因，并停止提交，否则，继续；

S504，通过验证后，判断通过验证事件的属性是否为空，如果为空，则进入下一个循环，否则，调用该事件激发所述自定义表单对像的验证通过事件；

S505，异步请求服务器端，把所述数据列表发送给服务器端；

S506，服务器端返回结果，判断提交成功事件的属性是否为空，如果不为空，则调用该事件激发所述自定义表单对像的提交成功事件，否则，直接提示返回结果。

采用上述方法，可以使开发人员能够选择自定义提交成功后的处理事件，一般情况下根据服务器返回结果对用户进行直接的内容提示，定义的情况下可以在提交成功之后根据服务器返回结果来做某种处理，如：错误提示、页面跳转、关闭弹层、或调用其它接口等。通过自定义事件来增强表单插件灵活及可扩展性。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：本发明实施例提供的表单验证方法，通过简单配置即实现对各种表单项进行验证、收集数据、并通过异步请求把数据发送到服务器端的整个过程，简化了开发及测试工作量，保持了代码规范化和一致性，降低了出错机率，提高了开发效率及代码可靠性，从而降低了团队维护成本。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域人员应该理解的是，上述实施例提供的方法步骤的时序可根据实际情况进行适应性调整，也可根据实际情况并发进行。

上述实施例涉及的方法中的全部或部分步骤可以通过程序来指令相关的硬件来完成，所述的程序可以存储于计算机设备可读取的存储介质中，用于执行上述各实施例方法所述的全部或部分步骤。所述计算机设备，例如：个人计算机、服务器、网络设备、智能移动终端、智能家居设备、穿戴式智能设备、车载智能设备等；所述的存储介质，例如：RAM、ROM、磁碟、磁带、光盘、闪存、U盘、移动硬盘、存储卡、记忆棒、网络服务器存储、网络云存储等。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (9)

1.一种表单验证方法，其特征在于，包括如下步骤：

S1，检索页面上所有名称属性为自定义表单的原始表单；

S2，根据所述原始表单创建对应的自定义表单对像；

S3，根据所述原始表单的每个表单项元素，封装成对应的所述自定义表单对像的自定义子元素；

S4，将所有封装好的所述自定义表单的自定义子元素存放到所述自定义表单对像的子元素数组列表里，组合成所述自定义表单对像；

S5，监听所述原始表单的提交事件，当所述原始表单发生提交事件时，调用所述自定义表单对像的提交方法。

2.根据权利要求1所述的表单验证方法，其特征在于，S2中，所述自定义表单对像的数据结构包括：自定义子元素、提交事件、验证通过事件、提交成功事件和提交方法。

3.根据权利要求1所述的表单验证方法，其特征在于，S2和S3之间还包括步骤，遍历所述原始表单中的所有子元素，查找表单类元素。

4.根据权利要求3所述的表单验证方法，其特征在于，所述表单类元素包括输入、选择和文本区域。

5.根据权利要求3所述的表单验证方法，其特征在于，S3中，所述封装成对应的所述自定义表单对像的自定义子元素中，如果所述表单类元素带有自定义属性，就把所述自定义属性的值解析为验证器，并附加封装在所述自定义子元素中。

6.根据权利要求5所述的表单验证方法，其特征在于，S4中，所述组合成所述自定义表单对像中，所述自定义表单对像包括自定义表单对像和带有验证器的自定义子元素。

7.根据权利要求1所述的表单验证方法，其特征在于，所述自定义子元素的数据结构包括：表单项名称属性、对应原始表单项和验证器列表。

8.根据权利要求7所述的表单验证方法，其特征在于，所述验证器列表的结构包括：验证器名和错误提示信息。

9.根据权利要求7所述的表单验证方法，其特征在于，S5中，所述调用所述自定义表单对像的提交方法，采用如下方法进行实施：

S501，判断提交事件的属性是否为空，如果是，则进入下一个循环；否则，调用该事件激发所述自定义表单对像的提交事件；

S502，遍历所述自定义子元素，依据所述原始表单的元素获取数据值，再将所述数据值与所述验证器列表进行验证匹配，如果验证失败，则把验证信息加入失败列表，否则，把所述数据值存入数据列表；

S503，判断所述失败列表是否有失败项，如果有失败项，则通过失败信息提示验证失败原因，并停止提交，否则，继续；

S504，通过验证后，判断通过验证事件的属性是否为空，如果为空，则进入下一个循环，否则，调用该事件激发所述自定义表单对像的验证通过事件；

S505，异步请求服务器端，把所述数据列表发送给服务器端；

S506，服务器端返回结果，判断提交成功事件的属性是否为空，如果不为空，则调用该事件激发所述自定义表单对像的提交成功事件，否则，直接提示返回结果。