场景

. 使用vue开发表单组件的时候，肯定会遇到表单元素检查的功能; 需要提供实时的检查 && 提示

分析

baianat/vee-validate(github)

支持语言的本地化
实时提供字段提示

例子

<span v-show="errors.has('body')">{{ errors.first('body') }}</span>
<textarea class="form-control" placeholder="私信内容" rows="3" data-vv-as="私信内容"  data-vv-name="body" v-validate.initial="'required'" v-model="body" v-if="!success_status"></textarea>

安装

引入laravel5.5

npm install vee-validate —save-dev
修改 resources/assets/js/app.js

import VeeValidate,{ Validator } from 'vee-validate';
//  组件内地化
Validator.localize('zh', zh);
Vue.use(VeeValidate);

用法

用法很简单

规则限定

data-vv-name=”body” 必选参数 声明表单元素的名字
v-validate.initial=“‘required|email’” 必选参数 声明使用的规则
data-vv-as=”私信内容 可选参数 字段提示的别称
提示展示
<span v-show="errors.has('body')">{{ errors.first('body') }}</span>