【element-ui】elementUI多选下拉框怎么验证？

Z时代
2024-01-10
分类：技术分享

弹窗组件中的多选下拉框选中了值还是提示验证失败信息，但实际上点确认验证是成功的，如下图：

页面代码

<el-form-item label="角色：" prop="roleIdList">
    <el-select v-model="editForm.roleIdList" multiple placeholder="请选择">
        <el-option v-for="item in roleData" :key="item.key" :label="item.value" :value="item.key"/>
    </el-select></el-form-item>

验证代码

const roleValid = function(rule, value, callback) {
    if (value.length === 0) {
        callback(new Error('角色不能为空'))
    } else {
        callback()
    }
}
addRules: {
    roleIdList: [
        { required: true, validator: roleValid }
    ]}

还有直接不用validator，直接验证也是一样的

roleIdList: [
    { type: 'array', required: true, trigger: 'change', message: '角色不能为空' }]

回答：

我自己写了个例子，没有出现你的这个问题，你对比检查下代码

<template>
  <el-form :model="ruleForm" :rules="rules"  ref="ruleForm">
    <el-form-item label="角色：" prop="roleIdList">
      <el-select v-model="ruleForm.roleIdList" multiple placeholder="请选择">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
        <el-option label="区域三" value="guangzhou"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        roleIdList: []
      },
      rules: {
        roleIdList: [
          {
            type: 'array',
            required: true,
            trigger: 'change',
            message: '角色不能为空'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}</script>