综述
名称：vee-validate
用途：简单的 Vue.js 表单验证插件
官网：地址
github:地址
特别提示
配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样
插件既可以应用于SPA也可以应用于多页面，通用性强
安装
单页安装
npm install vee-validate --save浏览器安装
<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>引入项目
单页引入
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);浏览器引入
<script src="path/to/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
<script>
Vue.use(VeeValidate); // good to go.
</script>基础使用
<div class="column is-12">
<label class="label" for="email">Email</label>
<p :class="{ 'control': true }">
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" class="help is-danger"></span>
</p>
</div>代码解析
| v-validate=”‘required | email’” |
v-validate 是由该插件提供的指令 作用于html上
| “‘required | email’” 字段验证的规则，注意双引号之内必须有单引号，多个规则之间用 | 连接 |
errors.first(‘email’) email字段验证不通过时显示相关联的提示信息
验证规则
地址
进一步学习
本地化
使用本地化功能可以让错误提示换成中文
单页中使用
浏览器中使用
var dict = {
zh_CN: {
messages: {
required: function(field){
return '请输入' + field ;
},
confirmed: function(field) {
return '两次输入的密码不一致';
}
},
attributes: {
OldPassword: '旧密码',
NewPassword: '新密码',
ConfirmNewPassword: '确认密码',
}
}
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
