Vue2.0表单验证插件vee-validate的使用


官方文档:http://vee-validate.logaretm.com

github:https://github.com/logaretm/vee-validate

maxresdefault.jpg

  • 安装

npm install vee-validate@next --save

  • 引用和设置

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
    locale: "zh",
    dictionary: {
        zh: {
            messages: messagesZH
        }
    }
});

下载个中文提示包,并在选项中进行配置。

  • 使用

<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
    <input type="password" class="form-control" v-model="password_confirmation"  name="password_confirmation" v-validate data-vv-rules="required|confirmed:password" data-vv-as="重复密码" placeholder="重复密码">
</div>

详细规则请看:http://vee-validate.logaretm.com/rules#available-validations

  • ajax返回后使用

官方文档中并没有提及到使用ajax返回之后的使用方法,但是我们大多数业务都需要提交到服务器进行验证后再返回提示是否有错,所以进过一番钻研,把errorbag打印出来后发现,里面的error对象就是存储错误消息的地方,所以我们只需要把错误消息添加到这个对象里面即可。

this.errors.errors.unshift({field:key,msg:data.msg[key][0],scope:"__global__"});


本文 暂无 评论

Top