网页表单的处理方法、装置、电子设备及存储介质制造方法及图纸

技术编号:25947430 阅读:18 留言:0更新日期:2020-10-17 03:39
本申请提供了一种网页表单的处理方法、装置、电子设备及存储介质,包括:获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;在接收到输入值时,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单。本申请中,通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。

【技术实现步骤摘要】
网页表单的处理方法、装置、电子设备及存储介质
本申请实施例涉及通信
,尤其涉及一种网页表单的处理方法、装置、电子设备及存储介质。
技术介绍
随着互联网发展至今,在浏览器中填写网页表单已经非常常见。一个网页表单需要实现最简单的两个功能:一是用户可以输入数据,二是可以将数据发送给服务端。相关技术中,具体可以通过基于Vue(Vue是一套构建用户界面的渐进式框架)框架的vue-form-making工具包,实现网页表单的生成渲染以及运行。vue-form-making工具包的特性包括:可视化配置页面、栅格布局、一键预览配置的效果、一键生成配置JSON(JavaScriptObjectNotation,JS对象简谱)数据、一键生成代码,立即可运行、提供自定义组件满足用户自定义需求、提供远端数据接口,方便用户需要异步获取数据加载等,能够基于可视化操作快速设计出表单页面,并获取到表单配置json数据,并根据设计器中获取的配置json数据,快速渲染出表单页面。但是,目前方案中,vue-form-making工具包缺乏根据用户输入动态渲染表单的能力,使得网页表单的应用范围较小,无法满足复杂场景下的用户需求。例如,在账户注册表单中,vue-form-making工具包无法根据用户在注册方式选择组件中选择的手机号或邮箱注册方式,对应渲染展示输入手机号或输入邮箱的组件。
技术实现思路
本申请实施例提供一种网页表单的处理方法、装置、电子设备及存储介质,以解决相关技术中缺乏根据用户输入动态渲染表单的能力,使得网页表单的应用范围较小,无法满足复杂场景下的用户需求的问题。第一方面,本申请实施例提供了一种网页表单的处理方法,该方法包括:获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;对所述目标网页表单进行展示。在一种可选实施方式中,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;将所述远程校验结果添加至所述第一目标组件的描述信息中。在一种可选实施方式中,所述描述信息还包括:针对所述输入值的合法性校验规则;在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。在一种可选实施方式中,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。在一种可选实施方式中,所述描述信息还包括数据路径;所述获取所述组件对应的初始值,包括:若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。在一种可选实施方式中,所述描述信息还包括所述描述信息对应的组件的组件标识,所述对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示,包括:将每个组件,通过所述组件的描述信息包括的组件标识,在预设的全局变量表中进行注册;遍历所述描述配置文件中的所有组件,并根据所述组件的描述信息以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。在一种可选实施方式中,所述依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;所述根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,包括:确定所述输入值对应的第一目标组件的描述信息;将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件;根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息;在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值;通过所述处理函数对所述目标值进行计算,得到输出值;将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。在一种可选实施方式中,在所述对所述目标网页表单进行展示之后,所述方法还包括:在完成对所述目标网页表单中所有组件的填写操作之后,提取所述目标网页表单中所有组件的当前值,并将所述当前值发送至服务器进行处理。第二方面,本申请实施例提供了一种网页表单的处理装置,该装置包括:获取模块,被配置为获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;渲染模块,被配置为对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;更新模块,被配置为在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;展示模块,被配置为对所述目标网页表单进行展示。在一种可选实施方式中,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;所述更新模块,包括:第一发送子模块,被配置为在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;接收子模块,被配置为通过所述数据接收接口,接收所述本文档来自技高网...

【技术保护点】
1.一种网页表单的处理方法,其特征在于,所述方法包括:/n获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的初始取值;/n对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;/n在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;/n对所述目标网页表单进行展示。/n

【技术特征摘要】
1.一种网页表单的处理方法,其特征在于,所述方法包括:
获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的初始取值;
对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
对所述目标网页表单进行展示。


2.根据权利要求1所述的方法,其特征在于,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;
通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;
将所述远程校验结果添加至所述第一目标组件的描述信息中。


3.根据权利要求1所述的方法,其特征在于,所述描述信息还包括:针对所述输入值的合法性校验规则;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。


4.根据权利要求3所述的方法,其特征在于,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。


5.根据权利要求1所述的方法,其特征在于,所述描述信息还包括数据路径;
所述获取所述组件对应的初始值,包括:
若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;
若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。


6.根据权利要求1所述的方法,其特征在于,所述描述信息还包括所述描述信息对应的组件的组件标识,所述对所述描述配置文件和所述初始值进行渲染,得到...

【专利技术属性】
技术研发人员:胡富民李璇
申请(专利权)人:北京达佳互联信息技术有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1