一种表单验证方法及系统技术方案

本发明专利技术适用于web前端的表单验证，提供了一种表单验证方法及系统，该方法包括：定义表单元素验证规则，并将验证规则与配置项DOM选择器方式封装到表单验证插件中；进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的属性进行验证。本发明专利技术解决了表单验证繁杂化，通过大量的代码去实现验证流程问题，使得很少的API调用就可以满足表单验证的需求。

【技术实现步骤摘要】
一种表单验证方法及系统
本专利技术涉及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是本专利技术一种表单验证方法的流程图。【具体实施方式】为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。如图1所示，本专利技术一种表单验证系统100，包括表单元素定义模块10、封装模块20以及接口调用模块30。表单元素定义模块10，用于定义表单元素验证规则。具体的，验证规则包括:自定义一个属性名表示表单元素验证名称，属性值定义具体的验证规则；或者，采用自定义正则表达式及函数进行验证。封装模块20，用于将验证规则与配置项DOM选择器方式封装到表单验证插件中。配置项包括提示框的主题配置，是否忽略隐藏元素验证的配置以及进行自定义提示样式的配置。如果对隐藏元素的验证配置为true，那么即使在自定义属性中定义了验证规则，也会忽略对这个元素的验证。提示框的主题配置包括输入的提示和如果输入不合理的错误提示；自定义提示样式的配置包括:将表单的提示样式配置为悬浮框提示的方式。在本专利技术中，表单元素通过自定义属性对应验证规则，通过验证规则，可以定义一些默认的提示信息，这些信息以浮动框的形式显示在相应表单元素的下方，配置项中的主题配置和自定义提示配置，即是对表单提示显示方式的配置。封装模块20将验证规则与配置项以DOM选择器方式封装到表单验证插件的过程具体为，首先通过选择器的方式调用该表单验证插件的API，表示该表单需要进行验证。插件中封装了一系列的javascript规则验证函数,对应自定义属性checkTypes的值。在执行API的的过程中，会对表单元素进行遍历，找到含有这个自定义属性checkTypes的元素，取出checkTypes属性的值，这些值对应插件中的函数名，插件中以eval执行这些值，即调用相应的验证函数。简言之，即对需要验证的表单用选择器选取，然后调用插件的API，然后插件内会获取checkTypes的值调用相应验证函数。这里的封装方式主要是通过对选择器扩展接口的方式进行封装。接口调用模块30，用于进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的属性进行验证。表单验证插件的API是插件留给应用程序的调用接口，在页面内通过调用这些API去执行相应的验证操作。其中，全局的表单验证插件API主要是进行一些通用的配置和在大多数应用情况下调用，单个元素的表单验证插件API主要是在一些个性化的验证流程中使用，在单个元素的表单验证插件API进行调用时，插件内会有一个记录单个元素表单验证插件API调用返回值的数组，在全局表单验证插件API调用时，可取数组的值，进行检验。在本专利技术的一个实施例中，表单元素定义模块10可通过对表单元素自定义属性赋值的方式定义表单元素的验证规则。比如一个表单元素定义一个自定义的属性，名为checkTypes,给这个属性赋予一些值本文档来自技高网...

【技术保护点】
一种表单验证方法，其特征在于，所述方法包括如下步骤：定义表单元素验证规则，并将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中；进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的验证规则进行验证。

【技术特征摘要】
1.一种表单验证方法，其特征在于，所述方法包括如下步骤: 定义表单元素验证规则，并将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中； 进行表单验证时调用对表单绑定的统一配置验证的表单验证插件API和提交表单前的全局验证的表单验证插件API，进行全局验证时对需要验证的表单元素进行一次遍历，逐一根据所设置的验证规则进行验证。2.根据权利要求1所述的表单验证方法，其特征在于，“将所述验证规则与配置项以DOM选择器方式封装到表单验证插件中”的步骤中，所述配置项包括提示框的主题配置，是否忽略隐藏元素验证的配置以及进行自定义提示样式的配置。3.根据权利要求1所述的表单验证方法，其特征在于，“定义表单元素验证规则”的步骤中，所述验证规则包括:自定义一个属性名表示表单元素验证名称，属性值定义验证规则。4.根据权利要求1所述的表单验证方法，其特征在于，“定义表单元素验证规则”的步骤中，所述验证规则包括:采用自定义正则表达式或函数进行验证。5.根据权利要求2所述的表单验证方法，其特征在于，提示框的主题配置包括输入的提示和如果输入不合理的错误提示； 自定义提示样式的配置...

【专利技术属性】
技术研发人员：贾春乐，
申请(专利权)人：上海上讯信息技术股份有限公司，
类型：发明
国别省市：上海;31