iview表单验证问题 Select验证必填失败,以及表单对象嵌套数组验证方法

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

1, 问题显示如下图

• 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 typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </Option>
        </Select>
    </FormItem>
</Form>
复制代码

• 获取数据格式如下

 typeList: any = [
    {
      id: 1,
      name: 'stringa'
    },
    {
      id: 2,
      name: 'stringb'
    }
  ]
复制代码

• 验证规则代码如下

ruleValidate: any = {
   typeId: [
      { required: true, message: '请选择客户分类', trigger: 'change' }
   ]
}
复制代码

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

ruleValidate: any = {
   typeId: [
      { required: true, type: 'number', message: '请选择客户分类', trigger: 'change' }
   ]
}
复制代码

备注:这个问题只针对动态获取的数据,下面这两种格式验证没有这个问题

 value=1
 
 value="1"

这样不加type验证规则,也是可以通过的
复制代码

<FormItem label="客户分类：" prop="typeId">
    <Select v-model="FormData.typeId" placeholder="请选择" style="width:40%;">
      <Option value="1">选项1</Option>
      <Option value="2">选项2</Option>
    </Select>
  </FormItem>
  <FormItem label="客户分类：" prop="typeId">
    <Select v-model="FormData.typeId" placeholder="请选择" style="width:40%;">
      <Option value=1>选项1</Option>
      <Option value=2>选项2</Option>
    </Select>
</FormItem>
复制代码

• 如有问题,欢迎指正

• 本文为原创,如需转载,请注明出处: iview表单验证问题 Select验证必填失败,以及表单对象嵌套数组验证方法