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中的方法

0
微信收款码
微信收款码