[发明专利]一种实现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。