当前位置：首页 > article >正文

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

article 2025/1/12 1:55:37

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