一种表单自动填充方法和系统技术方案

本发明专利技术公开了一种表单自动填充方法和系统，涉及页面数据处理技术领域。该方法和系统可以实现如下功能：支持常见web表单元素赋值操作；表单赋值后自动触发表单的change等事件，并可灵活配置；只对某一元素内的子元素进行赋值，实现赋值模块化；支持日期、金额的自定义格式化；支持多级联动下拉框取值并赋值选中。因此，采用本实施例提供的表单自动填充方法，可以大大提高繁琐的web开发中编辑与详情页的初始化部分的工作，开发人员只需要简单的配置就可以完成以往需要写大量代码的操作。并且在不写JS代码的情况下就可以方便的对各种元素进行赋值，易于维护和扩展。

Method and system for automatically filling form

The invention discloses a method and a system for automatically filling forms. The method and system can achieve the following functions: to support the common web form element assignment; automatic trigger form change event form after the assignment, and flexible configuration; only on a sub element element assignment, assignment module; the date and amount of the custom format support; support multilevel linkage drop-down box value select and assign. Therefore, the embodiment of automatic filling method provided form, can greatly improve the editing and details page initialization part of the web development tedious, developers only need a simple configuration can be completed in the past need to write a lot of code operation. And in the case of not writing JS code can be convenient for a variety of elements assigned, easy to maintain and expand.

【技术实现步骤摘要】

本专利技术涉及页面数据处理
，尤其涉及一种表单自动填充方法和系统。
技术介绍
在日常工作和生活中，经常会遇到反复填写信息相同的网络表单的情况，为了解决反复填写相同信息带来的麻烦，目前，可以通过设置FormFill插件，使用Json串给表单赋值的方法，实现表单自动填充。但是，这种表单自动填充技术无法配置多级下拉框联动，也无法配置时间和金额等的格式化，不能指定赋值元素范围等，导致可以自动填充的信息受到极大的限制，使得用户的体验度差。
技术实现思路
本专利技术的目的在于提供一种表单自动填充方法和系统，从而解决现有技术中存在的前述问题。为了实现上述目的，本专利技术采用的技术方案如下：一种表单自动填充方法，包括如下步骤：S1，编写表单结构，手动给表单添加data-fill属性，并设置data-fill属性值为所述表单在Json字符串中对应的字段值；其中，所述表单包括input元素；S2，调用赋值方法：inputfill.Init(\模块编号\,\Json数据\)，对所述表单的Json字符串进行解析，获取所有包含data-fill属性的元素，并将data-fill属性值填充在所述表单的data-fill属性中。优选地，S2之后还包括步骤：触发所述表单的change事件。优选地，还包括步骤：对表单添加属性data-type，设置表单为日期或金额，并指定方法：varinputfill＝newInputFill(formatDate＝\mm-dd-yy\,normalCent＝2)。优选地，还包括步骤：在所述表单的下拉框元素中添加data-paramid属性，并设置data-paramid属性值为父级表单的data-fill属性值；在所述表单的data-url属性中设置下拉框的取值地址为父级表单，若所述父级表单发生变动，则触发Change事件。优选地，还包括步骤：指定HTML模块最外层元素ID，对不同的HTML模块配置不同的Json字符串。一种表单自动填充系统，包括：web表单元素赋值模块，用于通过调用赋值方法：inputfill.Init(\模块编号\,\Json数据\)，对所述表单的Json字符串进行解析，获取所有包含data-fill属性的元素，并将data-fill属性值填充在所述表单的data-fill属性中，实现web表单元素自动赋值；change事件触发模块，用于表单赋值后，触发所述表单的change事件，实现在表单的change事件中写入相应代码，得到想要的页面效果；多级联动下拉框取值赋值模块，用于在所述表单的下拉框元素中添加data-paramid属性，并设置data-paramid属性值为父级表单的data-fill属性值；然后在所述表单的data-url属性中设置下拉框的取值地址为父级表单，若所述父级表单发生变动，则触发Change事件，实现表单联动功能；日期、金额的格式化模块：用于通过对表单添加属性data-type，设置表单为日期或金额，并指定方法：varinputfill＝newInputFill(formatDate＝\mm-dd-yy\,normalCent＝2)，实现日期、金额的格式化。本专利技术的有益效果是：本专利技术实施例提供的表单自动填充方法和系统，可以实现如下功能：支持常见web表单元素赋值操作；表单赋值后自动触发表单的change等事件，并可灵活配置；只对某一元素内的子元素进行赋值，实现赋值模块化；支持日期、金额的自定义格式化；支持多级联动下拉框取值并赋值选中。因此，采用本实施例提供的表单自动填充方法，可以大大提高繁琐的web开发中编辑与详情页的初始化部分的工作，开发人员只需要简单的配置就可以完成以往需要写大量代码的操作。并且在不写JS代码的情况下就可以方便的对各种元素进行赋值，易于维护和扩展。附图说明图1是本专利技术实施例提供的表单自动填充方法流程示意图。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本专利技术，并不用于限定本专利技术。实施例一如图1所示，本专利技术实施例提供了一种表单自动填充方法，包括如下步骤：S1，编写表单结构，手动给表单添加data-fill属性，并设置data-fill属性值为所述表单在Json字符串中对应的字段值；其中，所述表单包括input元素；S2，调用赋值方法：inputfill.Init(\模块编号\,\Json数据\)，对所述表单的Json字符串进行解析，获取所有包含data-fill属性的元素，并将data-fill属性值填充在所述表单的data-fill属性中。在实际操作中，可以按照如下方法进行实施：汇总工作中常用的表单元素，包括input与span等元素，适用于大多数情况(可扩展)。在编写表单结构时，手动给表单添加data-fill属性，属性值为该表单在Json串中对应的字段值。调用赋值方法(inputfill.Init(\模块编号\,\Json数据\))对包含表单数据的Json字符串进行解析，然后此方法会获取到本模块中所有包含data-fill属性的元素，并根据其data-fill值自动填充数据，大大避免了开发过程中繁琐的代码赋值操作。在本专利技术的一个优选实施例中，S2之后还可以包括步骤：触发所述表单的change事件。表单填充后自动触发表单的change事件，因此可在表单的change事件中写入相应代码，实现想要的页面效果。本专利技术实施例提供的表单自动填充方法，还可以包括步骤：对表单添加属性data-type，设置表单为日期或金额，并指定方法：varinputfill＝newInputFill(formatDate＝\mm-dd-yy\,normalCent＝2)。在实际操作中，可以按照如下方法进行实施：通过对表单添加属性data-type设置表单为日期(date)或金额(money)，然后在声明插件方法时进行指定(varinputfill＝newInputFill(formatDate＝\mm-dd-yy\,normalCent＝2))，从而格式化页面中的日期与金额，使页面更加简洁，避免页面中出现日期或金额格式不一致情况。本专利技术实施例提供的表单自动填充方法，还可以包括步骤：在所述表单的下拉框元素中添加data-paramid属性，并设置data-paramid属性值为父级表单的data-fill属性值；在所述表单的data-url属性中设置下拉框的取值地址为父级表单，若所述父级表单发生变动，则触发Change事件。在实际操作中，可以按照如下方法进行实施：通过在下拉框元素添加data-paramid属性(属性值为父级表单data-fill值)来设置此表单的父级表单，并通过data-url属性设置子下拉框取值地址，当父级表单发生变动时会触发Change事件，此下拉框会自动取值并赋值，从而实现表单联动功能。本专利技术实施例提供的表单自动填充方法，还可以包括步骤：指定HTML模块最外层元素ID，对不同的HTML模块配置不同的Json字符串。上述方法中，通过指定HTML模块最外层元素ID，可实现页面中的模块化赋值，不同模块可配置不同Json字符串，从而各个模块间本文档来自技高网...

