这篇文章主要介绍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中引入:
代码,跨度标签通过错误的几个方法来进行显示隐藏和提示错误,这里列出几个常用的错误方法:errors.first(& # 39;场# 39;):当前领域的第一个错误信息,字符串errors.collect(& # 39;场# 39;):当前领域的所有错误信息,数组列表errors.has(& # 39;场# 39;):当前提交是否有错误,布尔值errors.all():当前表单所有错误,数组列表errors.any():当前表单是否有任何错误,布尔值
(2) <代码> v-validate=? # 39;要求|电子邮件# 39;“> 代码有两个验证,一个是为空验证,一个是输入错误验证,你想要多少种验证就在这里写,比如你要限制字数,那就加多个马克斯,即v-validate=? # 39;需要邮件| |马克斯:9 & # 39;“。
(3)名称属性一定要写,跨度标签是展示错误提示的。其实此时已经基本完成表单验证了,只是出现的提示是插件提供的默认提示,比如邮件的错误提示如下图所示,这肯定不是我们想要的,我们需要定义一下。