Vue中如何使用vee-validate表单验证

介绍

这篇文章主要介绍Vue中如何使用vee-validate表单验证,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(丹)结(邓)的内容,各种判断凌乱到飞起,往常使用jquery的验证插件做表单验证方便吧,你也可以在Vue里引入jquery的验证插件(如何引入jquery在我上一篇博文有介绍,点击查看)。但是我们是做Vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate。

我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-validate,做项目时哪有那么多时间让你去熟悉一个插件,肯定先搞定了再说,具体熟悉掌握了解请自行查阅相关资料。

1。npm安装vee-validate: <代码> npm安装vee-validate——保存——注册表=https://registry.npm.taobao.org——详细

2。安装成功后在主。js中引入:

 Vue中如何使用vee-validate表单验证”> <br/> </p> <p> 3。在你要进行表单验证的输入标签加入相关的代码:</p> <p> <img src=

(2) <代码> v-validate=? # 39;要求|电子邮件# 39;“>

(3)名称属性一定要写,跨度标签是展示错误提示的。其实此时已经基本完成表单验证了,只是出现的提示是插件提供的默认提示,比如邮件的错误提示如下图所示,这肯定不是我们想要的,我们需要定义一下。

 Vue中如何使用vee-validate表单验证”> <br/> <img src=Vue中如何使用vee-validate表单验证