• 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="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 验证规则,也是可以通过的。

  • 相关阅读:
    Linux 命令[5]:rmdir
    Linux 命令[4]:pwd,date
    Linux 命令[0]:起航
    Linux 命令[3]:cd
    vscode插件
    Object.freeze()
    插件
    前端开发调试线上代码
    前端自动化测试是浪费时间还是节约时间?
    踩坑之用lrz插件进行图片压缩
  • 原文地址:https://www.cnblogs.com/joe235/p/14845645.html
Copyright © 2020-2023  润新知