奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

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

时间:2018-01-25 10:44来源:未知 作者:admin
安装 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

安装 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 验证的错误信息,而且这个验证信息的显示与否都是实时的!

(责任编辑:admin)
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路