CN113051170A - 一种网页表单控件的验证***及方法 - Google Patents
一种网页表单控件的验证***及方法 Download PDFInfo
- Publication number
- CN113051170A CN113051170A CN202110356986.6A CN202110356986A CN113051170A CN 113051170 A CN113051170 A CN 113051170A CN 202110356986 A CN202110356986 A CN 202110356986A CN 113051170 A CN113051170 A CN 113051170A
- Authority
- CN
- China
- Prior art keywords
- unit
- grouping
- compiling
- rule
- verification
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3604—Software analysis for verifying properties of programs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Debugging And Monitoring (AREA)
Abstract
本发明公开了一种网页表单控件的验证***及方法，涉及表单验证技术领域，本发明包括jQuery插件单元、编写分组功能单元、编写输入域规则单元、事件绑定监听单元、核心验证函数及相关代码编写单元和规则提示添加单元，方案验证***基于jQuery插件单元，编写分组功能单元对表单进行分组，分组信息存入数组，编写输入域规则单元进行编写输入域选择器规则、验证规则、验证提示信息、触发提示方式设置，事件绑定监听单元对当前分组所有表单域的失去焦点事件、click事件、表单提交事件进行绑定监听；本发明利用表单分组、分组规则的动态“新增”、“修改”、“重置”、“删除”，实现分组规则根据文档DOM结点的变化而变化，以达到各种复杂需求监听验证的目的。
Description
技术领域
本发明涉及表单验证技术领域，特别涉及一种网页表单控件的验证***及方法。
背景技术
表单验证是javascript中的高级选项之一，网页表单验证是网站上一种极为常用的需求，且完善、强大的输入验证能极大的提升用户体验，而对于开发者来讲，要实现这些各种验证需求，却需要开发大量冗余JS代码(JavaScript是目前流行的网页脚本语言)，因而提供一种强大、简洁、使用简单的通用验证方案就显得尤为迫切需要；为此，我们提出一种网页表单控件的验证***及方法。
发明内容
本发明的主要目的在于提供一种网页表单控件的验证***及方法，以解决上述背景中提出的问题。
为实现上述目的，本发明采取的技术方案为：一种网页表单控件的验证***，包括jQuery插件单元、编写分组功能单元、编写输入域规则单元、事件绑定监听单元、核心验证函数及相关代码编写单元和规则提示添加单元，方案验证***基于所述jQuery插件单元，所述编写分组功能单元对表单进行分组，分组信息存入数组，所述编写输入域规则单元进行编写输入域选择器规则、验证规则、验证提示信息、触发提示方式设置；
所述事件绑定监听单元对当前分组所有表单域的失去焦点事件、click事件、表单提交事件进行绑定监听，所述核心验证函数及相关代码编写单元编写核心验证函数check及相关代码，所述规则提示添加单元对提供的外部接口规则文件中的通用验证规则、通用提示根据需要添加。
优选地，所述jQuery插件单元为一种javascript函数库，提供html元素操作、事件监听、AJAX请求。
优选地，所述编写分组功能单元分组方式有自动和索引指定2种方式。
优选地，所述编写输入域规则单元同时对信息进行处理并写入第一步中对应分组数组，同时对当前单个表单域进行事件绑定，并且内置验证规则。
优选地，所述事件绑定监听单元支持默认表单提交、ajax方式提交。
一种网页表单控件的验证方法，包括如下步骤：
Step1：引用jQuery插件；
Step2：引用本插件；
Step3：编写表单HTML代码；
Step4：调用group函数，对表单或无<form>包含表单域进行分组；
Step5：调用rule函数，对单个或多个控件进行规则设置、提示信息设置；
Step6：调用blur函数，对单个或多个控件进行触发事件绑定；
Step7：调用way函数，对单个或多个控件进行提示方式设置；
Step8：调用submit、ajxSubmit、powSubmit对整个表单或控件组进行事件绑定。
优选地，所述自动分组方式：对于编写含有<form>(HTML超文本标记语言中的元素form对应的标签形式)标签闭合的表单，则自动计算表单索引，对于没有<form>标签包裹的表单域，则以自增方式建立索引，做为分组标志；所述指定索引方式：则直接以指定的数字做为索引，若数字为负数，则逆向查找表单并获取表单实际索引。
本发明具有如下有益效果：
本发明提供一种WEB表单验证的通用解决方案，通过表单动态分组、验证规则动态设置，简化验证规则配置、提高规则复用，多种提示方式，即使没有submit默认提交按钮或表单域没有<form>元素包裹的表单，亦能正常监听验证，通过提供极少且强大的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函数，对表单或无<form>包含表单域进行分组；
Step5：调用rule函数，对单个或多个控件进行规则设置、提示信息设置；
Step6：调用blur函数，对单个或多个控件进行触发事件绑定；
Step7：调用way函数，对单个或多个控件进行提示方式设置；
Step8：调用submit、ajxSubmit、powSubmit对整个表单或控件组进行事件绑定。
备注：以上说明仅限于描述本发明实现表单验证逻辑的部分主要功能，详情原理、功能说明以插件使用说明文档为准。
其中，所述自动分组方式：对于编写含有<form>(HTML超文本标记语言中的元素form对应的标签形式)标签闭合的表单，则自动计算表单索引，对于没有<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表示非正常表单(无<form>标签包裹的表单域，下文将不作说明)
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()。
以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。
Claims (7)
1.一种网页表单控件的验证***，包括jQuery插件单元、编写分组功能单元、编写输入域规则单元、事件绑定监听单元、核心验证函数及相关代码编写单元和规则提示添加单元，其特征在于：验证***基于所述jQuery插件单元，所述编写分组功能单元对表单进行分组，分组信息存入数组，所述编写输入域规则单元进行编写输入域选择器规则、验证规则、验证提示信息、触发提示方式设置；
所述事件绑定监听单元对当前分组所有表单域的失去焦点事件、click事件、表单提交事件进行绑定监听，所述核心验证函数及相关代码编写单元编写核心验证函数check及相关代码，所述规则提示添加单元对提供的外部接口规则文件中的通用验证规则、通用提示根据需要添加。
2.根据权利要求1所述的一种网页表单控件的验证***，其特征在于：所述jQuery插件单元为一种javascript函数库，提供html元素操作、事件监听及AJAX请求。
3.根据权利要求1所述的一种网页表单控件的验证***，其特征在于：所述编写分组功能单元分组方式有自动和索引指定2种方式。
4.根据权利要求1所述的一种网页表单控件的验证***，其特征在于：所述编写输入域规则单元同时对信息进行处理并写入第一步中对应分组数组，同时对当前单个表单域进行事件绑定，并且内置验证规则。
5.根据权利要求1所述的一种网页表单控件的验证***，其特征在于：所述事件绑定监听单元支持默认表单提交、ajax方式提交。
6.根据权利要求1所述的一种网页表单控件的验证方法，其特征在于，包括如下步骤：
Step1：引用jQuery插件；
Step2：引用本插件；
Step3：编写表单HTML代码；
Step4：调用group函数，对表单或无<form>包含表单域进行分组；
Step5：调用rule函数，对单个或多个控件进行规则设置、提示信息设置；
Step6：调用blur函数，对单个或多个控件进行触发事件绑定；
Step7：调用way函数，对单个或多个控件进行提示方式设置；
Step8：调用submit、ajxSubmit、powSubmit对整个表单或控件组进行事件绑定。
7.根据权利要求3所述的一种网页表单控件的验证***，其特征在于，所述自动分组方式：对于编写含有<form>(HTML超文本标记语言中的元素form对应的标签形式)标签闭合的表单，则自动计算表单索引，对于没有<form>标签包裹的表单域，则以自增方式建立索引，做为分组标志；所述指定索引方式：则直接以指定的数字做为索引，若数字为负数，则逆向查找表单并获取表单实际索引。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110356986.6A CN113051170A (zh) | 2021-04-01 | 2021-04-01 | 一种网页表单控件的验证***及方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110356986.6A CN113051170A (zh) | 2021-04-01 | 2021-04-01 | 一种网页表单控件的验证***及方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113051170A true CN113051170A (zh) | 2021-06-29 |
Family
ID=76517300
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110356986.6A Pending CN113051170A (zh) | 2021-04-01 | 2021-04-01 | 一种网页表单控件的验证***及方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113051170A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113886777A (zh) * | 2021-08-27 | 2022-01-04 | 观脉科技(北京)有限公司 | 一种Form表单验证的配置方法和执行方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050028084A1 (en) * | 2003-07-28 | 2005-02-03 | Alan Dziejma | System and method for a form validation engine |
| CN102819766A (zh) * | 2011-06-09 | 2012-12-12 | 金蝶软件（中国）有限公司 | 一种表单校验方法、装置及企业*** |
| CN105404620A (zh) * | 2015-11-20 | 2016-03-16 | 华为技术有限公司 | 一种表单校验的方法和装置 |
| CN109062567A (zh) * | 2018-07-09 | 2018-12-21 | 南京君度科技有限公司 | 基于b/s结构的信息管理***快速开发平台 |
| CN110889270A (zh) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | 一种表单页面文档生成方法、表单页面渲染方法及装置 |
-
2021
- 2021-04-01 CN CN202110356986.6A patent/CN113051170A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050028084A1 (en) * | 2003-07-28 | 2005-02-03 | Alan Dziejma | System and method for a form validation engine |
| CN102819766A (zh) * | 2011-06-09 | 2012-12-12 | 金蝶软件（中国）有限公司 | 一种表单校验方法、装置及企业*** |
| CN105404620A (zh) * | 2015-11-20 | 2016-03-16 | 华为技术有限公司 | 一种表单校验的方法和装置 |
| CN109062567A (zh) * | 2018-07-09 | 2018-12-21 | 南京君度科技有限公司 | 基于b/s结构的信息管理***快速开发平台 |
| CN110889270A (zh) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | 一种表单页面文档生成方法、表单页面渲染方法及装置 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113886777A (zh) * | 2021-08-27 | 2022-01-04 | 观脉科技(北京)有限公司 | 一种Form表单验证的配置方法和执行方法 |
| CN113886777B (zh) * | 2021-08-27 | 2022-06-07 | 观脉科技(北京)有限公司 | 一种Form表单验证的配置方法和执行方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110221872B (zh) | 页面跳转方法、装置、电子设备和存储介质 | |
| CN108293081B (zh) | 通过用户界面事件的程序重放深度链接到移动应用状态 | |
| CN102567516B (zh) | 脚本加载方法及装置 | |
| US7210096B2 (en) | Methods and apparatus for constructing semantic models for document authoring | |
| US8392884B2 (en) | Test case automatic generation method for testing proactive GSM application on SIM cards | |
| DuBois | MySQL cookbook | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN107480117B (zh) | 自动化页面表单数据的恢复方法及装置 | |
| CN107330014B (zh) | 一种数据表的创建方法与设备 | |
| CN105160018A (zh) | 一种复制/粘贴图片的方法、装置和*** | |
| CN110795353A (zh) | 快应用的调试方法、装置、设备及存储介质 | |
| CN113051170A (zh) | 一种网页表单控件的验证***及方法 | |
| WO2011104260A2 (en) | Short message processing method and apparatus | |
| CA2675692C (en) | Compiler-assisted program source code filter | |
| KR20000011320A (ko) | 웹페이지선택및프린팅방법및장치 | |
| CN110457023A (zh) | 任务创建方法、装置、存储介质及电子设备 | |
| CN110244986A (zh) | 浏览器配置方法和装置 | |
| Chan | Learn PHP in One Day and Learn It Well | |
| CN111399842B (zh) | 一种代码编译方法及装置 | |
| CN107102930A (zh) | 一种json格式日志的生成方法及装置 | |
| CN112711602B (zh) | 一种存储过程的运行方法、装置，数据库***及存储介质 | |
| CN104717227A (zh) | 一种登录控件更新登录信息的方法和装置 | |
| CN111736806A (zh) | 控件注入方法、装置及终端设备 | |
| CN112714015A (zh) | 通信数据故障注入方法及其***、通信设备和存储介质 | |
| CN111026466A (zh) | 文件处理方法、装置、计算机可读存储介质及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |