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

最新推荐文章于 2024-01-18 10:16:17 发布

前端小白۞

最新推荐文章于 2024-01-18 10:16:17 发布

阅读量1.5k

点赞数 4

分类专栏：大前端文章标签： view design 前端 javascript

本文链接：https://blog.csdn.net/zzzz121380/article/details/125889614

版权

大前端专栏收录该内容

55 篇文章 6 订阅

订阅专栏

博客讲述了在使用IView UI库的Select组件进行表单验证时遇到的问题，即在Select选择了数据后，仍然收到验证失败的提示。原因是IView默认校验数据类型为String，而实际绑定的value是number类型。解决方案是添加`type:'number'`到验证规则中，确保验证规则与数据类型匹配。修复后的代码示例和验证规则配置也在内容中给出。

摘要由CSDN通过智能技术生成

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

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

<Form ref="ruleForm" :model="ruleForm" :rules="rules"  :label-width="120">
 	<Row :gutter="16">
          <Col span="12">
            <FormItem label="类型" prop="aType">
              <Select
                v-model="ruleForm['aType']"
                clearable
                placeholder="请选择类型">
                <Option
                  v-for="(item) in selectInfo['TypeSelect']"
                  :label="item.dicDisplay"
                  :value="item.dicValue"/>
              </Select>
            </FormItem>
          </Col>
      </Row>
</Form>

查看 iview 的文档规，发现 iview 默认校验数据类型为 String，而我的 item.dicValue用的 value 是 number 类型的，所以校验添加 type 类型，最后验证代码写成下面这种即可正常验证：

data(){
    return{
        rules:{
           aType: [
          { required: true, message: '输入不能为空', trigger: 'change',type:'number' }
        ], 
        }
    }
}