基于Vue.js的表单校验方法及其系统技术方案

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

Form checking method and system based on Vue.js

The invention discloses a form validation method based on Vue.js method and its system, includes: creating a form element component; presupposition checking rules information corresponding to the form element component; if a form element component input value change, check information according to the rules of a table element corresponding to the component. The form elements component input value checking. The form elements, validation rules and error information associated with them, can greatly improve the performance of the check form; and almost do not have to write HTML code, only need to define a simple Vue.js object, you can create a form, and complete the check function form, making the code easier to maintain, and keep the extension; at the same time be able to customize the form element component and check rules, greatly improve development efficiency.

【技术实现步骤摘要】
基于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、表单校验插件；1、第一创建模块；2、预设模块；3、校验模块；4、第一显示模块；5、第二创建模块；6、注册模块；7、第一实例化模块；8、第二实例化模块；9、比对模块；10、第二显示模块；21、创建单元；22、预设单元；23、第一保存单元；24、第二保存单元；31、判断单元；32、获取单元；33、校验单元；34、发送单元。具体实施方式为详细说明本专利技术的
技术实现思路
、所实现目的及效果，以下结合实施方式并配合附图详予说明。本专利技术最关键的构思在于：基于Vue.js，组件化表单元素，整合表单和表单元素校验。名词解释：Vue.js：一套构建用户界面的渐进式框架。组件：组件是Vue.js的支持的功能，是整合了UI和功能的一个模块。插件：Vue.js支持插件功能，支持给组件注册属性和方法。属性入参：Vue.js组件提供的props功能，父组件用来传递数据的一个自定义属性。表单校验插件：在Vue.js中注册的一个支持表单校验的插件。表单元素组件：表单中需要被校验的元素，常用有input组件、radio组件。表单容器组件：包裹所有表单元素的组件，通常是form组件。表单元素适配器：将所有的表单元素组件的属性入参以及公有的方法统一，使得所有表单组件对外暴露的接口保持一致。请参阅图1，一种基于Vue.js的表单校验方法，包括：创建表单元素组件；预设与所述表单元素组件对应的校验规则信息；若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。从上述描述可知，本专利技术的有益效果在于：能够极大提高表单校验的性能；且代码易于维护，扩展性强；同时能够自定义表单元素组件和校验规则，极大提高开发效率。进一步地，所述“根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”之后，进一步包括：若所述输入值不符合校验规则，则显示对应所述校验规则信息的错误提示信息。由上述描述可知，通过显示错误提示信息，提示用户重新输入。进一步地，所述“创建表单元素组件”之后，进一步包括：创建表单容器组件和表单元素适配器；将所述表单元素组件通过所述表单元素适配器注册到所述表单容器组件上；根据表单容器组件中预设的配置信息，实例化所述表单容器组件；根据表单元素组件中预设的配置信息，实例化所述表单元素组件。进一步地，所述“预设与所述表单元素组件对应的校验规则信息”具体为：创建表单校验插件；预设与表单元素组件对应的校验规则信息，得到关联关系；将所述关联关系保存至所述表单校验插件中；将所述校验规则信息保存至所述表单容器组件中。进一步地，所述“若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”具体为：判断一表单元素组件的输入值是否发生改变；若是，则表单校验插件根据所述关联关系，从表单容器组件中获取与所述一表单元素组件对应的校验规则信息；表单校验插件根据所述对应的校验规则信息，对所述一表单元素组件的输入值进行校验，得到校验结果；表单校验插件将所述校验结果发送至表单容器组件。进一步地，所述“表单校验插件将所述校验结果发送至表单容器组件”之后，还包括：表单容器组件将所述校验结果与预设的符合校验规则的结果进行比对，判断是否一致；若不一致，则显示对应所述校验规则信息的错误提示信息。由上述描述可知，将表单校验系统模块化为表单元素组件、表单容器组件、表单元素适配器和表单校验插件，通过上述组件和插件之间的信息交互，实现响应式、可扩展、易用性强的表单校验功能。请参照图7，本专利技术还提出一种基于Vue.js的表单校验系统，包括：第一创建模块，用于创建表单元素组件；预设模块，用于预设与所述表单元素组件对应的校验规则信息；校验模块，用于若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。进一步地，还包括：第一显示模块，用于若所述输入值不符合校验规则，则显示对应所述校验规则信息的错误提示信息。进一步地，还包括：第二创建模块，用于创建表单容器组件和表单元素适配器；注册模块，用于将所述表单元素组件通过所述表单元素适配器注册到所述表单容器组件上；第一实例化模块，用于根据表单容器组件中预设的配置信息，实例化所述表单容器组件；第二实例化模块8，用于根据表单元素组件中预设的配置信息，实例化所述表单元素组件。进一步地，所述预设模块包括：创建单元，用于创建表单校验插件；预设单元，用于预设与表单元素组件对应的校验规则信息，得到关联关系；第一保存单元，用于将所述关联关系保存至所述表单校验插件中；第二保存单元，用于将所述校验规则信息保存至所述表单容器组件中。进一步地，所述校验模块包括：判断单元，用于判断一表本文档来自技高网...

【技术保护点】
一种基于Vue.js的表单校验方法，其特征在于，包括：创建表单元素组件；预设与所述表单元素组件对应的校验规则信息；若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。

【技术特征摘要】
1.一种基于Vue.js的表单校验方法，其特征在于，包括：创建表单元素组件；预设与所述表单元素组件对应的校验规则信息；若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验。2.根据权利要求1所述的基于Vue.js的表单校验方法，其特征在于，所述“根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”之后，进一步包括：若所述输入值不符合校验规则，则显示对应所述校验规则信息的错误提示信息。3.根据权利要求1所述的基于Vue.js的表单校验方法，其特征在于，所述“创建表单元素组件”之后，进一步包括：创建表单容器组件和表单元素适配器；将所述表单元素组件通过所述表单元素适配器注册到所述表单容器组件上；根据表单容器组件中预设的配置信息，实例化所述表单容器组件；根据表单元素组件中预设的配置信息，实例化所述表单元素组件。4.根据权利要求3所述的基于Vue.js的表单校验方法，其特征在于，所述“预设与所述表单元素组件对应的校验规则信息”具体为：创建表单校验插件；预设与表单元素组件对应的校验规则信息，得到关联关系；将所述关联关系保存至所述表单校验插件中；将所述校验规则信息保存至所述表单容器组件中。5.根据权利要求4所述的基于Vue.js的表单校验方法，其特征在于，所述“若一表单元素组件的输入值发生改变，则根据所述一表单元素组件对应的校验规则信息，对所述一表单元素组件的输入值进行校验”具体为：判断一表单元素组件的输入值是否发生改变；若是，则表单校验插件根据所述关联关系，从表单容器组件中获取与所述一表单元素组件对应的校验规则信息；表单校验插件根据所述对应的校验规则信息，对所述一...

【专利技术属性】
技术研发人员：刘德建，念秦，王国栋，方振华，郭玉湖，
申请(专利权)人：福建天泉教育科技有限公司，
类型：发明
国别省市：福建,35