CN116450134A - 可配置的前端控件校验控制器生成方法及系统 - Google Patents

Abstract

本发明公开了可配置的前端控件校验控制器生成方法及系统，属于Web应用技术领域，要解决的技术问题为如何提供一种实现校验规则可配置、Html页面数据校验规则动态加载的前端控件校验控制器。包括如下步骤：配置数据校验组件并生成用于加载组件的组件文件；编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化；进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库；进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

Description

可配置的前端控件校验控制器生成方法及系统

技术领域

本发明涉及Web应用技术领域，具体地说是可配置的前端控件校验控制器生成方法及系统。

背景技术

Html页面数据校验即在前端Html页面中对用户输入数据进行规则检查，出现错误及时提醒，避免不必要的请求到达服务器，减少流量浪费且避免不必要的服务器压力。针对Html页面的数据校验，业界常用方案包含以下几种：

1、Html页面引入数据校验js组件

此类数据校验js组件内置了对常见数据格式，如手机号、邮箱地址、身份证号等校验规则，在Html页面对应控件标签引入其对应属性即可，当Html页面数据发生变动或保存提交触发对应规则校验并给予提示。此方案优点为常见数据格式校验规则已经过多方验证，较为稳定，且只需要引入对应js文件，无需对业务系统做出较大改动；缺点为Html页面数据校验规则较为固定，如需进行较为复杂的验证，则无法支持，此外每次校验规则变动，需要Html页面代码进行修改发布，耗时耗力。

2、业务系统引入表单系统

表单系统即用于管理Html表单页面的专职系统，相关Html表单页面可在表单系统中进行设计应用，业务系统只需要在相关位置进行引用表单系统提供的表单地址即可。引入表单系统的好处是表单页面统一管理，无需在业务系统中关心相关页面实现，且表单校验规则改变可立即发布，无需等待；缺点为业务系统需与表单系统进行深度绑定，且表单系统需要单独的服务器资源，需要一定的费用支出。

在政务服务产品领域，大部分业务申请都以Html表单页面进行数据收集并提交至服务器端进行逻辑处理，Html页面数据校验成为数据质量的第一道关卡，一种便于维护且数据校验规则变更快速生效的前端数据校验规则方案设计是非常有必要的。

如何提供一种实现校验规则可配置、Html页面数据校验规则动态加载的前端控件校验控制器，是需要解决的技术问题。

发明内容

本发明的技术任务是针对以上不足，提供可配置的前端控件校验控制器生成方法及系统，来解决如何提供一种实现校验规则可配置、Html页面数据校验规则动态加载的前端控件校验控制器的技术问题。

第一方面，本发明一种可配置的前端控件校验控制器生成方法，用于将Html页面前端数据校验方法插件化，将生成的插件加载至Html页面，所述方法包括如下步骤：

配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件；其中，所述formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，所述formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化；

进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库；

进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

作为优选，对所述Html页面进行初始化时，调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

在Html页面的数据触发提交方法时，调用formValidate("beforesave")方法，执行数据提交前的规则校验。

作为优选，进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置；

所述数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。

作为优选，对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置；

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

作为优选，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证，包括如下步骤：

进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则；

Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上；

Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。

第二方面，本发明一种可配置的前端控件校验控制器生成系统，通过如第一方面任一项所述的可配置的前端控件校验控制器生成方法将Html页面前端数据校验方法插件化，并将生成的插件加载至Html页面，所述系统包括：

插件配置模块，所述插件配置模块用于配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件；其中，

所述formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，所述formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

Html页面编写模块，所述Html页面编写模块用于编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化；

规则配置模块，所述规则配置模块用于进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库；

规则验证模块，所述规则验证模块用于进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

作为优选，对所述Html页面进行初始化时，所述Html页面编写模块用于调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

在Html页面的数据触发提交方法时，调用formValidate("beforesave")方法，执行数据提交前的规则校验。

作为优选，所述规则配置模块用于进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置；

所述数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。

作为优选，所述规则配置模块用于对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置；

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

作为优选，所述规则验证模块用于执行如下操作对配置的数据校验规则进行效果验证：

进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则；

Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上；

Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。

本发明的可配置的前端控件校验控制器生成方法具有以下优点：

1、无需关心Html页面校验规则设置，并可通过可视化配置的方式实现数据校验规则配置，减轻了研发人员研发压力，增强了系统运行期间的可维护性；

2、通过校验规则可视化配置，可大幅减少研发资源的投入，同时校验规则配置后即可动态加载，大大提高了系统的健壮性。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

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

