CN103440198A

CN103440198A - 表单校验方法

Info

Publication number: CN103440198A
Application number: CN201310377506XA
Authority: CN
Inventors: 吴尚智
Original assignee: Nebula Creation (beijing) Information Technology Co Ltd
Current assignee: Chongqing Yunliu Future Technology Co ltd; Kunlun Core Beijing Technology Co ltd
Priority date: 2013-08-27
Filing date: 2013-08-27
Publication date: 2013-12-11
Anticipated expiration: 2033-08-27
Also published as: CN103440198B

Abstract

本发明提供一种表单校验方法，属于互联网应用领域。所述方法包括：检测到页面的文档结构加载完成事件时，获取页面中的所有表单，检测到页面中新加入的表单创建完成事件时，获取页面中新加入的表单；对于获取到的表单，若表单设置了onsubmit属性，则将此onsubmit属性存储到变量中，再新建一个匿名函数，将此匿名函数设置为此表单的onsubmit属性，使得此表单的onsubmit属性被触发时，执行匿名函数定义的方法。本发明能够减少直接针对单个表单或者控件的校验编码。

Description

表单校验方法

技术领域

本发明涉及互联网应用领域，尤其涉及一种表单校验方法。

背景技术

在web开发中，表单校验一直是一件非常繁琐的事情。无论是自己开发校验功能，还是使用开源的校验插件，都需要在程序中针对单个控件或者表单来编写专用的校验代码。在大量使用表单的系统里，开发人员需要花费很多时间和精力来编写和维护这些校验代码，不利于项目编码质量的提高。

在进行表单校验处理的时候，可以选择使用第三方的表单校验插件，但是大多数插件都需要使用其专有方法，通过javascript代码进行校验器的功能配置(包括错误处理和显示的方法，以及提交表单的方法等)。如果遇到插件功能无法满足需求的情况，则需要在更换另一款校验器插件之后，将原有代码进行修改，才能保持原有功能。以知名度非常高的jquery.validator.js插件为例，使用此插件的时候，需要使用validate方法来加载校验器，并配置校验器功能(包括错误显示方式和提交表单的方法)，并且此配置代码中需要包含提交表单的代码。如果仅加载校验器，而不使用插件提供的“提交表单方法”(submitHandler)进行表单提交处理，则原有的提交代码会在校验不通过之后继续运行。另外，此插件仅可以指定一组“默认配置”，任何不同于此默认配置的功能都要为每个表单单独指定。

可见，即使使用了比较成熟的第三方插件，仍然需要进行很多的编码工作，才能对表单数据进行校验。并且，在插件功能无法满足需求的时候，无论是修改插件本身，还是换用其它插件，都会带来非常大的代码改动。

发明内容

有鉴于此，本发明的目的是提供一种表单校验方法。

为实现上述目的，本发明提供技术方案如下：

一种表单校验方法，包括：

检测到页面的文档结构加载完成事件时，获取页面中的所有表单，检测到页面中新加入的表单创建完成事件时，获取页面中新加入的表单；

对于获取到的表单，若表单设置了onsubmit属性，则将此onsubmit属性存储到变量中，再新建一个匿名函数，将此匿名函数设置为此表单的onsubmit属性，使得此表单的onsubmit属性被触发时，执行匿名函数定义的方法；

其中，所述匿名函数定义的方法为：

对表单进行验证；

当表单验证正确时，从变量中取出表单的原onsubmit属性，执行原onsubmit属性定义的方法；

当表单验证错误时，显示表单验证错误信息。

上述的表单校验方法，其中，还包括：

对于获取到的表单，若表单未设置onsubmit属性，则使用bind方法为表单绑定一个自定义的submit事件处理方法，使得表单的submit事件被触发时，在表单的原submit事件执行之前，先执行所述自定义的submit事件处理方法；

其中，所述自定义的submit事件处理方法的执行过程为：

对表单进行验证；

当表单验证正确时，继续执行表单的原submit事件；

当表单验证错误时，显示表单验证错误信息，并停止当前的submit事件的冒泡。

上述的表单校验方法，其中，还包括：

在页面的html结构中，使用表单标签的自定义属性来指定此表单使用的校验配置信息；

所述对表单进行验证为：根据表单的校验配置信息对所述表单进行校验。

上述的表单校验方法，其中，所述校验配置信息包括：

错误显示方式和/或提交表单的方法。

与现有技术相比，本发明能够减少直接针对单个表单或者控件的校验编码。

附图说明

图1是根据本发明一个实施例的表单校验方法流程图；

图2是本发明的表单校验方法的一个应用实例的执行过程示意图；

图3是现有的一种表单校验方法的的执行过程示意图。

具体实施方式

以下结合附图对本发明实施例进行详细描述。

参照图1，本发明实施例的表单校验方法可以包括如下步骤：

步骤101，当检测到页面的文档结构加载完成(DOM Ready)事件时，获取页面中的所有表单，当检测到页面中新加入的表单创建完成(creationComplete)事件时，获取页面中新加入的表单；

步骤102，对于获取到的表单，若表单设置了onsubmit属性，则将此onsubmit属性存储到变量中，再新建一个匿名函数，将此匿名函数设置为此表单的onsubmit属性，使得此表单的onsubmit属性被触发时，执行匿名函数定义的方法；

其中，所述匿名函数定义的方法为：

对表单进行验证；

当表单验证错误时，显示表单验证错误信息。

步骤103，对于获取到的表单，若表单未设置onsubmit属性，则使用bind方法为表单绑定一个自定义的submit事件处理方法，使得表单的submit事件被触发时，在表单的原submit事件执行之前，先执行所述自定义的submit事件处理方法。

