一种网页表单控件的验证系统及方法

Step5：调用rule函数，对单个或多个控件进行规则设置、提示信息设置；

Step6：调用blur函数，对单个或多个控件进行触发事件绑定；

Step7：调用way函数，对单个或多个控件进行提示方式设置；

Step8：调用submit、ajxSubmit、powSubmit对整个表单或控件组进行事件绑定。

优选地，所述自动分组方式：对于编写含有(HTML超文本标记语言中的元素form对应的标签形式)标签闭合的表单，则自动计算表单索引，对于没有标签包裹的表单域，则以自增方式建立索引，做为分组标志；所述指定索引方式：则直接以指定的数字做为索引，若数字为负数，则逆向查找表单并获取表单实际索引。

本发明具有如下有益效果：

本发明提供一种WEB表单验证的通用解决方案，通过表单动态分组、验证规则动态设置，简化验证规则配置、提高规则复用，多种提示方式，即使没有submit默认提交按钮或表单域没有元素包裹的表单，亦能正常监听验证，通过提供极少且强大的API，简化编写流程，极大提高前端开发效率。

本发明利用表单分组、分组规则的动态“新增”、“修改”、“重置”、“删除”，实现分组规则根据文档DOM结点的变化而变化，以达到各种复杂需求监听验证的目的。

附图说明

图1为本发明一种网页表单控件的验证方法的操作流程图；

图2为本发明一种网页表单控件的验证系统的结构流程图；

图3为本发明一种网页表单控件的验证方法的运行流程图。

具体实施方式

为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体实施方式，进一步阐述本发明。

在本发明的描述中，需要说明的是，术语“上”、“下”、“内”、“外”“前端”、“后端”、“两端”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

实施例一：

请参照图2所示：一种网页表单控件的验证系统，包括jQuery插件单元、编写分组功能单元、编写输入域规则单元、事件绑定监听单元、核心验证函数及相关代码编写单元和规则提示添加单元，方案验证系统基于所述jQuery插件单元，所述编写分组功能单元对表单进行分组，分组信息存入数组，所述编写输入域规则单元进行编写输入域选择器规则、验证规则、验证提示信息、触发提示方式设置，所述事件绑定监听单元对当前分组所有表单域的失去焦点事件、click事件、表单提交事件进行绑定监听，所述核心验证函数及相关代码编写单元编写核心验证函数check及相关代码，所述规则提示添加单元对提供的外部接口规则文件中的通用验证规则、通用提示根据需要不断添加。

其中，所述jQuery插件单元为一种javascript函数库，为本方案实现提供html元素操作、事件监听、AJAX请求等功能。

其中，所述编写分组功能单元分组方式有自动和索引指定2种方式。

其中，所述编写输入域规则单元同时对这些信息进行处理并写入第一步中对应分组数组，同时也可对当前单个表单域进行事件绑定，并且内置常用验证规则。

其中，所述事件绑定监听单元支持默认表单提交、ajax方式提交。

实施例二：

请参照图1或3所示：一种网页表单控件的验证方法，包括如下步骤：

Step1：引用jQuery插件；

Step2：引用本插件；

Step3：编写表单HTML代码；

Step4：调用group函数，对表单或无包含表单域进行分组；

Step5：调用rule函数，对单个或多个控件进行规则设置、提示信息设置；

Step6：调用blur函数，对单个或多个控件进行触发事件绑定；

Step7：调用way函数，对单个或多个控件进行提示方式设置；

Step8：调用submit、ajxSubmit、powSubmit对整个表单或控件组进行事件绑定。

备注：以上说明仅限于描述本发明实现表单验证逻辑的部分主要功能，详情原理、功能说明以插件使用说明文档为准。

其中，所述自动分组方式：对于编写含有(HTML超文本标记语言中的元素form对应的标签形式)标签闭合的表单，则自动计算表单索引，对于没有标签包裹的表单域，则以自增方式建立索引，做为分组标志；所述指定索引方式：则直接以指定的数字做为索引，若数字为负数，则逆向查找表单并获取表单实际索引。

本发明中，必须以group分组开始到submit事件绑定结束的JS代码块对单个表单进行验证监听，多个表单，则编写多个这样的JS代码块即可，当用户触发事件，则根据rule函数设置的规则对对应表单控件执行验证，其中rule、blur、way函数可组合、链式调用亦可单独使用，以上函数具体说明如下：

group函数

$.form.group(grp,action,powForm)

说明：

表单分组接口，必须。

1)参数grp，值范围[…-2,-1,0,1,2…true]，整数或true

grp＝true表示非正常表单(无标签包裹的表单域，下文将不作说明)

grp＝-1表示最后一个表单，依此类推-2为倒数第二个表单

grp＝0表示第一个表单，grp＝1表示第二个表单，依此类推

2)参数action，值范围[INSERT,INSERTONE,DELETE,RESET]，可省略，主要用于动态添加、删除表单(对应DOM结点新增、删除表单)

action＝INSERT表示在指定表单前插入一个表单

action＝INSERTONE表示在指定表单前仅可插入一个表单

action＝DELETE表示删除一个表单

action＝RESET表示重置表单，将表单数组恢复至默认状态

3)参数powForm，当powForm＝true表示非正常表单使用：

//按页面表单顺序自动绑定监听，将页面正常表单进行索引分组

$.form.group()；

//按页面表单顺序自动绑定监听，自动将页面非正常表单进行索引分组

$.form.group(true)；

//绑定监听页面第一个表单

$.form.group(0)；

//绑定监听页面最后一个表单

$.form.group(-1)；

rule函数

Submit函数

ajxSubmit函数

powSubmit函数

Way函数

$.form.way(tipWay,tipPos,tipSub)

说明：

设置验证提示方式，可单独设置每一文本域的提示方式、提示位置，也可批量设置；当tipSub＝＝＝true时，表示设置公共提示方式与提示位置，当tipSub＝＝＝false时，表示不设置公共提示，否则则以最后一个验证域的“提示设置”设置公共提示。

参数tipWay，取值[0,1,2,3]或者[auto,alert,single,none]，表示提式方式。分别表示“自动”、“弹窗”、“单一位置”、“无提示”

参数tipPos，提示位置选择器

参数tipSub，表示设置公共提示方式及位置

使用：

#设置username域的验证方式为“弹出窗口式”

$.form.rule('input[name＝"username"]').way('alert')

#批量设置，在多个$.form.rule()之后加入以下代码

$.form.way('single','#tip')

#支持链式调用

$.form.way('none').submit()

Blur函数

$.form.blur(obj)

说明

失去焦点触发验证函数

参数obj表示指定的文本域对象，一般省略

使用：

//监听rule指定的文本域失去焦点事件

$.form.rule().blur()；

//批量设置，在多个$.form.rule()之后加入以下代码

$.form.blur()；

//支持链式调用

$.form.blur().submit()。

以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。