vue验证 vuelidate.js

这几天研究了使用vuelidate进行验证，主要是循环数据如何进行验证。

vuelidate验证

1.安装及配置参考网站
https://vuelidate.js.org/#sub-basic-usage
2.具体例子
①<input>的验证 v-model绑定 v-model="name"

export default {
  data() {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    }
  },
  methods:{
  //点击按钮提交
   submitForm:function(){
   this.$v.$touch();
   //如果验证未通过，则是true,验证通过是false
   if(this.$v.$invalid){
   return;
  }
  ......
}

获取验证通过与否的信息

//获得单个的验证信息是否通过,与validations中定义的方法名保持一致
this.$v.name.required；
this.$v.name.minLength
//获得所有的信息是否通过
this.$v.name.$invalid;

②v-for验证 (同样适用于未绑定v-model的场合)
radio验证

export default {
  data() {
    return {
    //也可以定义一个数组
      radioId: ''
    }
  },
  validations: {
    radio: {
      required
    }
  },
  computed:{
    radio:{
      get() {
        reutn this.radioId;
      },
      set(value){
        this.radioId = value;
      }
    }
  }，
  methods:{
  initAll:{
    for(let i=0 ,d; (d=data[i]; i++  )){
    .......
    //被选中的id
      this.radioId = d.id;
    }
  }，
  changeRadio(params){
  //选中radio的id  ，
    this.radioId  = params.id
  },
  //点击按钮提交
   submitForm:function(){
   this.$v.$touch();
   //如果验证未通过，则是true,验证通过是false
   if(this.$v.$invalid){
   return;
  }
  ......
}

③v-for循环生成数据的时候，

export default {
  data() {
    return {
      userData: []
    }
  },
  validations: {
    userInfo: {
      $each:{
        name:{
          required
        }
      },
    }
  },
   computed:{
    userInfo:{
      get() {
        reutn this.userData;
      },
      set(value){
        this.userData= value;
      }
    }
  }，
  methods:{
  //点击按钮提交
   submitForm:function(){
   this.$v.$touch();
   //如果验证未通过，则是true,验证通过是false
   if(this.$v.$invalid){
   return;
  }
  ......
}