图1为实施例1可配置的前端控件校验控制器生成方法的流程框图；

图2为实施例1可配置的前端控件校验控制器生成方法中Html页面配置表单控件进行数据校验规则配置的界面展示；

图3为实施例1可配置的前端控件校验控制器生成方法中验证过程返回的效果展示；

图4为实施例1可配置的前端控件校验控制器生成方法中将数据校验规则与表单控件绑定的效果展示。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定，在不冲突的情况下，本发明实施例以及实施例中的技术特征可以相互结合。

本发明实施例提供可配置的前端控件校验控制器生成方法及系统，用于解决如何提供一种实现校验规则可配置、Html页面数据校验规则动态加载的前端控件校验控制器的技术问题。

实施例1：

本发明一种可配置的前端控件校验控制器生成方法，用于将Html页面前端数据校验方法插件化，将生成的插件加载至Html页面，该述方法包括数据校验插件构建、Html页面编写、数据校验规则配置以及效果验证四个步骤。

步骤S100数据校验规则构建，在该步骤中，配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件。

formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，此为实现Html页面数据校验配置的必要处理，也是前端Html页面数据校验规则动态加载的基础。

formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中。此为实现Html页面数据校验配置的必要处理，也是前端Html页面数据校验规则动态加载的基础。

formValidator.js插件的主要作用则是请求服务器端获取Html页面数据校验表单规则数据、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应表单控件中，以备后续校验规则执行。

本实施例中将两个插件的后端代码封装为formValidate.jar，主要作用为读写数据库，以保存或读取数据校验规则，在此不作详细介绍。

两个插件部分代码片段如下：

步骤S200、编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化。

Html页面是数据校验规则配置及校验规则动态加载的核心，编写时无需进行过多设计，将其作为普通页面编写即可，即在Html页面中无需进行表单校验规则的配置，除必要的js及css文件(已删除部分)引入外，只需引入插件文件(即formValidateConfig.js及formValidator.js两个插件的插件文件)，用以Html校验规则配置及动态加载。在页面初始化时，调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中。在页面数据触发提交方法时，可调用formValidate("beforesave")方法，执行数据提交前的规则校验。

该步骤编写Html页面的代码如下：

/>

步骤S300、进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库。

进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置，数据规则配置中除内置部分固定校验规则外，还支持正则表达式及自定义函数调用等。

其中，数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置。

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

在本实施例中，对表单控件配置数据校验规则后，将配置的数据校验规则的属性信息存储至数据库中，并以数据校验规则存储表的形式存储，如表1所示。

表1、数据校验规则存储表

步骤S400、进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证，包括如下步骤：

(1)进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则，其请求返回内容如图3所示；

(2)Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上，绑定效果如图4所示；

(3)Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。

在开发Javaweb项目时，可引入上述数据校验插件，并在数据库中创建相关数据校验规则存储表，在需要使用校验规则可视化配置及动态加载数据校验规则的Html页面，并调用Html页面数据校验规则方法即可。

实施例2：

本发明一种可配置的前端控件校验控制器生成系统，包括插件配置模块、Html页面编写模块、规则配置模块以及规则验证模块，该系统通过实施例1公开的方法将Html页面前端数据校验方法插件化，并将生成的插件加载至Html页面。

插件配置模块用于配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件。

其中，formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，此为实现Html页面数据校验配置的必要处理，也是前端Html页面数据校验规则动态加载的基础。

formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中。此为实现Html页面数据校验配置的必要处理，也是前端Html页面数据校验规则动态加载的基础。

该模块用于将两个插件的后端代码封装为formValidate.jar，主要作用为读写数据库，以保存或读取数据校验规则，

Html页面编写模块用于编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化。

Html页面是数据校验规则配置及校验规则动态加载的核心，编写时无需进行过多设计，将其作为普通页面编写即可，即在Html页面中无需进行表单校验规则的配置，除必要的js及css文件(已删除部分)引入外，只需引入插件文件(即formValidateConfig.js及formValidator.js两个插件的插件文件)，用以Html校验规则配置及动态加载。

在页面初始化时，Html页面编写模块用于调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中。

在页面数据触发提交方法时，可调用formValidate("beforesave")方法，执行数据提交前的规则校验。

规则配置模块用于进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库。

作为具体实施，规则配置模块进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置，数据规则配置中除内置部分固定校验规则外，还支持正则表达式及自定义函数调用等。

其中，数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置。

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后。

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

在本实施例中，对表单控件配置数据校验规则后，将配置的数据校验规则的属性信息存储至数据库中，并以数据校验规则存储表的形式存储。

