vue3 element-plus from表单验证数组问题

Question

vue3 element-plus from表单验证数组，当鼠标失去焦点时，message并没有消失。

html部分
<el-form-item label="广告头图" prop="adBanner">
  <user-uploader
  text-color="black"
  label="图片上传"
  v-model:list="ruleForm.adBanner"
  />
</el-form-item>

ts部分
const ruleForm = reactive({
  adBanner: [],
});

const rules = reactive<FormRules>({
  adBanner: [
    { type: 'array',required: true, message: '请上传图片', len: 1 ,trigger: 'blur'},
  ],
});

1. 首次没上传图片时，点击校验
   提示我请上传图片，没问题。
   

   

2. 上传一张图片
   此时已经上传了一张图片，当我鼠标焦点时，是不是应该校验通过，message消失呢
   

   

3. 此时手动触发校验
   手动触发校验后，message消失
   

   

猜测

我猜测校验规则没有问题，关键是在trigger属性上，当使用‘blur’时，我鼠标失去焦点，并没有触发校验规则 ，后来‘change’ 我都试了也时不好用的。 然后我换了一个普通的from，只是一个普通的input框，对string类型校验时，blur好用。

预期

想要的效果就是当我上传图片后，失去焦点时，触发校验，message消失
谢谢

Answer 1

• 这篇文章：vue3 使用element-plus 表单校验 也许有你想要的答案，你可以看看