el-form校验项为数组&&组件是自定义组件校验遇到的坑

情况说明

• el-form校验项为数组
• 自定义组件（非elementUI表单组件）

<el-form-item prop="fileList" :rules="rules">
  <!-- 文件上传自定义组件，接收是一个数组类型的集合 -->
  <ty-upload :fileList.sync="form.fileList" />
</el-form-item>

rules: [{ required: true, message: "请选择", trigger: "change" }],

问题说明

• 此时校验不生效
• 自定义校验validator也无效

解决办法

 watch: {
   // 校验主动处理
   "form.fileList"(val) {
      this.$nextTick(() => {
        this.$refs?.form?.validateField("fileList");
      });
   },
 },

思考：当我们开`el-select的multiple时，v-model绑定的值也是数组，为什么可以正常触发校验？

因为在el-select组件的源码中，他主动触发了el-form的校验，但我们组件内部是没有触发的

最后提一下自定义校验，用于一些校验一些复杂的值

validator的参数有：(rule, value, callback)，前三个比较重要。

• rule：指向该条规则对象。
• value：新的值，用于参与运算、对比。
• callback：执行回调，使用方法是：callback(‘…’);。
• 如果不传参：表示验证通过，一般不必专门强调。
• 如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。比如callback(‘内层错误提示’);跟message: '外层错误提示’同时存在，则会提示：外层错误提示。

data() {
  const name = (rule, value, callback) => {
    console.log(rule);
    console.log(value);
    console.log(callback);
    if (this.oldName === value) {
      callback(new Error("新名字不能和旧名字一致"));
    } else {
      callback();
    }
  };
  return {
    rules: {
      name: [
        { required: true, trigger: "blur", message: "请再次输入新名字" },
        { required: true, validator: name, trigger: "blur" },
      ],
    },
  };
},