element ui 下拉列表验证无效的问题（通俗易懂）-实例讲解

在写vue 项目的时候遇到以下问题

1.表单校验中，el-input前面有星号*而el-select前面无星号*,证明校验无效，如下图所示

相关代码如下

  <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
    <el-input v-model="addForm.tel" style="width: 350px"></el-input>
  </el-form-item>
  
  <el-form-item label="学院" :label-width="formLabelWidth"  prop="instid">
      <el-select v-model="addForm.instid" placeholder="请选择学院">
        <el-option
          v-for="item in instArray"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
  </el-form-item>

 ruleAdd:{
	tel: [{
       required: true,
       message: '请输入电话',
       trigger: 'blur'
    }],
    instId: [{
       required: true,
       message: '请选择学院',
       trigger: ['blur','change']
    }],
}

问题总结：原因是el-form-item中的prop属性值和校验规则中的不一致导致
上面例子中一个是instid 一个是instId所以校验无效，不显示星号

2.el-select不像el-input校验那样明了，因为el-input在失去焦点的时候就会提示校验规则而下拉框不会，如下，性别在不选的情况下没有反应

控制台只有两个输出

大家不要慌，这个不是问题，我们通过提交表单的方式来判断是否校验就可以了
如下图校验成功

3.接着问题2说，点击立即添加按钮之后重新选择下拉框，校验无效，如下图

相关代码如下：

<el-form-item label="性别" :label-width="formLabelWidth"  prop="sex" >
  <template>
    <el-select v-model="addForm.sex1" placeholder="请选择">
      <el-option
        :key="1"
        label="男"
        :value="1">
      </el-option>
      <el-option
        :key="0"
        label="女"
        :value="0">
      </el-option>
    </el-select>
  </template>
</el-form-item>

sex: [{
   required: true,
   message: '请选择性别',
   trigger: 'blur'
}],

原因1是v-model中的属性值addForm.sex1与prop属性值sex不一致，应该改为addForm.sex即可如下图箭头所示处
有些伙伴发下问题还没有解决，因为还有一个地方会导致同样的问题，原因2如下图所示

将 trigger: 'blur'改为trigger: ['blur','change']即可

我们可以看一下开发文档，为什么加上change就可了

以上就是介绍下拉列表验证无效的所有问题，喜欢的收藏