解决view-ui-plus 中表单验证不通过问题，select 组件开启multiple模式总是提示错误，即使不验证也提示，有值也验证失败

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/144268435

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

错误场景一

报错描述

在使用view-ui-plus 的 Select组件开启多选后验证不通过，明明有选项报错，即使去掉验证也报错。
在这里插入图片描述

错误代码展示

const ruleValidate = reactive({
  targetSys: [{ required: false, message: '请选择', trigger: 'change' }]
});

错误原因分析

1. 确保 `v-model` 绑定的是一个数组

2. 设置正确的验证规则

3. 检查触发验证的方式是否正确

检查触发验证的方式是否正确，对于 Select 组件来说，通常是 change 事件

4. 检查 `handleSelect` 方法不会干扰验证

检查你的 handleSelect 方法是否有可能改变 formValidate.targetSys 或者其他可能影响验证状态的行为。确保它只做必要的事情，并且不会意外地清除或修改绑定的数据。

5. 确认 `targetSysList` 数据源无误

确保 targetSysList 提供了正确的选项数据，而且每个 Option 的 value 和 label 都是有效的。

解决方案

经过分析后发现是验证规则问题，做一下修改：

rules: {
  targetSys: [
    { required: true, type: 'array', message: '请选择至少一项', trigger: 'change' },
    { type: 'array', min: 1, message: '最少选择一项', trigger: 'change' }
  ]
}

设置 type: 'array' 来指定这是对数组类型的验证，并设置 min 属性来规定最小长度。

错误场景二

错误描述

TreeSelect组件明明选择了，但是校验还是不通过
在这里插入图片描述
错误代码展示：

<FormItem label="文件夹" prop="pid">
  <TreeSelect v-model="formValidate.pid" :data="folderList" />
</FormItem>

formValidate: {
  name: '',
  pid: null,
  description: ''
},
ruleValidate: {
  name: [
    { required: true, message: `请输入`, trigger: 'blur' }
  ],
  pid: [
    { required: true, message: `请选择`, trigger: 'change' }
  ]
}

错误原因分析

TreeSelect是按照字符串格式进行验证的，这里数据中的value是数字格式，报错是因为格式不匹配。

解决方案

声明type: 'number'

formValidate: {
  name: '',
  pid: null,
  description: ''
},
ruleValidate: {
  name: [
    { required: true, message: `请输入`, trigger: 'blur' }
  ],
  pid: [
    { required: true, type: 'number', message: `请选择`, trigger: 'change' }
  ]
}