【技术保护点】
一种表单自动填充方法，其特征在于，包括如下步骤：S1，编写表单结构，手动给表单添加data‑fill属性，并设置data‑fill属性值为所述表单在Json字符串中对应的字段值；其中，所述表单包括input元素；S2，调用赋值方法：inputfill.Init(模块编号,Json数据)，对所述表单的Json字符串进行解析，获取所有包含data‑fill属性的元素，并将data‑fill属性值填充在所述表单的data‑fill属性中。

【技术特征摘要】
1.一种表单自动填充方法，其特征在于，包括如下步骤：S1，编写表单结构，手动给表单添加data-fill属性，并设置data-fill属性值为所述表单在Json字符串中对应的字段值；其中，所述表单包括input元素；S2，调用赋值方法：inputfill.Init(\模块编号\,\Json数据\)，对所述表单的Json字符串进行解析，获取所有包含data-fill属性的元素，并将data-fill属性值填充在所述表单的data-fill属性中。2.根据权利要求1所述的表单自动填充方法，其特征在于，S2之后还包括步骤：触发所述表单的change事件。3.根据权利要求1所述的表单自动填充方法，其特征在于，还包括步骤：对表单添加属性data-type，设置表单为日期或金额，并指定方法：varinputfill＝newInputFill(formatDate＝\mm-dd-yy\,normalCent＝2)。4.根据权利要求1所述的表单自动填充方法，其特征在于，还包括步骤：在所述表单的下拉框元素中添加data-paramid属性，并设置data-paramid属性值为父级表单的data-fill属性值；在所述表单的data-url属性中设置下拉框的取值地址为父级表单，若所述父级表单发生变动，则触发Change事件。5.根据权利要求1...

【专利技术属性】
技术研发人员：宋长烁，
申请(专利权)人：车智互联北京科技有限公司，
类型：发明
国别省市：北京;11