iview 表单验证问题 Select 已经选择 还是弹验证提示

问题:iview 的 Select 下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过

html代码:

复制代码
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <FormItem label="版本信息:" prop="typeId">
        <Select v-model="FormData.typeId" placeholder="请选择" style="width:40%;">
            <Option
                v-for="item in select4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </Option>
        </Select>
    </FormItem>
</Form>

获取数据:

复制代码
select4: [
        {
          value: 1,
          label: 'V1版本'
        },
        {
          value: 2,
          label: 'V2版本'
        }
],

验证规则:

复制代码
ruleValidate: {
   typeId: [
      { required: true, message: '请选择版本信息', trigger: 'change' }
   ]
}

查看 iview 的文档规,发现 iview 默认校验数据类型为 String,而我的 select 用的 value 是 number 类型的,所以校验添加 type 类型,所以最后验证代码应该写成下面这种:

复制代码
ruleValidate: {
   typeId: [
      { required: true, type: 'number', message: '请选择版本信息', trigger: 'change' }
   ]
}

注意:这个问题只针对动态获取的数据,如果是自定义的,可以改数据类型改为 String类型:

复制代码
select4: [
        {
          value: '1',
          label: 'V1版本'
        },
        {
          value: '2',
          label: 'V2版本'
        }
],

这样不加 type 验证规则,也是可以通过的。
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
钟琛......3 分钟前
Java事务失效(面试题)的常见场景
java·数据库·spring
zhangyifang_0095 分钟前
Spring Boot Actuator 跟踪HTTP请求和响应
spring boot·后端·http
天蓝色的鱼鱼33 分钟前
Vue 3.5+ 惰性激活实战指南:解锁SSR极致性能的7大策略
前端·vue.js
一只爱撸猫的程序猿41 分钟前
构建一个结合AI功能实现智能的Redis哨兵切换检测和处理的简单实例
spring boot·redis·aigc
带刺的坐椅41 分钟前
Solon Expression Language (SnEL):轻量高效的Java表达式引擎
java·solon·snel·表达式语言
老马啸西风1 小时前
从零开始手写redis(18)缓存淘汰算法 FIFO 优化
java
Java中文社群1 小时前
超实用!SpringAI提示词的4种神级用法
java·人工智能·后端
代码or搬砖1 小时前
Spring JDBC配置与讲解
java·数据库·spring
魔芋红茶2 小时前
Spring 源码学习 3:工厂后处理器
java·学习·spring
m0_634865402 小时前
sa-token:我将代替你,Spring Security
java·后端·spring