其中，所述自定义的submit事件处理方法的执行过程为：

对表单进行验证；

当表单验证正确时，继续执行表单的原submit事件；

对于步骤102和步骤103的执行顺序，本发明不做限制。

可选地，在本发明实施例中，还可以在页面的html结构中，使用表单标签的自定义属性来指定此表单使用的校验配置信息，此时，所述对表单进行验证为：根据表单的校验配置信息对所述表单进行校验。其中，所述校验配置信息包括：错误显示方式和／或提交表单的方法。

本发明实施例的上述方法的全部或部分功能可以通过插件方式来实现，以下称该插件为自动表单校验插件。自动表单校验插件可以基于jquery编写，使用本插件进行表单数据校验的页面，可以在页面html文件的head里引用jquery文件和自动表单校验插件的javascript文件。通过在页面的html文件中引入所述自动表单校验插件，并使用表单控件的class属性来定义校验规则，即可完成表单的数据校验功能。

其中，如何使用表单控件的class属性来定义校验规则与现有技术相同，在此不做赘述。进一步，本发明还实现了插件的自动加载，使得页面上的表单获得校验数据的功能，具体地，在不使用js生成页面结构的页面中，可以使用DOM Readv事件来自动加载；使用js生成页面结构的页面则可以使用creationComplete事件来实现自动加载。另外，在该自动表单校验插件中，还可使用配置功能定义多组表单提交方式和错误显示方式的配置，以适应不同的需求。可见，通过html结构配置校验规则和插件自动加载，即可在基本不修改原有代码的前提下，使表单获得校验数据的功能。

在本发明实施例中，通过引入自动表单校验插件，DOM Readv触发的时候，查找页面所有表单，并根据表单原有的提交方式，进行如下处理：

若表单设置了onsubmit函数，则先将此onsubmit函数存为变量，再新建一个匿名函数，然后，将此匿名函数设置为此表单的onsubmit函数。执行该匿名函数时，执行的是自动表单验证插件提供的数据验证方法，通过验证之后(表单验证正确)，再执行原来的onsubmit函数，没有通过验证时(表单验证错误)，不执行原来的onsubmit函数，即阻止原有的表单提交程序的运行。

若表单没有设置onsubmit函数，则此表单可能使用的是绑定(bind方法)或者委托(on／delegate方法)的方式来进行异步(ajax)提交，或者直接使用post或者get方法提交到action指定的url。此种情况下，使用bind方法另外绑定一个submit事件处理(由于在页面html文件的head里引用了插件的javascript文件，并且插件引用通常会紧接jquery库文件的引用；根据文件引用顺序的关系，此事件处理会优先被运行)，在表单的submit事件被触发的时候，先执行自动表单验证插件提供的数据验证方法，如果没有通过验证，则停止此submit事件的冒泡，表单的提交动作将被终止；如果通过了验证，则原先的提交程序会照常执行。

可选地，当creationComplete事件被触发时，对于新加入页面的表单，也可以执行上述同样的处理(前两段的内容)。

另外，在所述自动表单验证插件中，还可以使用“配置库”对象来定义多组不同的“错误处理／表单提交”方式，以适应不同的需求；通过为一个表单指定一个配置的名称，来将此配置应用到此表单中。

具体地，可以在全局对象(本发明使用$.validator)中新建一个“配置库”对象，用于存放所有的配置(本发明使用$.validator.defaultSettings)；每个配置都是这个对象下的一个key／value数据，其中key是使用字符串定义的配置名称，value是使用对象定义的配置的内容，可以对本发明支持的任意选项进行配置；没有配置的功能则可以使用默认值。

在html结构中，如有需要，针对一个form标签，使用自定义属性(attribute)来指定此表单使用的“配置”的名称。本发明实施例使用的属性名为“validatorSettingName”

如此，通过插件的自动加载，以及使用html自定义属性(attribute)来对功能进行定义，即可为表单增加可以适应绝大多数需求的数据校验功能，而不需要编写额外的javascript代码，也不需要对原有代码进行改动。

图2是本发明的表单校验方法的一个应用实例的执行过程示意图；图3是现有的一种表单校验方法的的执行过程示意图。通过图2和图3的对比，可以对本发明实施例的有益效果有进一步的认识。

综上所述，本发明实施例使用html标签的自定义属性来配置校验功能，并且可以进行自动加载，无需编写额外的iavascript代码，也不会对原有代码逻辑产生影响，方便后期维护和替换。由于不需要在原有程序中使用额外的代码来配置校验器和进行校验器的初始化，本发明实施例提供的插件本质上是一个“外挂校验器”，可以很容易的进行添加和移除，而不会影响原有程序的任何功能。

需要说明的是，在附图的流程图示出的步骤可以在诸如设置有一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。另外，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims

1.一种表单校验方法，其特征在于，包括：

其中，所述匿名函数定义的方法为：

对表单进行验证；

当表单验证正确时，从变量中取出表单的原onsubmit属性，执行原onsubmit属性定义的方法;

当表单验证错误时，显示表单验证错误信息。

2.如权利要求1所述的表单校验方法，其特征在于，还包括：

其中，所述自定义的submit事件处理方法的执行过程为：

对表单进行验证；

当表单验证正确时，继续执行表单的原submit事件；

3.如权利要求1或2所述的表单校验方法，其特征在于，还包括：

4.如权利要求3所述的表单校验方法，其特征在于，所述校验配置信息包括：

错误显示方式和/或提交表单的方法。