CN116450134A - 可配置的前端控件校验控制器生成方法及系统 - Google Patents
可配置的前端控件校验控制器生成方法及系统 Download PDFInfo
- Publication number
- CN116450134A CN116450134A CN202211524969.XA CN202211524969A CN116450134A CN 116450134 A CN116450134 A CN 116450134A CN 202211524969 A CN202211524969 A CN 202211524969A CN 116450134 A CN116450134 A CN 116450134A
- Authority
- CN
- China
- Prior art keywords
- html page
- data verification
- configuration
- verification rule
- rule
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000012795 verification Methods 0.000 title claims abstract description 69
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000013524 data verification Methods 0.000 claims abstract description 199
- 230000000694 effects Effects 0.000 claims abstract description 14
- 230000014509 gene expression Effects 0.000 claims description 8
- 230000001960 triggered effect Effects 0.000 claims description 7
- 238000013461 design Methods 0.000 description 3
- 230000007547 defect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000012827 research and development Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 238000012550 audit Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/43—Checking; Contextual analysis
- G06F8/433—Dependency analysis; Data or control flow analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/02—Total factory control, e.g. smart factories, flexible manufacturing systems [FMS] or integrated manufacturing systems [IMS]
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
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页面数据满足触发条件时,触发对应数据校验规则对数据进行校验并给予提示。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211524969.XA CN116450134A (zh) | 2022-12-01 | 2022-12-01 | 可配置的前端控件校验控制器生成方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211524969.XA CN116450134A (zh) | 2022-12-01 | 2022-12-01 | 可配置的前端控件校验控制器生成方法及系统 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN116450134A true CN116450134A (zh) | 2023-07-18 |
Family
ID=87130884
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211524969.XA Pending CN116450134A (zh) | 2022-12-01 | 2022-12-01 | 可配置的前端控件校验控制器生成方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116450134A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116775005A (zh) * | 2023-08-22 | 2023-09-19 | 浪潮软件股份有限公司 | 动态加载功能模块js与css的方法、装置及存储介质 |
-
2022
- 2022-12-01 CN CN202211524969.XA patent/CN116450134A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116775005A (zh) * | 2023-08-22 | 2023-09-19 | 浪潮软件股份有限公司 | 动态加载功能模块js与css的方法、装置及存储介质 |
CN116775005B (zh) * | 2023-08-22 | 2024-01-30 | 浪潮软件股份有限公司 | 动态加载功能模块js与css的方法、装置及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN100543724C (zh) | 提供和处理可执行网页内容的系统和方法 | |
US7844947B2 (en) | Runtime services for network software platform | |
CN110990731A (zh) | 一种静态网页的渲染方法、装置、设备及计算机存储介质 | |
CN112650533B (zh) | 接口文档的生成方法、装置和终端设备 | |
US20060253831A1 (en) | Validation architecture | |
CN107632869B (zh) | 一种加载pos应用的用户界面的方法与设备 | |
EP1678629A2 (en) | Extensible framework for handling different mark up language parsers and generators in a computing device | |
US20050038816A1 (en) | Methods, systems and computer program prodcuts for validation of XML instance documents using JAVA classloaders | |
CN111694613B (zh) | 应用程序模块间的解耦方法、电子装置及存储介质 | |
CN112559026B (zh) | 基于api接口的原生能力拓展方法、设备及存储介质 | |
CN100511140C (zh) | 构件化软件系统实现脚本语言调用多输出参数接口的方法 | |
US9990344B1 (en) | Method and apparatus for extensibility of user interface binding definitions | |
CN116450134A (zh) | 可配置的前端控件校验控制器生成方法及系统 | |
US6971107B2 (en) | System and method for frame storage of executable code | |
JP4660483B2 (ja) | コンピューティング環境において使用するためのアイデンティティシステム | |
US20030237052A1 (en) | Method and an apparatus for styling a web service | |
CN109062870A (zh) | 服务器、业务数据校验的方法及存储介质 | |
CN112905263A (zh) | 一种自定义组件的加载方法、装置、电子设备和存储介质 | |
CN117149631A (zh) | 一种参数校验方法、装置、设备及介质 | |
CN114003603A (zh) | 基于大数据平台的数据导出方法、系统及存储介质 | |
CN111240679B (zh) | 页面开发方法及系统 | |
Frost | Learning WML & WMLScript | |
Honkala et al. | A configurable XForms implementation | |
CN113626016A (zh) | 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件 | |
CN112527320A (zh) | 一种基于浏览器部署应用系统的方法、装置及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |