Vuejs 使用 vee-validate 进行表单验证

JellyBool

JellyBool

如果你使用 Laravel 加 Vuejs 技术栈来开发 Web 应用的话,其实你会发现,这两个框架直接有很多思想相通的地方,比如本文要介绍的这个表单验证组件 vee-validate ,这个组件总结为一句话就是:在前端验证里面实现了 laravel 的表单验证,这种实现是指,语法和思想的实现。我们看看看

安装 vee-validate

直接可以使用 npm 来安装:

npm install vee-validate --save

使用

很简单的,在 Laravel 项目的 resources/assets/js/app.js 中添加:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

在组件的表单中使用:

<input v-validate="'required|email'" type="text" name="email">

你看,这写法跟 laravel 的验证是不是一模一样?或者你也可以这样:

<input 
v-validate="{ rules: { required: true, email: true } }" 
type="text" 
name="email">

再或者,你可以这样:

<input 
type="text" 
name="email" 
v-validate.initial="'required|email'" 
:class="{'form-control': true, 'is-danger': errors.has('email') }" 
placeholder="Email" />

这个例子注意的是,我们通过 :class 绑定 css 的类,里面使用了 errors.has('email') 来判断 email 验证是否通过。这里能直接使用 errors 来判断就是因为我们在 app.js 添加Vue.use(VeeValidate)

如何获取错误提示

Easy ! 就像 laravel 那样:

<div 
v-show="errors.has('email')"
 class="help is-danger">
{{ errors.first('email') }}
</div>

有没有很像!直接 errors.first('email') 就可以获取到 email 验证的错误信息,而且这个验证信息的显示与否都是实时的!

最后

写这个主要是因为我最近在升级 Laravist ,全面改版之后使用了很多 Vuejs 来重写,其中就有用到 vee-validate 来做验证。使用感觉非常不错,就此推荐一波。

本文由 JellyBool 创作, 转载和引用遵循 署名-非商业性使用 2.5 中国大陆 进行许可。

共有 5 条评论

RoseEnd
修改的评论也不能少于六个字哦!
RoseEnd
修改的评论也不能少于六个字哦!
JellyBool 回复 RoseEnd
修改的评论也不能少于六个字哦!
乔泓恺-Jone
修改的评论也不能少于六个字哦!
Lange0314
修改的评论也不能少于六个字哦!
carsonlius
修改的评论也不能少于六个字哦!