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

Posted 2021-05-01 编程新一

如果你使用 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 来做验证。使用感觉非常不错，就此推荐一波。