[发明专利]基于Vue.js的表单校验方法及其系统

说明书

本发明公开了一种基于Vue.js的表单校验方法及其系统，方法包括：创建表单元素组件；预设与所述表单元素组件对应的校验规则信息；若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。通过将表单元素、校验规则和错误信息关联起来，能够极大提高表单校验的性能；并且几乎不用编写html代码，只需要定义简单的Vue.js对象，就能够创建表单，并完成表单的校验功能，使得代码易于维护，且保持扩展性；同时能够自定义表单元素组件和校验规则，极大提高开发效率。

技术领域

本发明涉及校验技术领域，尤其涉及一种基于Vue.js的表单校验方法及其系统。

背景技术

目前常用的表单校验大都是基于jQuery。市面上有一款基于Vue.js的vue-validator(vue验证器)。vue-validator核心实现方案是将规则绑定在Vue.js实例上，从Vue.js实例上取的规则进行校验和报错。

jQuery是DOM操作的库，而Vue.js是基于数据驱动的，Vue.js的性能和组件化能力都强于jQuery。vue-validator它支持绝大多表单校验场景，但是表单元素、错误信息、以及校验规则都是独立分开的。在管理后台系统中，大量增删改查的业务场景还是需要编写大量的html的代码，复用性还是稍有不足。

发明内容

本发明所要解决的技术问题是：提出一种可扩展、易用性强的基于Vue.js的表单校验方法及其系统。

为了解决上述技术问题，本发明采用的技术方案为：一种基于Vue.js的表单校验方法，包括：

创建表单元素组件；

预设与所述表单元素组件对应的校验规则信息；

若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。

本发明还涉及一种基于Vue.js的表单校验系统，包括：

第一创建模块，用于创建表单元素组件；

预设模块，用于预设与所述表单元素组件对应的校验规则信息；

校验模块，用于若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。

本发明的有益效果在于：通过将表单元素、校验规则和错误信息关联起来，能够极大提高表单校验的性能；并且几乎不用编写html代码，只需要定义简单的Vue.js对象，就能够创建表单，并完成表单的校验功能，使得代码易于维护，且保持扩展性；同时能够自定义表单元素组件和校验规则，极大提高开发效率。

附图说明

图1为本发明一种基于Vue.js的表单校验方法的流程图；

图2为本发明实施例一的方法流程图；

图3为本发明实施例二的方法流程图；

图4为本发明实施例二步骤S102的方法流程图；

图5为本发明实施例二步骤S104的方法流程图；

图6为本发明实施例二的架构示意图；

图7为本发明一种基于Vue.js的表单校验系统的结构示意图；

图8为本发明实施例四的系统结构示意图。

标号说明：

100、表单元素组件；200、表单容器组件；300、表单元素适配器；

400、表单校验插件；