[发明专利]一种界面验证vue组件的方法、装置、设备及存储介质

说明书

本发明公开了一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质，包括：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v‑validate，通过该指令获取所述vue组件的html元素，其中，所述指令v‑validate通过vue.directive()定义；通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。本发明所提供的方法、装置、设备以及计算机可读存储介质，实现了vue组件的高效率检测。

技术领域

本发明涉及前端开发技术领域，特别是涉及一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质。

背景技术

随着前端开发技术的越发成熟，vue框架越来越受欢迎，因此前端开发技术越来越多采用了vue框架。但是不管什么框架都离不开界面中的验证，但是由于前端技术都是针对html中的元素进行的验证，而vue框架都是组件化的，组件化顾名思义就是一个模板这个模板生成了很多的html，从而导致如何对vue的组件进行验证成为了较为困难的问题。

综上所述可以看出，如何实vue组件的验证是目前有待解决的问题。

发明内容

本发明的目的是提供一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质，以解决现有技术中无法实现vue组件的验证功能的问题。

为解决上述技术问题，本发明提供一种界面验证vue组件的方法，包括：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。

优选地，还包括：利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化。

优选地，所述述利用vue的watch监听函数监听所述vue组件的数据变化后包括：

当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证。

优选地，所述当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证后包括：

完成所述变化数据的验证后，将所述变化数据中的错误信息展示至用户。

优选地，所述通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息包括：

将所述method函数中获取数据的函数绑定至所述html元素，以便利用所述获取数据的函数获取所述vue组件的数据信息。

本发明还提供了一种界面验证vue组件的装置，包括：

接收模块，用于当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；

获取模块，用于通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；

验证模块，用于利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。

优选地，还包括：