规则验证模块用于进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

作为具体实施，规则验证模块用于执行：

(1)进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则；

(2)Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上；

(3)Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。

上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。

Claims (10)

1.一种可配置的前端控件校验控制器生成方法，其特征在于，用于将Html页面前端数据校验方法插件化，将生成的插件加载至Html页面，所述方法包括如下步骤：

配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件；其中，所述formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，所述formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化；

进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库；

进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

2.根据权利要求1所述的可配置的前端控件校验控制器生成方法，其特征在于，对所述Html页面进行初始化时，调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

在Html页面的数据触发提交方法时，调用formValidate("beforesave")方法，执行数据提交前的规则校验。

3.根据权利要求1所述的可配置的前端控件校验控制器生成方法，其特征在于，进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置；

所述数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。

4.根据权利要求3所述的可配置的前端控件校验控制器生成方法，其特征在于，对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置；

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

5.根据权利要求1-4任一项所述的可配置的前端控件校验控制器生成方法，其特征在于，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证，包括如下步骤：

进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则；

Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上；

Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。

6.一种可配置的前端控件校验控制器生成系统，其特征在于，通过如权利要求1-5任一项所述的可配置的前端控件校验控制器生成方法将Html页面前端数据校验方法插件化，并将生成的插件加载至Html页面，所述系统包括：

插件配置模块，所述插件配置模块用于配置数据校验组件并生成用于加载组件的组件文件，所述数据校验组件包括formValidateConfig.js插件和formValidator.js插件；其中，

所述formValidateConfig.js插件用于配置数据校验规则并将数据校验的属性信息存储至数据库，所述formValidator.js插件用于请求服务器端获取数据校验规则、对数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

Html页面编写模块，所述Html页面编写模块用于编写Html页面，在所述Html页面中引入所述组件文件，并对所述Html页面进行初始化；

规则配置模块，所述规则配置模块用于进入编写后的Html页面，对Html页面中表单控件进行数据校验规则配置，并将配置的数据校验规则存储至数据库；

规则验证模块，所述规则验证模块用于进入编写后的Html页面，调用formValidator.js插件动态加载数据校验规则，对配置的数据校验规则进行效果验证。

7.根据权利要求6所述的可配置的前端控件校验控制器生成方法，其特征在于，对所述Html页面进行初始化时，所述Html页面编写模块用于调用formValidator.js插件中的formValidate("init")方法进行Html页面数据校验规则的初始化，在Html页面数据校验规则初始化的过程中执行：根据自定义的表单id、从服务器端读取所述数据校验规则，对所述数据校验规则的属性信息进行解释并将数据校验规则的属性信息绑定到Html页面对应的表单控件中；

在Html页面的数据触发提交方法时，调用formValidate("beforesave")方法，执行数据提交前的规则校验。

8.根据权利要求6所述的可配置的前端控件校验控制器生成方法，其特征在于，所述规则配置模块用于进入编写后的Html页面，通过Html页面中数据校验规则配置页面对表单控件进行数据校验规则配置；

所述数据校验规则配置页面分为左右两个部分，左部分Html页面用于显示表单控件，支持以点击的方式选定表单控件；右部分Html页面用于对表单控件进行数据校验规则配置，对表单控件进行数据校验规则配置后，触发保存按钮进行保存。

9.根据权利要求7所述的可配置的前端控件校验控制器生成方法，其特征在于，所述规则配置模块用于对表单控件进行数据校验规则配置时，配置内容包括：锁定配置、必填项配置、动态赋值配置、元素格式配置以及显示隐藏配置；

其中，所述锁定配置包括是否锁定、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述必填项配置包括是否必填、条件内容以及执行时机，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述动态赋值配置包括默认值、执行时机、动态赋值条件以及动态赋值结果，所述执行时机包括初始化、变更、保存以及保存前以及保存后；

所述元素格式化配置包括自定义格式化条件、格式表达式名称以及提示信息。

10.根据权利要求6-9任一项所述的可配置的前端控件校验控制器生成方法，其特征在于，所述规则验证模块用于执行如下操作对配置的数据校验规则进行效果验证：

进入Html页面后，Html页面通过调用formValidate("init")请求服务端获取数据校验规则；

Html页面获取到服务器端返回的数据校验规则后，通过formvalidator.js插件将获取的数据校验规则绑定到Html页面对应的表单控件上；

Html页面数据满足触发条件时，触发对应数据校验规则对数据进行校验并给予提示。