[发明专利]一种表单验证方法及系统

说明书

技术领域

本发明涉及web前端的表单验证，尤其涉及一种表单验证方法及系统。

背景技术

随着表单验证需求的日益复杂，数据格式的多样化，一般的表单验证方式代码复用率低，开发效率不高，即使是封装了若干验证规则的函数去调用，前端或者前台人员仍需要根据验证流程写大量的关于验证过程和DOM操作的代码。当前面临的问题是如何保证只调用很少的API，只需要指定相应的验证要求，就可以很快捷的去完成验证过程，减少大量代码的书写，进行更集中化的封装。

综上可知，现有技术在实际使用上显然存在不便与缺陷，所以有必要加以改进。

发明内容

针对上述的缺陷，本发明的目的在于提供一种表单验证方法及系统，解决了表单验证繁杂化，通过大量的代码去实现验证流程问题，使得很少的API调用就可以满足表单验证的需求。

为了实现上述目的，本发明提供一种表单验证方法，所述方法包括如下步骤

定义表单元素验证规则，并将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中；

进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的验证规则进行验证。

根据本发明的表单验证方法，“将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中”的步骤中，所述配置项包括提示框的主题配置，是否忽略隐藏元素验证的配置以及进行自定义提示样式的配置。

根据本发明的表单验证方法，“定义表单元素验证规则”的步骤中，所述验证规则包括：自定义一个属性名表示表单元素验证名称，属性值定义验证规则。

根据本发明的表单验证方法，“定义表单元素验证规则”的步骤中，所述验证规则包括：采用自定义正则表达式或函数进行验证。

根据本发明的表单验证方法，提示框的主题配置包括输入的提示和如果输入不合理的错误提示；

自定义提示样式的配置包括：将表单的提示样式配置为悬浮框提示的方式。

本发明相应提供一种表单验证系统，所述系统包括：

表单元素定义模块，用于定义表单元素验证规则，

封装模块，用于将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中；

接口调用模块，用于进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的验证规则进行验证。

根据本发明的表单验证系统，所述配置项包括提示框的主题配置，是否忽略隐藏元素验证的配置以及进行自定义提示样式的配置。

根据本发明的表单验证系统，所述验证规则包括：自定义一个属性名表示表单元素验证名称，属性值定义具体的验证规则。

根据本发明的表单验证系统，所述验证规则包括：采用自定义正则表达式或函数进行验证。

根据本发明的表单验证系统，提示框的主题配置包括输入的提示和如果输入不合理的错误提示；自定义提示样式的配置包括：将表单的提示样式配置为悬浮框提示的方式。

根据本发明的表单验证系统，提示框的主题配置包括输入的提示和如果输入不合理的错误提示；自定义提示样式的配置包括：将表单的提示样式配置为悬浮框提示的方式。

本发明通过定义表单元素验证规则，并将所述验证规则与配置项DOM选择器方式封装到表单验证插件中；进行表单验证时调用对表单绑定的统一配置验证的API和提交表单前的全局验证的API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的属性进行验证。进行一个表单验证基本只需要调用两个API，即对表单绑定的统一配置验证的API和提交表单前的全局验证的API，验证规则只需根据所指定的属性名属性值去设置即可，不用再去为实现验证流程而写大量的js代码，如果有比较特殊的验证要求时，比如需要进行自定义验证函数的设置时，才需要写一些特殊验证流程的代码。而且提示方式也已用css设置，并且显示控制也在插件内部进行封装，省去了反复写DOM操作的过程。所以达到了减少js代码的目的。解决了表单验证繁杂化，通过大量的代码去实现验证流程问题，使得很少的API调用就可以满足表单验证的需求。

附图说明

图1是本发明一种表单验证系统的原理框图；

图2是本发明一种实施例中web前端进行表单验证的验证流程；

图3是本发明一种表单验证方法的流程图。