$ npm install vuelidate --save

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
 mixins: [validationMixin],
 validation: { ... }
})

const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')

import { required,minLength,between,email } from 'vuelidate/lib/validators'

 data(){
  return{
    newUser: {
      name:'',
      email:'',
      password:'',
      confirm_pwd:''
    },
  }
},

validations: {
  newUser:{
    name: {
      required,
      minLength: minLength(2)
    },
    email: {
      required,email
    }
  }
},

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.name.$error }">
<label class="control-label">用户名</label>
<el-input
    placeholder="请输入你的用户名"
    v-model.trim="newUser.name"
    @input="$v.newUser.name.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.name.required">用户名不能为空</span>
<span class="form-group__message" v-if="!$v.newUser.name.minLength">用户名不能太短</span>

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.email.$error }">
<label class="control-label">邮箱</label>
<el-input
    placeholder="请输入你的邮箱"
    v-model.trim="newUser.email"
    @input="$v.newUser.email.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.email.required">邮箱不能为空</span>
<span class="form-group__message" v-if="!$v.newUser.email.email">请填写正确的邮箱格式</span>

<div>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatA.$error }">
  <label class="form__label">Flat A</label>
  <input class="form__input" v-model.trim="flatA" @input="$v.flatA.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatA.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatB.$error }">
  <label class="form__label">Flat B</label>
  <input class="form__input" v-model.trim="flatB" @input="$v.flatB.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatB.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.forGroup.nested.$error }">
  <label class="form__label">Nested field</label>
  <input class="form__input" v-model.trim="forGroup.nested" @input="$v.forGroup.nested.$touch()">
 </div><span class="form-group__message" v-if="!$v.forGroup.nested.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.validationGroup.$error }"></div><span class="form-group__message" v-if="$v.validationGroup.$error">Group is invalid.</span>
 <pre>validationGroup: {{ $v.validationGroup }}</pre>
</div>

.form-group__message{
  display: none;
  font-size: .95rem;
  color: #CC3333;
  margin-left: 10em;
  margin-bottom: 12px;
}
.form-group--error+.form-group__message {
  display: block;
  color: #CC3333;
}

.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
  border-color: #CC3333;
}

validations: {
  flatA: { required },
  flatB: { required },
  forGroup: {
   nested: { required }
  },
  validationGroup: ['flatA', 'flatB', 'forGroup.nested']
}

name: {
  required,
  minLength: minLength(4),
  async isUnique (value) {
    if (value === '') return true
    const response = await fetch(`http://localhost:8000/api/unique/name/${value}`)
    return Boolean(await response.json())
  }
},

//用户验证路由
Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () {
  Route::get('/name/{value}',function(Request $request,$value){
    if($value==="gavin"){
      return response()->json(false);
    }
    return response()->json(true);
  });
});

export default value => {
 if (Array.isArray(value)) return !!value.length

 return value === undefined || value === null
  ? false
  : !!String(value).length
}