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-optionv-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就可了

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

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的element ui 下拉列表验证无效的问题（通俗易懂）-实例讲解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。