详解vuelidate 对于vueJs2.0的验证解决方案

@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>

每个人可以都不一样 官方文档上也给出了demo:

<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>

我们先这样举例 值得注意的是我们需要去知道他的$v.name里面的内容

也就是 $invalid $dirty $error $pending $each 这个value

特别的注意 $error里的解释：It is a shorthand to $invalid && $dirty

也就是一个与的组合 你可以去试着改变这两者的值 再去看$error的值

当然还有两个重要的方法: $touch $reset 上面也有实例 说简单点就是设置这个以及子节点的$dirty 为true或者false

而设置这个$dirty 再结合 $invalid就可以判断验证成功与否