CN104899027A - 一种实现js通用表单验证的方法 - Google Patents

Abstract

本发明涉及软件开发技术领域，具体涉及一种实现js通用表单验证的方法。本发明利用html表单元素扩展属性，将表单元素对数据的格式要求规则和错误提示绑定到控件自身属性上，然后写一个通用函数去遍历html控件，根据控件的验收规则进行效验，对于不符合要求的输入数据进行提醒，由此提高前台表单数据效验的通用性和灵活性。本方法简单易用，十分有利于降低前台UI工程师的工作量，加快开发进度；可以用于前台页面开发。

Description

一种实现js通用表单验证的方法

技术领域

本发明涉及软件开发技术领域，具体涉及一种实现js通用表单验证的方法。

背景技术

目前的WEB程序功能越来越复杂，程序页面众多；而且每个页面都有自己不同的业务逻辑，数据格式要求各有不同。同时为了提高用户体验度和减少程序BUG，页面表单提交前的数据校验又必不可少；所以通常会一个表单对应一个表单验证函数。这样一来，前台表单验证就成了一个必须要做又十分繁琐的事情。

发明内容

本发明解决的技术问题在于提供一种通用的html表单验证的方法；有效提升校验的效率。

本发明解决上述技术问题的方案是：

利用html表单元素扩展属性，扩展表单元素的属性，绑定数据校验规则和错误提示，通过共用的JS函数完成不同的表单前端数据效验。

所述的方法具体包括以下步骤：

第一步，按照正常的方式新增html表单元素；

第二步，给需要校验的表单元素空间加入扩展属性checkType和mess，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性；

第三步，编写一个JS校验函数，定义校验规则类型；

第四步，调用校验函数，遍历表单元素控件，判断checkType属性中的值，对表单进行规则校验，全部通过校验才认为表单数据验证有效。

所述的方法具体包括以下步骤：

第一步，定义一个表单元素<input>标签，

第二步，给<input>标签添加checkType属性和mess属性，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性；

第三步，编写一个JS验证函数，用参数接受需要效验的表单或者某个区块的ID，在函数内部遍历表单或者区块内的所有表单元素，抓取控件的checkType属性来校验输入的合法性，对不符合规则的按mess属性中的值进行提醒，未配置mess属性的按照预设提醒处理；

第四步，在表单提交前调用此统一验证函数，将需要验证的表单ID作为参数传给函数；验证失败时函数将给出校验提示，并返回false；所有表单元素通过验证才返回true。

本发明的有益效果是：将表单验证函数和表单栏位数据格式规则分离，数据格式验证规则和错误提醒通过扩展属性绑定到表单元素上，验证函数提供统一的表单元素迭代，抓取验收规则和错误提示即可，从而降低代码耦合，提高代码共用，简化前台页面开发，提升UI工程师的工作效率。

附图说明

下面结合附图对本发明进一步说明：

图1是本发明流程图。

具体实施方式

见附图所示，本发明利用html表单元素扩展属性，扩展表单元素的属性，绑定数据校验规则和错误提示，通过共用的JS函数完成不同的表单前端数据效验。

所述的方法具体包括以下步骤：

第一步，按照正常的方式新增html表单元素；

第二步，给需要校验的表单元素空间加入扩展属性checkType和mess，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性；

第三步，编写一个JS校验函数，定义校验规则类型；

第四步，调用校验函数，遍历表单元素控件，判断checkType属性中的值，对表单进行规则校验，全部通过校验才认为表单数据验证有效。

下面具体以HTML页面表单开发为例，讲述该方法的具体操作。

在开发HTML页面表单过程中有以下操作：

第一步、定义一个表单元素如<input>标签。

第二步、给<input>标签添加checkType属性和mess属性，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性。

第三步、编写一个JS验证函数(该函数不与具体的表单关联，只需要编写一个，所有页面共用即可)，用参数接受需要效验的表单或者某个区块的ID，在函数内部遍历表单或者区块内的所有表单元素，抓取控件的checkType属性来校验输入的合法性，对不符合规则的按mess属性中的值进行提醒，未配置mess属性的按照预设提醒处理即可。

第四步、在表单提交前调用此统一验证函数，将需要验证的表单ID作为参数传给函数即可。验证失败时函数将给出校验提示，并返回false，所有表单元素通过验证才返回true。

Claims (3)

1.一种实现js通用表单验证的方法，其特征在于：利用html表单元素扩展属性，扩展表单元素的属性，绑定数据校验规则和错误提示，通过共用的JS函数完成不同的表单前端数据效验。

2.根据权利要求1所述的实现js通用表单验证的方法，其特征在于：所述的方法具体包括以下步骤：

第一步，按照正常的方式新增html表单元素；

第二步，给需要校验的表单元素空间加入扩展属性checkType和mess，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性；

第三步，编写一个JS校验函数，定义校验规则类型；

第四步，调用校验函数，遍历表单元素控件，判断checkType属性中的值，对表单进行规则校验，全部通过校验才认为表单数据验证有效。

3.根据权利要求1或2所述的实现js通用表单验证的方法，其特征在于：所述的方法具体包括以下步骤：

第一步，定义一个表单元素<input>标签，

第二步，给<input>标签添加checkType属性和mess属性，根据实际数据格式要求，将验证规则标识写入checkType属性，将错误提示写入mess属性；

第三步，编写一个JS验证函数，用参数接受需要效验的表单或者某个区块的ID，在函数内部遍历表单或者区块内的所有表单元素，抓取控件的checkType属性来校验输入的合法性，对不符合规则的按mess属性中的值进行提醒，未配置mess属性的按照预设提醒处理；

第四步，在表单提交前调用此统一验证函数，将需要验证的表单ID作为参数传给函数；验证失败时函数将给出校验提示，并返回false；所有表单元素通过验证才返回true。