vue.js表单验证插件(vee-validate)的使用教程详解

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

 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({
// 省略
});

errors.first(‘field') 显示字段field的第一个出错信息
errors.collect(‘field') 显示字段field的所有出错信息
errors.has(‘field') 判断fileds字段是否检验有误
erros.all() 显示所有的出错信息
errors.any() 判断是否有错误

this.$validator.validate(‘field'); 校验单个字段
this.$validator.validateAll(); 表单整体校验

 this.$validator.validateAll().then(function(result) {
  if (result) {
  //成功操作
  } else {
  // 失败操作
  }
 })