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

😉 你好呀，我是爱编程的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' }
  ]
}

这样也有一个弊端，取消弹框this.$refs.formValidateRef.resetFields()后，再次打开弹框默认会验证

最好的方式是将value转换成字符串格式。如果是下拉框的值最好将值全部转换为字符串格式，不然后面关闭弹框是没办法（暂时也没有更好的办法）取消提示错误的。

总结

表单验证会报错，除了没有值会通不过，格式错误，验证规则错误也会通不过，以后遇到这种明明有值，但还一直提示不通过，首先要去考虑是否是数据格式不匹配，或则验证规则不匹配，这个方法通用，不限制于任何框架。