关于iview表单验证的问题：动态增减项、多个表单同时验证、select下拉框验证问题等

使用iview做Form表单验证时遇到很多问题，整理记录下来：

一、<Form>表单中一条<FormItem>里有多个输入框，但只需要验证其中几个

   

   前三项需要表单验证，但prop绑在<Input>上验证无效，只能对一整个<FormItem>里的内容进行验证。

   解决办法：在<FormItem>里再套一层<FormItem>，把prop绑在里层<FormItem>上，拿第一个<Input>举例：

二、动态增减项表单验证

   第一步问题解决之后，验证仍然不成功（输入框里填入内容但报错一直在），查看了iview官方文档，

   发现动态增减项的porp设置规则：数组变量名 + 遍历索引 + 元素属性名

   所以设置了动态prop属性，并且为该<Input>设置rules属性做验证：

三、动态增减项统一验证

  表单验证可以了，但每次新创建一个表单，还没开始填信息，必填项直接报错（初始值赋值为空），测试了很久，发现是因为单独给这一个表单域绑了rules，每次表单刚创建时就开始验证了。

 解决办法：

<template>
    <div>
       <Form ref="formDynamic" :model="formDynamic" :rules="ruleValidate" :key="tableId">
         <FormItem v-for="(item, index) in currentShow " :key="index">
           <div class="form-item-box" style="width:12%;">
             <FormItem :prop="'items.'+index +'.field_name'" :rules="formValid.field_name">
               <Input v-model="item.field_name" placeholder=""></Input>
             </FormItem>
           </div>
         </FormItem>
       </Form>
    </div>
</template>

<script>
  computed: {
      formValid(){
        return{
          field_name:[
            { required: true, message: '必填', trigger: 'blur' },
          ],
        }
      }
    }
</script>

四、<Select>下拉框验证问题

   <Select>验证不通过，查看iview官方文档，发现是因为iview默认验证数据类型为String，而我的select用的value是number类型的。

   解决办法：在验证规则里加上：type : 'number'

五、两个表单同时验证

 

   点击提交时，需要同时进行两个表单的验证。首先想到的方法是，一层一层验证：

 

  但如果两个表单都有必填项未填，错误提示不是同时出现的，验证是一层一层的，先验证上面的表单，再验证下面的表单。所以加了两个变量，判断如果两个变量都为true，再往接口里提交。

formValidate(){
  this.$refs.formItem.validate((valid) => {
     if(valid){
       this.formItemValid = true
      }
    });
  this.$refs.formDynamic.validate((valid) => {
      if(valid) {
       this.formDynamicValid  = true
      }
    })
  },
createTable(){
   this.formValidate();
   if(this.formItemValid && this.formDynamicValid ) {
     this.$store.dispatch('CreateTableHandle', this.addTable).then(success => {
     ...
    })
  }else{
   this.$Message.error('请检查表单是否填写完整');
 }
}

另外，为了避免切换时表单验证报错信息仍然存在，要给<Form>表单绑个key。

至此，这次表单验证遇到的问题算是都解决啦。（前端小白，如有错误请指出）