element-plus多选框表单验证有值却不通过

这种情况出现提示肯定是不合理的，这时候需要查看表单的各种配置是哪里出了问题。

1.可以先确认以下几点：

• el-form标签上是否绑定好了model，rules，ref三个值；
• 以上的三个是否在script里进行了配置；
• el-form-item标签中prop值的设置（需要和rules和model配置的值对应，最好是都用相同的单词避免出错）；
• rules配置是否合理；

暂时只想到了这么多，表单验证我经常会粗心大意，

2.这里我只把和账号角色相关的验证单独例出来，避免混淆

template表单

 <el-form :model="state.accountForm" ref="accountFormRef" :rules="state.accountFormRules" label-width="100px" size="default">
        <el-form-item label="账号角色:" prop="role">
          <el-checkbox-group v-model="state.accountForm.sysRoles">
            <el-checkbox label="超级管理员" value="超级管理员">超级管理员</el-checkbox>
            <el-checkbox label=普通角色 value="普通角色">普通角色</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
</el-form>

 script代码块

 const state = reactive({
//model表单对应绑定的值
    accountForm: {
      sysRoles: []
    },
//表单规则
    accountFormRules: {
      role: {type: 'array',required: true, message: '请选择角色', trigger: 'change'}
    }
  })

  const accountFormRef = ref()

可以看到我的两个单词没有对应上，跟双向绑定相关用的是sysRoles，跟规则相关用的是role，因为之前觉得rules和prop对应上就可以了，没想到就是这个影响了表单验证，所以我把跟账号角色有关的都改成了role，表单提示就没有出错了

更改后的代码

 <el-form :model="state.accountForm" ref="accountFormRef" :rules="state.accountFormRules" label-width="100px" size="default">
        <el-form-item label="账号角色:" prop="role">
          <el-checkbox-group v-model="state.accountForm.role">
            <el-checkbox label="超级管理员" value="超级管理员">超级管理员</el-checkbox>
            <el-checkbox label=普通角色 value="普通角色">普通角色</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
</el-form>

 const state = reactive({
//model表单对应绑定的值
    accountForm: {
      role: []
    },
//表单规则
    accountFormRules: {
      role: {type: 'array',required: true, message: '请选择角色', trigger: 'change'}
    }
  })

  const accountFormRef = ref()