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

最新推荐文章于 2024-04-10 18:10:27 发布

2301_79962153

最新推荐文章于 2024-04-10 18:10:27 发布

阅读量198

点赞数 2

分类专栏： 2024年程序员学习文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/2301_79962153/article/details/137216940

版权

2024年程序员学习专栏收录该内容

201 篇文章 0 订阅

订阅专栏

   message: '请选择学院',

   trigger: ['blur','change']

}],

}




问题总结：原因是el-form-item中的prop属性值和校验规则中的不一致导致  

上面例子中一个是instid 一个是instId所以校验无效，不显示星号



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



![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824150159294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjkwMjg4,size_16,color_FFFFFF,t_70#pic_center)  

控制台只有两个输出![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824150226834.png#pic_center)



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

如下图校验成功![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824101358254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjkwMjg4,size_16,color_FFFFFF,t_70#pic_center)



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



![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824101619292.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjkwMjg4,size_16,color_FFFFFF,t_70#pic_center)  

相关代码如下：

<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>

sex: [{

required: true,

message: ‘请选择性别’,

trigger: ‘blur’

}],




原因1是v-model中的属性值addForm.sex1与prop属性值sex不一致，应该改为addForm.sex即可如下图箭头所示处  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824145436486.png#pic_center)有些伙伴发下问题还没有解决，因为还有一个地方会导致同样的问题，原因2如下图所示  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824151057600.png#pic_center)  

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



我们可以看一下开发文档，为什么加上change就可了![在这里插入图片描述](https://img-blog.csdnimg.cn/20200824151516538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjkwMjg4,size_16,color_FFFFFF,t_70#pic_center)



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


**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/b0b42b9966f1ce0f29c3c802903c1a79.png)
![img](https://img-blog.csdnimg.cn/img_convert/7a79d1e57e5d0154ae872c5e2473fd24.png)
![img](https://img-blog.csdnimg.cn/img_convert/7e3622007c121429732b4d564d4cf678.png)
![img](https://img-blog.csdnimg.cn/img_convert/8ee4be62ae93b053827c1691f1572668.png)
![img](https://img-blog.csdnimg.cn/img_convert/6e456dced6fb0885361407f1fd17d9ef.png)
![img](https://img-blog.csdnimg.cn/img_convert/9ff60489d01f99699605f587b0340dd0.png)
![img](https://img-blog.csdnimg.cn/13f2cb2e05a14868a3f0fd6ac81d625c.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**

**如果你觉得这些内容对你有帮助，可以添加V获取：vip204888 （备注Android）**
![img](https://img-blog.csdnimg.cn/img_convert/b9cc2ad7e8f92ce49f440492b177b35c.png)

> 自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...

![](https://img-blog.csdnimg.cn/img_convert/1fa658398178daf49f1f9d0ec3c86310.webp?x-oss-process=image/format,png)

（备注Android）**
[外链图片转存中...(img-diYVnX9k-1711929662546)]

> 自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...

[外链图片转存中...(img-S423CCTe-1711929662546)]

> **本文已被[CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》]( )收录**