526互联

VUE-Antd开发，validate规则校验第一次为空，后面无论怎么输入都显示不可为空

发布时间 2023-04-09 14:05:20作者: ouluy

问题描述

场景是修改弹窗，给数据赋值，其中数据有String 和 Array

第一次操作 多选框（数据类型是Array）输入为空并在输入框外点击，显示不可为空。

之后无论怎么输入都显示不可为空。（当你控制台输出校验value时，会发现里面的值永远是第一次操作的数据，而非为空）

可能原因

1️⃣rules 定义出错

比如 rules没有定义type是array格式，默认是String

或者 trigger只定义了blur，没定义change

尽可能的使用自定义的格式校验，问题基本出在Array类型上，String类型范围比较少遇到这种情况

解决代码：

data (){
  function validateType (rule, value, callback) {
      if (value.length < 1) {
        callback(new Error('类别不能为空'))
      } else {
        callback()
      }
    }
  return {
      form：{ 
          type：[]
      }
      rules: {
          type: [{ type: 'array',validator: validateType, trigger: ['blur','change'] }],//validateType是自定义的
      },
  }
}

2️⃣在第一次操作前有不正当的赋值

这里String类型赋值不会有啥问题（神奇，希望有大佬解答）

但是Array类型直接=赋值，会有问题，需要$set赋值

错误代码：

this.type = ['1','2']

解决的正确代码：

this.$set(this.form,'type',['1','2'])

总结

在validate校验规则的时候，当遇到数组的时候需要特别注意和规范，不然很可能造成空值也会逃过校验规则的情况