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

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

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

相关代码如下

 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说，点击立即添加按钮之后重新选择下拉框，校验无效，如下图

相关代码如下：

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

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

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

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