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

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

Element UI下拉列表el-option中的key、value、label含义
Element UI下拉列表el-option中的key.value.label含义 <el-form :model="queryParams" ref="quer ...
验证邮箱格式html代码,jquery验证邮箱格式是否正确实例讲解
我们来看看都有哪些邮箱: 我们如果一个个的邮箱进行判断,显然是不可能的了. -个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名中间用-个表示"在" ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
vue使用element ui实现下拉列表分页的功能！！！
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1 首先在对话框取消按钮添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
使用element UI 验证时vaild总是false
记录一下前面是一个element ui自定义表单验证规则,就是向后端发ajax请求,验证旧密码正不正确后面: // axios请求,修改密码 const { status, message } = ...
为什么element ui 中表单验证validate验证成功不执行验证成功的逻辑代码
element ui 中表单验证validate验证成功不执行成功的逻辑代码首先今天做项目时遇到的一个问题,下面代码中,如果上面的验证规则通过但是不会执行验证通过的代码,只有验证不通过才会输出els ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...

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

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

最新文章

热门文章