vuetify 两种表单验证方式

vuetify的验证，官方好像没有多说怎么弄，只有一个单一的例子，并且是丢在数组中的，此时我们是没办法通过this拿到vue的上下文的，这样做就会导致很多自定义的办法无法做到。

这里我们就了解一下两个绑定表单验证的方法：

官方

<v-text-field v-model="user.pass" label="密码：" name="pass" type="password" :rules="rules.pass" outlined clearable></v-text-field>

rules绑定一个data中的属性

data: ()=>({
  user:{
    pass:""
  },
  rules:{
    pass:[
      v => !!v || "密码必填",
      v => v.length >= 6 || "密码不能低于6位",
      v => v.search(/\s/) === -1 || "不能有空格"
    ]
  }
})

这是最基本的绑定方式，但是，假如我要做一个二次确认密码的input怎么办？

绑定自定义方法

自定义方法必须return出一个值，否则就会报错。

<v-text-field v-model="user.affirmPass" label="确认密码：" name="affirmPass" type="password" :rules="[affirmPass]" outlined clearable></v-text-field>

methods:{
   affirmPass(val) {
      if (val !== this.user.pass) {
        return "两次密码不一致";
      }
      return true;
    },
}

这样就可以了。

相对来说还是好理解的，就是绑定时候直接写个数组，数组里面放methods中的方法